How to build and display a custom field comment form on the front-end page?

When you want website visitors to be able to interact with you, such as submitting questions, providing feedback, or making appointments, a well-functioning contact form is essential.AnQiCMS provides a very flexible and powerful message management function, the core of which is the support for custom message fields, allowing you to build personalized forms according to your actual business needs.This article will guide you on how to build and display these comment forms with custom fields on the front-end page.

Why do you need a custom message form?

The traditional feedback form may only include basic fields such as name, email, and message content, but in many cases, these fields are far from meeting our needs.For example, if you run a training institution, you may need to collect students' ages, courses of interest;If you are a recruitment website, you may need to provide the educational background and work experience of job seekers.By custom fields, you can accurately collect the necessary information based on the specific functions of the website and user group, greatly enhancing the efficiency and user experience of data collection.The AnQiCMS custom message field feature was born for this, allowing you to achieve these personalized needs without writing code and through backend configuration.

Configure custom message field in the background

Firstly, we need to define the fields required for the留言表单留言表单in the AnQiCMS backend.

Log in to your AnQiCMS backend, navigate to the "Function Management" area of the left menu, and then click "Website Messages".Here, you can see the current list of comment fields.The system usually presets some basic fields, and you can also add or modify fields according to your needs.

Click Add New Field, you will see the following key configuration items:

• Parameter name and calling field:
  • Parameter NameThis is the Chinese name of the field, which will be displayed to the user, such as 'Your name', 'Phone number'.
  • Field invocationIt is the English name used internally by the system for identification and storage of data, it is recommended to use concise lowercase letters, such asyour_name/phone.
• Field typeThe AnQiCMS provides various field types to adapt to different data input needs, which is similar to the concept of custom fields in the content model:
  • Single-line text：Applicable to names, titles, short sentences, etc., for brief text entries.
  • Number：Only numbers are allowed, suitable for phone numbers, quantities, etc.
  • Multi-line text：Used for longer messages or detailed descriptions.
  • Single choice: Displayed as a radio button, the user can only select one option.
  • Multiple selections: Displayed as checkboxes, the user can select multiple options.
  • Drop-down selection: It is presented in a dropdown menu format, where users select an option from the predefined choices.
• Mandatory?: Checking this option will force users to fill in this field, ensuring you collect critical information.
• Default value/options:
  • For single-line text, numbers, and multi-line text, you can set the default fill content or prompt text here.
  • For single choice, multiple choice, and dropdown selection, you can enter your options one per line here, for example:

    
    男
    女
    保密
    

    The system will automatically generate the front-end options based on the options you enter.

After completing the field configuration, save the changes. These custom fields are already ready in the background, waiting to be called in the front-end page.

Build the comment form on the front-end page.

After the field configuration on the back-end is completed, the next step is to build and display this comment form on the website front-end.The AnQiCMS template system is based on the Django template engine syntax in Go language, providing strong flexibility, allowing you to easily render the fields defined in the backend into HTML forms.

First, you need to find or create a template file for displaying the comment form. According to the template conventions of AnQiCMS, the template file for the comment page is usually located in your template directory.guestbook/index.htmlorguestbook.htmlFor example, if your template name isdefaultthe file path might be/template/default/guestbook/index.html.

You can use it in the template file,{% guestbook fields %}The tag loads all comment fields configured on the backend. This tag stores all field information in a name calledfieldsIn the array object, you can iterate over this array to dynamically generate form elements.

Here is a detailed example of a front-end form construction that covers rendering of various field types and the logic of form submission:

`twig

{# 用于指定后端返回格式，html 返回页面，json 返回 JSON 数据，默认是 html #}
<input type="hidden" name="return" value="html">

{% guestbook fields %}
    {% for item in fields %}
    <div class="form-group">
        <label for="{{ item.FieldName }}">
            {{ item.Name }}
            {% if item.Required %}
                <span class="required-star">*</span> {# 必填字段的提示 #}
            {% endif %}
        </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 }}"
                       autocomplete="off"
                       class="form-control">
            {% elif item.Type == "textarea" %}
                <textarea id="{{ item.FieldName }}"
                          name="{{ item.FieldName }}"
                          {% if item.Required %}required{% endif %}
                          placeholder="{{ item.Content }}"
                          rows="5"
                          class="form-control"></textarea>
            {% elif item.Type == "radio" %}
                {%- for val in item.Items %}
                <label class="radio-inline">
                    <input type="radio"
                           name="{{ item.FieldName }}"
                           value="{{ val }}"
                           {% if item.Required and forloop.First %}required{% endif %} {# 确保第一个选项是必选 #}
                           class="form-check-input">
                    {{ val }}
                </label>
                {%- endfor %}
            {% elif item.Type == "checkbox" %}
                {%- for val in item.Items %}
                <label class="checkbox-inline">
                    <input type="checkbox"
                           name="{{ item.FieldName }}[]" {# 多选框需要加 [] #}
                           value="{{ val }}"
                           {%