As an experienced website operations expert, I know the importance of a flexible and efficient content management system for a corporate website.AnQiCMS (AnQi CMS) stands out in the CMS domain developed in Go language with its excellent customizability and ease of use.Today, let's delve deeply into a powerful feature of AnQiCMS: how to skillfully use the comment form tag to dynamically generate front-end form fields.This can greatly enhance the flexibility of the website, as well as make content operations more convenient.

The value of dynamic forms: the foundation of flexibility and efficiency

In website operation, the message form is an important bridge for users to interact with the website.Whether it is product consultation, customer feedback, or cooperation intention, a well-designed and easy-to-fill form can effectively improve conversion rates.However, with the development of business and the change of market demand, form fields often need to be adjusted frequently.If each modification requires delving into the code, it not only takes time and effort, but is also prone to introducing errors.

The留言表单标签恰好解决了这一痛点.It allows you to centrally manage form fields in the background and dynamically render them through front-end template tags.This means that when you need to add a 'Industry' field or change 'Contact Phone' to 'Mobile Phone', you only need to make simple configurations in the AnQiCMS backend. The front-end page will update automatically without touching any template code, greatly enhancing operation efficiency and website adaptability.

核心揭秘：AnQiCMS留言表单标签

实现这一魔法的核心便是AnQiCMS提供的guestbookThis tag is specifically used to retrieve the form field information you have configured in the background.

Its basic usage is very intuitive:

{% guestbook fields %}
    {# 在这里循环和渲染表单字段 #}
{% endguestbook %}

Here,fieldsis a variable that will carry all the detailed information of the fields you define for the comment form in the AnQiCMS backend. If your website has enabled the multi-site management feature and you want to call the comment form of a specific site, you can also do so bysiteId参数进行指定，不过对于大多数单站点场景，这并非必要。

动态字段的秘密：解析字段属性

Whenguestbook标签将表单字段信息传递给fields变量后，每一个item(Each form field) includes a series of key attributes that are the basis for dynamically generating form elements on the front end:

  • Name(Form name):This is the friendly name displayed on the front-end to the user, such as 'Your Name', 'Contact Information', etc.
  • FieldName(Form Variable):This will become the HTML form element'snameProperty value, is the identifier received by the backend when receiving form data. For example,user_name/contactetc.
  • Type(Form type):This is the key to determine which HTML element is rendered on the front-end. AnQiCMS supports multiple types, includingtext(text),number(Number),textarea(Multi-line text),radio(Single choice),checkbox(multiple choice) andselect(Dropdown selection).
  • Required(whether it is required):An boolean value indicating whether this field is required. Front-end can add HTML5 attributes based on this property or perform client-side validation.requiredAttribute, or client-side validation.
  • Content(Form default value/suggestion):For text input boxes, this is usuallyplaceholder(placeholder) text; for other types, it may be the default value.
  • Items(Option list):WhenTyperesponse forradio/checkboxorselectwhenItemsThis will be an array that includes all the option values available to the user.

By parsing these properties, we can write a set of generic rendering logic in the frontend template, allowing form fields to automatically present according to the backend configuration.

Practice: Build a flexible feedback form

UnderstoodguestbookThe label and its field properties are set, and we can then start building a highly flexible comment form. The following is a typical AnQiCMS template code snippet that shows how to iteratefieldsVariable, and according to each field,Typeproperties dynamically render different HTML form elements:

<form method="post" action="/guestbook.html">
    {% guestbook fields %}
        {% for item in fields %}
            <div class="form-group"> {# 可根据您的CSS框架调整 #}
                <label for="{{ item.FieldName }}">{{ item.Name }}</label>
                <div>
                    {# 根据字段类型动态渲染不同的输入元素 #}
                    {% 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 }}"
                               autocomplete="off"
                               class="form-control"> {# 可根据您的CSS框架调整 #}
                    {% 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> {# 可根据您的CSS框架调整 #}
                    {% elif item.Type == "radio" %}
                        <div class="form-check-group"> {# 示例分组容器 #}
                            {% for val in item.Items %}
                                <input type="radio"
                                       name="{{ item.FieldName }}"
                                       id="{{ item.FieldName }}-{{ loop.index }}" {# 使用loop.index确保ID唯一 #}
                                       value="{{ val }}"
                                       {% if item.Required %}required{% endif %}
                                       class="form-check-input"> {# 可根据您的CSS框架调整 #}
                                <label for="{{ item.FieldName }}-{{ loop.index }}" class="form-check-label">{{ val }}</label>
                            {% endfor %}
                        </div>
                    {% elif item.Type == "checkbox" %}
                        <div class="form-check-group"> {# 示例分组容器 #}
                            {% for val in item.Items %}
                                <input type="checkbox"
                                       name="{{ item.FieldName }}[]" {# 多选时name属性后加[] #}
                                       id="{{ item.FieldName }}-{{ loop.index }}"
                                       value="{{ val }}"
                                       {% if item.Required %}required{% endif %}
                                       class="form-check-input"> {# 可根据您的CSS框架调整 #}
                                <label for="{{ item.FieldName }}-{{ loop.index }}" class="form-check-label">{{ val }}</label>
                            {% endfor %}
                        </div>
                    {% elif item.Type == "select" %}
                        <select name="{{ item.FieldName }}"
                                id="{{ item.FieldName }}"
                                {% if item.Required %}required{% endif %}
                                class="form-control"> {# 可根据您的CSS框架调整 #}
                            {% for val in item.Items %}
                                <option value="{{ val }}">{{ val }}</option>
                            {% endfor %}
                        </select>
                    {% endif %}
                </div>
            </div>
        {% endfor %}

        {# 提交按钮 #}
        <div class="form-group">
            <button type="submit" class="btn btn-primary">提交留言</button>
            <button type="reset" class="btn btn-secondary">重置</button>
        </div>
    {% endguestbook %}
</form>

The core of this code is{% for item in fields %}loop and its internal{% if item.Type == "..." %}Condition judgment.Through this structure, every form field configured in the background will be traversed and rendered into the corresponding HTML input element according to its defined type.Typeresponse fortextfield, it will be rendered into a<input type="text">Label.

Form submission and backend interaction

When the user fills in and submits the form, the AnQiCMS backend will receive these data. The form'sactionshould point to/guestbook.htmlThis fixed interface. In addition to the fields you customize on the back-end, AnQiCMS usually also requires submission of some default fields, such asuser_name(name of the leaver),contact（Contact information）andcontent(Message content).These fields may still require submission through additional hidden fields or by explicitly creating corresponding input boxes in the frontend template, even if they are not explicitly configured as custom fields in the background, to meet the backend processing logic.

It is worth mentioning that,