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, and through its powerful template tag system, especiallyguestbookLabels, allowing you to flexibly generate comment forms on the website and easily customize form fields to meet various business scenarios.

The foundation of dynamic comment forms:guestbooktags

In the AnQi CMS, the core to display the message form on the front-end page is to useguestbookTemplate tag.The function of this tag is to retrieve the field information of the pre-configured message form in the background, and then you can dynamically construct the complete form in the template based on this information.

The usage method is very intuitive:

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

Here,fieldsis a series generated byguestbookThe variable provided by the label, it includes all the field information of the comments defined in the 'Website Message Management' under the 'Function Management' in the AnQi CMS backend.Each field is an independent object, carrying detailed properties such as the field name, type, and whether it is required.

Customize 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 comment board in the background management interface. These fields will directly affectguestbookThe label in the front-end can dynamically generate form elements.

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

  • Single-line text (text)：适用于姓名、邮箱、电话等简短输入。
  • Number (number)：确保用户只能输入数字，例如数量、年龄。
  • Multi-line text (textarea)：For situations that require longer text input, such as comments and detailed descriptions.
  • Single choice (radio)：Provide a set of options for the user to choose from, such as "gender" and "intended product".
  • Multiple choice (checkbox)：Provide a set of options that the user can select multiple, such as "service needs
  • 下拉选择 (select)The following pull-down menu displays a list of options, allowing users to select a single option. Suitable for lists such as countries, provinces, etc.

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 call field (FieldName），This is the field name received by the backend when the form is submitted; Choose the field type (TypeThis determines the type of HTML input element generated by the front end; as well as setting whether it is requiredRequired) and default value or option listContent/Items).

Dynamically build the form in the template

GetfieldsAfter the variable, you can use aforto iterate over all fields and according to each fieldTypeproperties, dynamically generate the corresponding HTML form elements.

The following 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,item.NameUsed for displaying labels for form fields,item.FieldNameUsed as input boxes,nameattributes,item.TypeGenerate different HTML input elements based on its value ("text", "number", "textarea", "radio", "checkbox", "select").item.RequiredThe property will add a required field.requiredThe property. For radio buttons, checkboxes, and dropdown selections,item.Itemsthey will be traversed to generate each option.

Message form submission and security

The submission address of the message form is fixed as/guestbook.html，Submission method isPOST. The CMS will automatically handle the submitted data based on the fields you configure on the backend. In addition to custom fields, the system will default to receivinguser_name(Username),contact（Contact information）andcontent(message content) these core fields.

To improve the security of the website and prevent spam comments, it is strongly recommended that you enable the captcha function.In the "Background Settings" -> "Content Settings" of the AnQi CMS background, you can enable the comment captcha.