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 feature, the core of which is to support 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 custom field comment forms on the front-end page.

Why do you need a custom message form?

Traditional feedback forms may only include basic fields such as name, email, and message content, but in many scenarios, these fields are far from meeting our needs.For example, if you run a training institution, you may need to collect students' ages and courses of interest; if you are a recruitment website, you may need to collect job seekers' educational backgrounds and work experience.By custom fields, you can accurately collect the required information according to the specific functions of the website and the user group, greatly improving the efficiency of data collection and user experience.The custom message field feature of AnQiCMS is designed for this, allowing you to meet these personalized needs without writing any code, simply through backend configuration.

Backend configuration for custom message field

Firstly, we need to define the required fields for the message form in the AnQiCMS backend.

Log in to your AnQiCMS backend, navigate to the "Feature ManagementHere, you can see the current list of comment fields available.The system usually pre-sets some basic fields, and you can also add or modify fields according to your needs.

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

  • Parameter name and field name:
    • Parameter nameThis is the Chinese name of the field, which will be displayed to the user, such as 'Your Name', 'Phone Number'.
    • Call fieldis the English name used internally by the system for identifying and storing data, it is recommended to use concise lowercase letters, for exampleyour_name/phone.
  • field typeAnQiCMS provides various field types to accommodate different data input needs, which is similar to the concept of custom fields in the content model:
    • Single Line Text[en] : Suitable for names, titles, short sentences, etc. for brief text input.
    • Number[en] : Only numbers are allowed, suitable for phone numbers, quantities, etc.
    • Multi-line text[en] : Used for longer messages or detailed descriptions.
    • Single selection: Presented as a single selection button, the user can only select one option.
    • Multiple selection: Presented as a checkbox, the user can select multiple options.
    • Drop-down selection[en]The following is presented in a dropdown menu format, where the user selects one from the preset options.
  • Is required[en]Checking this option will force the user to fill in this field, ensuring that you collect key information.
  • [en]Default value/option:
    • For single-line text, numbers, and multi-line text, you can set the default fill content or prompt text for the field here.
    • For single-choice, multiple-choice, and dropdown selections, 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留言表单留言表单 on the front-end page

After the background field configuration is completed, the next step is to build and display this message form on the website front-end page.AnQiCMS's template system is based on the Django template engine syntax of the Go language, providing powerful 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 AnQiCMS template conventions, the template file for the comment page is usually located in your template directory underguestbook/index.htmlorguestbook.htmlFor example, if your template name isdefaultthe file path might be/template/default/guestbook/index.html.

In the template file, you can use{% guestbook fields %}This tag loads all the fields of the backend configuration by label. This tag will store all field information in a namedfieldsIn the array object, you can iterate through this array to dynamically generate form elements.

The following is a detailed example of a front-end form construction, which covers the 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 }}"
                           {%