In modern website operation, providing a convenient user communication channel is crucial, and the message board is one of the efficient ways. AnQiCMS (AnQiCMS) understands this need, through its powerful template tag system, especiallyguestbookTags, allowing you to flexibly generate dynamic comment forms on the website, and easily customize form fields to meet various business scenarios.

The foundation of dynamic comment forms:guestbookTag

In Anqi CMS, to display a message form on the front-end page, the core is to useguestbookTemplate tag. This tag is used to retrieve the form field information you have pre-configured on the backend, and then you can dynamically build out the complete form based on this information.

The usage method is very intuitive:

{% guestbook fields %}
    {# 在这里，您可以使用fields变量来构建您的表单 #}
{% endguestbook %}

here,fieldsis composed byguestbookThe variable provided by the label, it includes all the field information of the comments defined in the "Website Comment Management" under the "Function Management" in the Anqi CMS background.Each field is an independent object, carrying detailed properties such as the name, type, and whether it is required.

Custom form fields on the back-end: the source of flexibility

The strength of AnQi CMS lies in the fact that you do not need to modify the code to add various custom fields to the message board in the backend management interface. These fields will directly affectguestbookTags that can be dynamically generated on the front-end form elements.

In the "Function Management" "Website Message Management", you can add to the message form:

  • Single-line text (text)：Applicable for short inputs such as names, email addresses, and phone numbers.
  • Number (number)：Ensure that users can only enter numbers, such as quantities and ages.
  • Multi-line text (textarea)：Applicable to situations where longer text input is required, such as leaving messages, detailed descriptions, etc.
  • Single choice (radio)：Provide a set of options that the user can choose from, such as gender, intended product, etc.
  • Multiple selection (checkbox)Provide a set of options, users can select multiple, such as 'service needs', 'hobbies', etc.
  • Dropdown selection (select): Display a group of options in the form of a dropdown menu, suitable for lists such as countries, provinces, etc., where the user can select a single option.

When configuring these fields, you can specify the display names for them (Name), this is the label seen by the user on the front end; set the calling field(FieldName), this is the field name received by the backend when the form is submitted; select the field type(TypeThis determines what type of HTML input element is generated on the frontend; as well as setting whether it is required or notRequired) and default value or option listContent/Items)

Build the form dynamically in the template

Get itfieldsAfter the variable, you can use aforloop to traverse all fields and generate the corresponding HTML form elements according to each fieldTypeproperty.

This is a typical template code snippet for a dynamically generated form:

<form method="post" action="/guestbook.html">
    {% guestbook fields %}
        {% for item in fields %}
        <div class="form-group">
            <label for="{{ item.FieldName }}">{{ item.Name }}{% if item.Required %}<span class="text-danger">*</span>{% endif %}</label>
            {% if item.Type == "text" or item.Type == "number" %}
                <input type="{{ item.Type }}" name="{{ item.FieldName }}" id="{{ item.FieldName }}"
                       {% if item.Required %}required{% endif %} placeholder="{{ item.Content }}" class="form-control">
            {% elif item.Type == "textarea" %}
                <textarea name="{{ item.FieldName }}" id="{{ item.FieldName }}"
                          {% if item.Required %}required{% endif %} placeholder="{{ item.Content }}" rows="5" class="form-control"></textarea>
            {% elif item.Type == "radio" %}
                <div class="form-check-group">
                {% for val in item.Items %}
                    <div class="form-check form-check-inline">
                        <input type="radio" name="{{ item.FieldName }}" id="{{ item.FieldName }}_{{ forloop.Counter }}" value="{{ val }}" class="form-check-input"
                               {% if forloop.Counter == 1 %}checked{% endif %} {% if item.Required %}required{% endif %}>
                        <label class="form-check-label" for="{{ item.FieldName }}_{{ forloop.Counter }}">{{ val }}</label>
                    </div>
                {% endfor %}
                </div>
            {% elif item.Type == "checkbox" %}
                <div class="form-check-group">
                {% for val in item.Items %}
                    <div class="form-check form-check-inline">
                        <input type="checkbox" name="{{ item.FieldName }}[]" id="{{ item.FieldName }}_{{ forloop.Counter }}" value="{{ val }}" class="form-check-input"
                               {% if forloop.Counter == 1 %}checked{% endif %} {% if item.Required %}required{% endif %}>
                        <label class="form-check-label" for="{{ item.FieldName }}_{{ forloop.Counter }}">{{ val }}</label>
                    </div>
                {% endfor %}
                </div>
            {% elif item.Type == "select" %}
                <select name="{{ item.FieldName }}" id="{{ item.FieldName }}" class="form-control" {% if item.Required %}required{% endif %}>
                    {% for val in item.Items %}
                        <option value="{{ val }}">{{ val }}</option>
                    {% endfor %}
                </select>
            {% endif %}
        </div>
        {% endfor %}

        <div class="form-group text-center mt-4">
            <button type="submit" class="btn btn-primary">提交留言</button>
            <button type="reset" class="btn btn-secondary ml-2">重置</button>
        </div>
    {% endguestbook %}
</form>

In this code block,item.NameUsed to display the label for form fields,item.FieldNameUsed as an input box,nameProperty,item.TypeGenerate different HTML input elements based on their value ("text", "number", "textarea", "radio", "checkbox", "select")item.RequiredThe property will be added as a required field.requiredFor radio, checkbox, and dropdown selections,item.Itemsit will be traversed to generate each option.

Message form submission and security

The submission address of the message form is fixed to/guestbook.htmlThe submission method isPOST. Anqi CMS will automatically process the submitted data based on the fields you configure in the background. In addition to custom fields, the system will automatically receiveuser_name(Username),contact(Contact information) andcontentthese core fields of (留言内容).

To enhance the security of the website and prevent spam comments, it is strongly recommended that you enable the captcha function.In the AnQi CMS backend, under "Backend Settings" -> "Content Settings", you can enable comment captcha.After enabling, you need to add the following code to your comment form to dynamically retrieve and display