As an experienced website operation expert, I know the importance of a flexible and efficient website management system for content operation.AnQiCMS (AnQi CMS) is exactly relying on its powerful customization capabilities, allowing content operators to freely create functions that meet business needs, among which the flexibility of the message form is one of its highlights.Today, we will deeply analyze the AnQiCMS comment form tag infieldsVariable, take a look at what practical fields of information it contains, helping you build a more intelligent and user-friendly interactive module.

In-depth analysis of the AnQiCMS comment form'sfieldsVariable: Unlock the door to custom interactions

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

When we delve deep intofieldsWhen a variable is encountered, it is not a simple list, but rather a collection of objects that make up the detailed attributes of each form field. Each 'form item' isfieldsAn element of an array, each carrying a series of key information, allowing the template to dynamically generate the corresponding HTML elements and perform necessary front-end 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 or asplaceholderThe prompt.

2.FieldName: The backend identifier of the form item

FieldNameIt is the unique identifier for this form item during data submission and backend processing. It is also a string, but it is different fromNameUser-friendliness,FieldNameMore technical in nature, used forinput/textareaorselectsuch as HTML elements,nameattribute values. When a user submits a form, the backend server will use thisFieldNameTo identify and receive the corresponding data. The field name you set for the custom message field in the background will appear asFieldNamethe value.

3.Type: The type of form item

TypeField isfieldsThe one with the most decisive meaning among variables, it defines the input type or presentation 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, namely:

  • text(Text type):Used for short text input, such as names, titles, etc.
  • number(Number type):Used specifically for numeric input, browsers usually provide a numeric keypad or increment/decrement buttons.
  • textarea(Multi-line text type):For long text input, such as comments and detailed descriptions.
  • radio(Single selection type):Provide a set of mutually exclusive options, where the user can only select one.
  • checkbox(Multiple selection type):Provide a set of non-exclusive options that the user can select one or more.
  • select(Dropdown selection type):Provide a dropdown menu from which the user can select one from the preset options.

TypeThe different values directly affect subsequentContentandItemsThe specific role of the field is the key to building diverse forms

4.Requiredwhether it is required

RequiredIs a boolean value (trueorfalse), it indicates whether the current form item is required. WhenRequiredWithtrueIt means that the user must fill in or select this item before submitting the form, otherwise, it will trigger a front-end validation prompt. In HTML, this usually corresponds toinputortextareaelementrequiredProperty.

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

ContentThe value of the field depends onTypeDiffering emphasis. Fortext/numberandtextareaand other input fields,Contentis usually asplaceholderThe value, providing input hints; or asvalueThe value, prefilling the form's default content. It is a string that can contain any text information.

6.ItemsOption list of a selection form

WhenTypeWithradio(Single choice),checkbox(Multiple choice) orselectwhen selecting from a dropdown,ItemsIt is particularly important. It is a string array that contains all the options available to users. Template developers need to iterate over thisItemsarray to generate corresponding options for eachinput(type="radio"ortype="checkbox"oroptionEach element.ItemsThe value of the array element is the text of the option and the correspondingvalue.

Flexible application: Build your message form in the template.

By processingfieldsA deep understanding of variables will make it easy to build a custom comment form. Template developers can take advantage offorLoop throughfieldsan array and combine it with conditional judgments such as{% if item.Type == "text" %})to dynamically generate different types of HTML form elements. This pattern greatly reduces the hard-coded structure of forms, making it extremely flexible to modify and extend.

For example, you can use the following logic in the front-end template 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="