How to dynamically build and display custom form fields for leaving messages in the template?

In website operation, the message form is an important bridge for users to interact with the website, collect user feedback, or potential customer information.A flexible and customizable comment form can greatly enhance the practicality and user experience of a website.AnQiCMS (AnQi CMS) provides strong support in this regard, allowing users to customize the fields of the message form in the background, and dynamically build and display these fields in the front-end template to meet various personalized business needs.

AnQiCMS flexibility of the comment form

One of AnQiCMS's core strengths lies in its 'flexible content model' design, which also extends to the website's comment feature.The system not only provides basic message functionality, but also allows users to freely add and edit the fields of the message form according to specific business scenarios.This means that whether you need to collect users' contact information, product requirements, service feedback, or any other customized information, it can all be achieved through simple configuration without the need for complex code changes.This high degree of customization makes AnQiCMS the ideal tool for small and medium-sized enterprises and content operation teams to interact with users and collect data.

Configure custom message field in the background

In the AnQiCMS backend management interface, you can usually find the related settings for 'Website Message Management' under the 'Function Management' module.Here, you will find an intuitive interface for defining the various fields of the comment form.You can set each field:

• Form name (Name)This is the name of the field displayed to the user on the front end, for example, "Your name", "Phone number", etc.
• Form Variable (FieldName)This is the key name corresponding to the field when submitting the form, it is usually recommended to use lowercase English letters for easy program processing.
• Field Type (Type): AnQiCMS provides various field types to meet different data collection needs, including:
  • Single-line Text (text)Used to collect brief text information, such as name, email.
  • Number (number)Used to collect numbers, such as age, quantity.
  • Multiline text (textarea): Used to collect longer text information, such as detailed descriptions, comments.
  • Single choice (radio): Provides a set of predefined options, from which the user can only choose one.
  • Multiple choice (checkbox)Provide a set of preset options, the user can select multiple options.
  • Dropdown selection (select)Provide a dropdown menu, the user selects an option from the preset options.
• RequiredCan mark a field as required to ensure that users submit necessary information.
• Default values or options (Content / Items): For single-line text, numbers, and multi-line text, you can set default placeholder text; for radio buttons, checkboxes, and dropdown selections, this is where you define specific options.

Configure these settings to create highly personalized, business-specific comment forms.

Dynamically build and display comment form fields in the template.

How can these fields be dynamically displayed on the website front-end after the message field is configured in the background? AnQiCMS providesguestbookLabel, this label is the key to connect the backend configuration with the frontend display.

{% guestbook fields %}The label is used to retrieve all the form field information set in the backend and store it in a namedfieldsin an array object. You can traverse thisfieldsarray, and dynamically generate the corresponding HTML form elements based on the type of each field.

Here is a typical template code example that shows how to traversefieldsthe array to generate different form elements:

<form method="post" action="/guestbook.html">
{% guestbook fields %}
    {% for item in fields %}
    <div>
        <label>{{item.Name}}</label>
        <div>
            {% if item.Type == "text" or item.Type == "number" %}
            <input type="{{item.Type}}" 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" %}
            {%- for val in item.Items %}
            <input type="{{item.Type}}" name="{{item.FieldName}}" value="{{val}}" title="{{val}}"> {{val}}
            {%- endfor %}
            {% elif item.Type == "checkbox" %}
            {%- for val in item.Items %}
            <input type="{{item.Type}}" name="{{item.FieldName}}[]" value="{{val}}" title="{{val}}"> {{val}}
            {%- endfor %}
            {% elif item.Type == "select" %}
            <select name="{{item.FieldName}}">
                {%- for val in item.Items %}
                <option value="{{val}}">{{val}}</option>
                {%- endfor %}
            </select>
            {% endif %}
        </div>
    </div>
    {% endfor %}
    <div>
        <div>
            <button type="submit">提交留言</button>
            <button type="reset">重置</button>
        </div>
    </div>
{% endguestbook %}
</form>

Code analysis:

1. <form method="post" action="/guestbook.html">: This is a standard HTML form declaration,actionproperty points to/guestbook.htmlThis is the default interface address for AnQiCMS to handle message submission.
2. {% guestbook fields %}Calling AnQiCMS'sguestbooklabel, assigns the field information configured in the background tofieldsVariable.
3. {% for item in fields %}: Loop through.fieldsEach field object in the array.itemThe variable represents the field being processed.
4. {{item.Name}}: Shows the field name, such as "Name".
5. {% if item.Type == "text" or item.Type == "number" %}According toitem.TypeThe value determines the field type.
   • If it is a "text" or "number", a one is generated<input>tag, typeThe attribute is dynamically set toitem.Type,nameset the attribute toitem.FieldName(Very important, used for backend data reception),placeholderis set toitem.Content.{% if item.Required %}required{% endif %}Then add HTML5'srequiredProperty.
   • {% elif item.Type == "textarea" %}: Generate<textarea>multi-line text box.
   • {% elif item.Type == "radio" %}: loopitem.Items(option array), generate a tag for each optiontype="radio"of<input>label. Note that all radio buttons'nameProperties are the same to achieve a radio button effect.
   • {% elif item.Type == "checkbox" %}: Similarly, loopitem.Items, generate one for each optiontype="checkbox"of<input>Label. The properties of the checkbox.nameare usually accompanied by[]This indicates that multiple values can be submitted.
   • {% elif item.Type == "select" %}: Generate<select>Loop through the dropdown menu.item.ItemsGenerate for each option.<option>.
6. item.FieldNameThis variable name corresponds exactly to the form variable you set in the background, the AnQiCMS backend will identify and receive the data submitted by the user through thisname.
7. required: HTML5 form validation attribute, if