In website operation, the message form is an important bridge for interaction with users, collecting feedback, and establishing contact.AnQiCMS (AnQiCMS) offers a powerful and flexible message feature, which not only allows users to quickly build basic forms, but also supports custom fields through the backend, allowing forms to dynamically adapt to various business needs.This article will delve into how to build such a comment form in Anqi CMS templates and dynamically display these custom fields from the backend.

1. Prepare the background: Configure the custom fields of the message form

Before starting template development, we need to make some basic configurations in the Anqi CMS backend management system. These configurations are crucial for the form to dynamically display custom fields.

  1. Enter the message management interface: Log in to the Anqi CMS backend, navigate to the "Function Management" menu, find and click the "Website Messages" option.
  2. Set additional form fieldsOn the "website message" page, you will see a section named "Form Additional Field Settings". This is where we define custom fields.
    • Add new fieldClick the add button to add a field to your comment form.
    • Parameter name (display name)This is the field name displayed to the user in the background and front-end template, such as "Your industry", "Intended product", etc.
    • Calling field (FieldName)This is the unique identifier stored in the database and referenced in the template. It is recommended to use lowercase letters, such asyour_industry/product_interest.
    • Field typeAnQi CMS provides various field types to meet different needs:
      • Single-line text (text)For short text input, such as names, email addresses.
      • Number (number)Only numbers are allowed, such as phone numbers, quantities.
      • Multi-line text (textarea)For long text input, such as detailed descriptions, specific requirements.
      • Single choice (radio)Provide multiple options, the user can only select one.
      • Multiple selection (checkbox)Provide multiple options, the user can select multiple.
      • Dropdown selection (select)Provide a dropdown menu, the user selects one from the preset options.
    • Mandatory?: Select as needed, fields marked as required will be verified when the user submits.
    • Default value/optionsFor single-line text, numbers, and multi-line text, you can set the default placeholder content here.For selection fields (single-choice, multiple-choice, dropdown), enter one option per line, which will be the value that the user can select.
  3. Configure留言验证码（optional but recommended）To effectively prevent spam and malicious submissions, it is recommended to enable the comment captcha function in the "Website Comments" settings.This usually includes selecting the captcha type and style. After enabling, it is also necessary to add the captcha display and input box in the template.

By following these steps, you have defined all the necessary fields and their properties for the comment form.

Part two: Implementation in the template: Dynamic display of custom fields.

After completing the backend configuration, the next step is to edit the frontend template file so that these custom fields can dynamically display to the user and collect user input.

The留言表单template file of 安企CMS is usually located under the theme you are currently using.guestbook/index.htmlorguestbook.html(Please refer to the template directory structure agreement for the specific path).

  1. UseguestbookTag to get field dataIn the template file, Anqi CMS provides a specialguestbookLabel to get the background configuration of the message field. It will pass all fields as an array object to the variable you define.

    <form method="post" action="/guestbook.html">
    {% guestbook fields %}
        {# 在这里循环遍历fields数组，动态生成表单字段 #}
    {% endguestbook %}
    {# 提交按钮 #}
    <div>
        <button type="submit">提交留言</button>
        <button type="reset">重置</button>
    </div>
</form>

    In the above code,fieldsIt is the array of all message fields you define.

  2. Generate form fields dynamically:fieldsarrayitemAll represent a custom field that contains the settings we made in the backendName(Display name),FieldName(Field name),Type(Field type),Required(Is required) andContent(Default values/option list). We can useforloop andif/elif/elseCondition judgment to dynamically generate different HTML form elements based on the field type.

    `twig

    {# 隐藏域，用于后端识别返回格式，默认为html，可改为json #}
<input type="hidden" name="return" value="html">

{# 假设您有常规的用户名、联系方式、留言内容字段 #}
<div class="form-group">
    <label for="user_name">您的姓名</label>
    <input type="text" id="user_name" name="user_name" required placeholder="请填写您的姓名" class="form-control">
</div>
<div class="form-group">
    <label for="contact">联系方式</label>
    <input type="text" id="contact" name="contact" required placeholder="您的电话或邮箱" class="form-control">
</div>
<div class="form-group">
    <label for="content">留言内容</label>
    <textarea id="content" name="content" required rows="5" placeholder="请留下您的宝贵留言" class="form-control"></textarea>
</div>

{# 动态生成自定义字段 #}
{% guestbook fields %}
    {% for item in fields %}
    <div class="form-group">
        <label for="{{item.FieldName}}">{{item.Name}}</label>
        <div>
            {# 单行文本和数字类型 #}
            {% if item.Type == "text" or item.Type == "number" %}
                <input type="{{item.Type}}" id="{{item.FieldName}}" name="{{item.FieldName}}" {% if item.Required %}required{% endif %} placeholder="{{item.Content}}" class="form-control">
            {# 多行文本类型 #}
            {% elif item.Type == "textarea" %}
                <textarea id="{{item.FieldName}}" name="{{item.FieldName}}" {% if item.Required %}required{% endif %} rows="3" placeholder="{{item.Content}}" class="form-control"></textarea>
            {# 单项选择 (radio) #}
            {% elif item.Type == "radio" %}
                {%- for val in item.Items %}
                <label class="radio-inline">
                    <input type="{{item.Type}}" name="{{item.FieldName}}" value="{{val}}" {% if item.Required %}required{% endif %}> {{val}}
                </label>
                {%- endfor %}
            {# 多项选择 (checkbox) #}
            {% elif item.Type == "checkbox" %}
                {%- for val in item.Items %}
                <label class="checkbox-inline">
                    {# 注意：多选框的name属性通常会加上[]以表示数组 #}
                    <input type="{{item.Type}}" name="{{item.FieldName}}[]" value="{{val}}" {% if item.Required %}required{% endif %}> {{val}}
                </label>
                {%- endfor %}
            {# 下拉选择 (select) #}
            {%