In website operations, the message form is an important bridge for users to interact with the website, collect user feedback, or gather information from potential customers.A flexible and customizable contact form can greatly enhance the usability and user experience of a website.AnQiCMS (AnQi CMS) provides strong support in this aspect, allowing users to customize the fields of the留言表单留言表单 in the backend, and dynamically build and display these fields in the frontend template, thus meeting various personalized business needs.

The flexibility of AnQi CMS comment form

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

Backend configuration for custom message field

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.

  • Form Name (Name): This is the name of the field displayed to the user on the frontend, for example, 'Your Name', 'Contact Phone' etc.
  • Form Variable (FieldName)This is the corresponding key in the data when the form is submitted. It is usually recommended to use lowercase English letters, which is convenient for 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 specifically to collect numbers, such as age, quantity.
    • Multi-line text (textarea): Used to collect longer text information, such as detailed descriptions, comments.
    • Single choice (radio)Provide a set of predefined options, the user can only select one.
    • Multiple selection (checkbox))Provide a set of predefined options, the user can select multiple items.
    • Drop-down selection (select): Provide a drop-down menu where users can select an option from predefined choices.
  • RequiredCan mark a field as required to ensure that the user submits necessary information.
  • Default value or options (Content / Items)For single-line text, numbers, and multi-line text, you can set a default placeholder text; for radio buttons, checkboxes, and dropdown selections, this is where you define specific options.

Through these configurations, you can build highly personalized and business requirement-compliant comment forms.

Dynamically build and display comment form fields in the template.

How to dynamically display these fields on the website front-end after the background message field configuration is completed? AnQiCMS providesguestbookLabel, this label is the key that connects the backend configuration with the frontend display.

{% guestbook fields %}Label is used to obtain all the form field information of the留言表单留言 from the backend and store it in a namedfieldsThe array object. You can traverse thisfieldsarray, and dynamically generate the corresponding HTML form elements based on the type of each field.

Below is a typical template code example, which shows how to iteratefieldsthrough an 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 the standard HTML form declaration,actionthe attribute points to/guestbook.htmlThis is the default interface address for message submission processing by AnQiCMS.
  2. {% guestbook fields %}: Call the AnQiCMS interface.guestbookLabel, assign the field information configured in the background tofieldsa variable.
  3. {% for item in fields %}Loop through:fieldsEach field object in the array.itemThe variable represents the field currently being processed.
  4. {{item.Name}}: Displays the field name, such as “Name”.
  5. {% if item.Type == "text" or item.Type == "number" %}: Based onitem.Typevalue to determine the field type.
    • If it is a 'text' or 'number', then a<input>tags,typeproperty is dynamically set toitem.Type,nameproperty is set toitem.FieldName(Very important, used for backend data reception),placeholdersetitem.Content.{% if item.Required %}required{% endif %}Then, add HTML5's based on whether the field is requiredrequiredproperties.
    • {% elif item.Type == "textarea" %}: Generate<textarea>Multi-line text box.
    • {% elif item.Type == "radio" %}: Loopitem.Items(options array), generate one for each optiontype="radio"of<input>Label. Note, all radio buttons should havenamethe same properties to achieve the radio effect.
    • {% elif item.Type == "checkbox" %}: Iterate in the same wayitem.Items, generate atype="checkbox"of<input>label for each option.nameProperties are usually prefixed[]to indicate that multiple values can be submitted.
    • {% elif item.Type == "select" %}: Generate<select>with a dropdown menu and loopitem.Itemsto generate for each option<option>.
  6. item.FieldNameThis variable name corresponds exactly to the 'form variable' you set in the backend, AnQiCMS backend will identify and receive the user submitted data through thisnameto identify and receive the user submitted data.
  7. requiredThe HTML5 form validation attribute, if