As an experienced website operations expert, I know the importance of a flexible and efficient website management system for content operations.AnQiCMS (English) is exactly what allows content operators to create functions that meet business needs at will with its powerful customization capabilities, and the flexibility of the comment form is one of its highlights.fieldsVariables, take a look at what practical fields of information it contains, helping you build smarter and more user-friendly interactive modules.

In-depth analysis of AnQiCMS comment formfieldsVariable: Unlock the door to custom interactions

In the template system of AnQiCMS,guestbookLabels play a vital role as a bridge connecting users with website administrators.Whether it is product consultation, feedback, or business cooperation, a well-designed message form can effectively collect the required information.{% guestbook fields %}...{% endguestbook %}This tag is the core of AnQiCMS giving template developers the ability to highly customize form capabilities. It encapsulates all the information of the留言 fields configured in the background into a name offieldsThe variable is available for you to iterate and render in the front-end template.

When we delve deeper intofieldsWhen you use a variable, you will find that it is not a simple list, but a collection of objects that contain detailed properties of each form field. Each 'form item' isfieldsAn element of an array, each carrying a series of key information, enabling the template to dynamically generate the corresponding HTML elements and perform necessary frontend processing.

Next, we will reveal one by onefieldsThe essence of each available field in the variable:

1.Name: The display name of the form item

This field carries the user-friendly name of the form item, which is the user prompt text we see on the form interface, such as “Your Name”, “Contact Information”, or “Message Content”.NameThe value is a string that is directly facing the end user, intended to clearly guide the user to fill in the corresponding information. It is usually used aslabelLabel text content, or asplaceholder[en] The prompt.

2.FieldName: The backend identifier of the form item

FieldNameis the unique identifier for this form item during data submission and backend processing. It is also a string, but unlikeNameThe user-friendliness,FieldNameMore inclined to the technical level, used forinput/textareaorselectsuch HTML elements,nameattribute values. When the user submits a form, the backend server will use thisFieldNameauto: Identify and receive the corresponding data. For the custom留言 fields in the background, the field name you set will be used asFieldNameauto: The value appears.

3.Typeauto: Type of form item

Typethe field isfieldsThe one with the most decisive meaning in the variable, it defines the input type or presentation method of the form item, thereby guiding the template to generate the correct HTML element.TypeThe value is a string, AnQiCMS currently supports six common form types, they are:.

  • text(Text type):Used for short text input, such as names, titles, etc.
  • number(数字类型):专门用于数字输入,浏览器通常会提供数字键盘或增减按钮。
  • textarea(多行文本类型):Used for long text input, such as message content, detailed description, etc.
  • radio(Single selection type):Provides a set of mutually exclusive options, and the user can only select one.
  • checkbox(Multiple selection type):Provide a set of non-exclusive options, the user can select one or more.
  • select(Dropdown selection type):Provide a dropdown menu, the user selects one from the preset options.

Type[English]的不同值,直接影响了后续ContentandItems[English]字段的具体作用,这正是构建多样化表单的关键。

4.Required[English]:是否为必填项

RequiredIs a boolean value (trueorfalse[English]),它指示当前表单项是否为必填项。当Requiredresponse fortrueWhen, it means that the user must fill in or select this item before submitting the form, otherwise an frontend validation prompt will be triggered. In HTML, this usually corresponds toinputortextarea元素的requiredproperties.

5.Content:The default value or prompt for the form item

ContentThe value of the field depends onTypeand may be emphasized differently. Fortext/numberandtextareaetc. input fields,Contentusually serves asplaceholderThe value of the property, providing input hints; or asvalueThe value of the property, pre-filling the form's default content. It is a string that can contain any text information.

6.Items:Select form option list

WhenTyperesponse forradio(Single choice),checkbox(Multiple selection) orselect(Dropdown selection) when,ItemsThe field is particularly important. It is a string array that contains all the options available to the user. Template developers need to iterate over thisItemsarray, and generate the corresponding options for eachinput(type="radio"ortype="checkbox") oroptionElement. EachItemsThe element value of the array is the text of the option and the correspondingvalue.

Flexible use: Build your comment form in the template

By processingfieldsThe in-depth understanding of variables will make it easy to build a custom message form. Template developers can utilizeforto iteratefieldsarray, and combines conditional judgment (for example{% if item.Type == "text" %})to dynamically generate different types of HTML form elements. This pattern greatly reduces the hard-coded structure of form, making the modification and extension of forms extremely flexible.

For example, in the front-end template, you can use the following logic to render the form:

`twig

{% guestbook fields %}

{% for item in fields %}
<div>
    <label>{{item.Name}}</label>
    <div>
        {# 根据 Type 字段动态生成不同的 HTML 元素 #}
        {% if item.Type == "text" %}
        <input type="text" name="{{item.FieldName}}" {% if item.Required %}required{% endif %} placeholder="{{item.Content}}" autocomplete="off">
        {% elif item.Type == "number" %}
        <input type="number" name="{{item.FieldName}}" {% if item.Required %}required{% endif %} placeholder="{{item.Content}}" autocomplete="off">
        {% elif item.Type == "textarea" %}
        <textarea name="{{item.FieldName}}" {% if item.Required %}required{% endif %} placeholder="{{item.Content}}" rows="5"></textarea>
        {% elif item.Type == "radio" %}
            {# 遍历 Items 数组生成单选选项 #}
            {%- for val in item.Items %}
            <input type="radio" name="{{item.FieldName}}" value="{{val}}" id="{{item.FieldName}}_{{loop.index}}">
            <label for="{{item.FieldName}}_{{loop.index}}">{{val}}</label>
            {%- endfor %}
        {% elif item.Type == "checkbox" %}
            {# 遍历 Items 数组生成复选选项 #}
            {%- for val in item.Items %}
            <input type="checkbox" name="{{item.FieldName}}[]" value="{{val}}" id="{{item.FieldName}}_{{loop.index}}">
            <label for="{{item.FieldName}}_{{loop.index}}">{{val}}</label>
            {%- endfor %}
        {% elif item.Type == "select" %}
        <select name="{{item.FieldName}}" {% if item.Required %}required{% endif %}>
            {%- for val in item.Items %}
            <option value="{{val}}">{{val}}</option>
            {%- endfor %}
        </select>
        {% endif %}
    </div>
</div>
{% endfor %}
<input type="hidden" name="return" value="