1. Background preparation: Configure the custom fields of the comment form

Before starting template development, we need to make some basic configurations in the background management system of AnQi CMS. 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 fieldsIn the “Website Comments” page, you will see a section named “Form Additional Fields Settings”. This is where we define custom fields.
    • Add new fieldClick the add button to add a new field to your comment form.
    • Parameter name (display name)'} ]This is the field name used in the background and front-end templates to display to users, such as 'Your industry', 'Intended product', etc.
    • Call Field (FieldName)This is the unique identifier stored in the database and referenced in the template. It is recommended to use lowercase English letters, for exampleyour_industry/product_interest.
    • field typeAnqi CMS provides various field types to meet different needs:
      • Single-line text (text): Suitable for short text input, such as name, email.
      • Number (number): Only allows input of numbers, such as phone, quantity.
      • Multi-line text (textarea): Suitable for long text input, such as detailed description, specific requirements.
      • Single choice (radio)Provide multiple options, the user can only select one.
      • Multiple choice (checkbox)Provide multiple options, the user can select multiple.
      • 下拉选择 (select)：提供一个下拉菜单，用户从预设选项中选择一个。
    • Is requiredEnglish: According to requirements, mark the fields as required for verification when the user submits.
    • [en]Default value/option：For 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 as the values that users can select.
  3. Configure the message verification code (optional but recommended)To effectively prevent spam and malicious submissions, it is recommended to enable the comment captcha feature in the "Website Message" settings.This usually includes selecting the captcha type and style.After enabling, the corresponding captcha display and input box also need to be added in the template.

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

II. Implementation in the template: dynamically present custom fields

After completing the background configuration, the next step is to edit the front-end template files, so that these custom fields can be dynamically displayed to the user and collect user input.

The leave message form template file of Anqi 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. UseguestbookLabel field data acquisition： In the template file, SafeCMS provides a specialguestbookLabels to retrieve the backend configuration of the comment 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,fieldsThat is the array of all the comment fields you define.

  2. Dynamically generated form fields:fieldseach element in the arrayitemAll represent a custom field, which includes the configurations we made previously in the backgroundName(Display Name),FieldName(Field name),Type(Field type),Required(Required) andContent(Default value/option list). We can useforloop andif/elif/elsecondition judgment to dynamically generate different HTML form elements based on 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) #}
            {%