In website operation, the message form is an important channel for interacting with users, collecting feedback and leads.AnQiCMS (AnQiCMS) provides a flexible message function, one very practical capability of which is to allow us to customize form fields in the background and seamlessly present them in the frontend message form, in order to meet the personalized information collection needs under different business scenarios.

Next, we will discuss in detail how to implement this feature in Anqi CMS.

1. Define custom留言字段 in the backend

Firstly, we need to enter the background management interface of Anqi CMS, and set up the custom fields required for the message form.

  1. Navigate to the message form management:Login to the back end, then find and click on the "Function ManagementThis is the centralized location for all settings related to website comments.
  2. Create or edit custom fields:On the "Website Comments
    • Parameter Name (Name)：This is the field name displayed on the back-end interface for administrators, such as "Your Title
    • Call Field (FieldName):This is the unique variable name used to identify this field in the front-end template, and it is also the key name for the data corresponding to the form submission. Please make sure to use lowercase English letters to ensure uniqueness, for examplehonorific/industry/inquiry_type.
    • Field Type (Type)：AnQi CMS provides various field types to meet different input requirements, including:
      • text(English text)：Used for short text input, such as name, phone number.
      • number(Numbers)：Only numeric input is allowed, such as quantity.
      • textarea(Multi-line text)：Used for long text input, such as detailed message content.
      • radio(Single choice)：Provides multiple options for users to select.
      • checkbox(Multiple choice)：provide multiple options for users to select.
      • select(Drop-down selection)：provide a drop-down menu for users to select.
    • Is it required (Required)：Tick this box, then this field becomes a required field in the front-end form.
    • Default value (Content):For single-line and multi-line text, you can set the placeholder text here.For radio, checkbox, and dropdown selection types, this is where the option content is defined.Each option should be entered on a separate line, and the system will automatically parse it as individual options.

Complete the field definition and save the settings. These custom fields are ready for the dynamic generation of the front-end form.

Second, dynamically display custom fields in the front-end template.

Define the backend fields first, and the next step is to dynamically obtain and render these fields in the front-end message form template file using the template tags of Anqi CMS.

  1. Find the comment form template:Typically, the comment form is located under the template directory.guestbook/index.htmlor in a file named similarly.

  2. UseguestbookLabel to get field:AnQi CMS provides a special function for retrieving the comment form fields.guestbookLabel. You can use it in the form of<body>to loop through all custom fields:

    <form method="post" action="/guestbook.html">
    {# 默认必填字段，您可能需要根据模板实际情况调整 #}
    <div>
        <label>您的姓名</label>
        <input type="text" name="user_name" required placeholder="请填写您的姓名">
    </div>
    <div>
        <label>联系方式</label>
        <input type="text" name="contact" required placeholder="请填写您的联系方式">
    </div>
    <div>
        <label>留言内容</label>
        <textarea name="content" required rows="5" placeholder="请填写您的留言内容"></textarea>
    </div>


    {# 动态加载后台自定义字段 #}
    {% 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="3"></textarea>
                {% elif item.Type == "radio" %}
                    {%- for val in item.Items %}
                    <label><input type="radio" name="{{ item.FieldName }}" value="{{ val }}" {% if item.Required %}required{% endif %}> {{ val }}</label>
                    {%- endfor %}
                {% elif item.Type == "checkbox" %}
                    {%- for val in item.Items %}
                    <label><input type="checkbox" name="{{ item.FieldName }}[]" value="{{ val }}" {% if item.Required %}required{% endif %}> {{ val }}</label>
                    {%- endfor %}
                {% elif item.Type == "select" %}
                <select name="{{ item.FieldName }}" {% if item.Required %}required{% endif %}>
                    <option value="">请选择</option>
                    {%- for val in item.Items %}
                    <option value="{{ val }}">{{ val }}</option>
                    {%- endfor %}
                </select>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    {% endguestbook %}


    <div>
        <button type="submit">提交留言</button>
        <button type="reset">重置</button>
    </div>
</form>

  3. Parse code example:

    • {% guestbook fields %}This tag will fetch all defined custom comment fields from the background and assign them as an array to a variablefields.
    • {% for item in fields %}We through:forto iteratefieldsEach field in the arrayitem.
    • {{ item.Name }}This shows the field name, which is set as the 'parameter name' in the background.
    • name="{{ item.FieldName }}"This is the most important attribute of the form element, its value is the 'called field' set by the backend, ensuring that the data submitted can be correctly associated with the backend fields. Note the multi-select checkboxcheckboxofnameneeds to be added[]such asname="{{ item.FieldName }}[]", so that the background can receive multiple values.
    • type="{{ item.Type }}": Set the front-end dynamically according to the field type defined by the backgroundinputTagstypeproperties.
    • {% if item.Required %}required{% endif %}: If the background is set as required, HTML5 will be added here.requiredProperty, the browser will perform basic non-empty validation.
    • placeholder="{{ item.Content }}": Use the default value defined on the backend as the placeholder text for the input box.
    • {% for val in item.Items %}: For radio, checkbox, and dropdown selection types,item.Itemsis an array containing all the option values, we can loop through it again to generateradio/checkboxoroption.

Through the above steps, you can flexibly receive and display the custom fields from the backend in the留言表单 form of the Anqi CMS front-end.This way, no matter how your business needs change, you can easily adjust the comment form to collect the required information, greatly enhancing the interactivity and data collection efficiency of the website.

Common Questions (FAQ)

1. Do I have to manually write the HTML code for each custom field in the template?

No, as demonstrated in the article, you can useguestbooktemplate tags andforLoop to dynamically iterate and generate HTML code for all custom fields.So, no matter how many fields you add or delete in the background, the frontend form will automatically update without the need to manually modify the template file, greatly improving maintenance efficiency.

2. How to get and display these options when the custom field is of selection type (single selection, multiple selection, dropdown)?

When you are in the background for selection type (radio/checkbox/selectThe field definition options should be entered one per line. In the front-end template, the object will contain aguestbookthe tags you getitemobject will contain aitem.ItemsProperty, it is an array containing all the option values. You can use it againforto iterateitem.Itemsto dynamically generate these options (<input type="radio">/<input type="checkbox">or<option>Tag).

3. How is the data of custom fields sent to the backend when submitting a form?

When the user submits a form with a custom field, the value of each custom field will be passed through its HTML element,nameproperty (i.e., the "field called" set in the backend)item.FieldNameThe data entered or selected by the user is sent to the backend as a key.The留言管理功能of安企CMS后台will automatically recognize these fields and store the data for your easy review and management.