How to synchronize the newly added custom message field in the AnQiCMS backend to the frontend message form?

Certainly, as an experienced website operation expert, I am very willing to give you a detailed explanation of how to seamlessly synchronize the custom message field in AnQiCMS with the front-end message form.AnQi CMS, with its flexible and efficient design concept, indeed provides many considerate features in content management, and the customized message field is one of the highlights, which can help us collect user feedback information more accurately.

AnQi CMS: Allow custom message fields to seamlessly integrate into the front-end form and achieve seamless interaction!

In daily website operations, we often need to collect specific information from users in addition to their names, contact information, and message content.It may be the industry type of the user, the products they are interested in, or even the time period they want to revisit.AnQi CMS understands the importance of this personalized need, therefore it has built a powerful custom message field feature, allowing you to flexibly configure it in the background and naturally present it in the front-end form.

How does the newly added custom message field in the background 'magically' synchronize with our website's message form and interact with users?This is actually a process with clever design and clear logic.

Step 1: Create your custom message field in the background.

First, everything starts at the AnQiCMS backend management interface. You will find that underfunction managementthere is awebsite messageoption. Click on it and you can findCustom message fieldSetting entry.

Here, you can add various types of fields according to business needs.For example, if you want to understand the industry of the user, you can create a field called "Industry Type"; if you want to provide several preset options for users to choose from, such as "Product Consultation", "Technical Support", "Business Negotiation", then single-choice or multiple-choice fields come into play.The Anqi CMS supports a variety of field types including single-line text, numbers, multi-line text, single selection, multiple selection, and drop-down selection, etc., and can almost meet all common form requirements.

There are two key points to pay special attention to when creating:

• Parameter name (Name)This is the field name you see in the background, used for management and identification.
• Field call (FieldName)This is the real 'behind-the-scenes hero', the unique identifier stored in the database and called in the front-end template. Make sure it is named according to standards and easy to understand, as it will be the corresponding input box in the front-end form.nameProperty value.

Set the field name, call the field, choose the appropriate field type, define the default value or options (if needed), and then check whether it is required according to the actual situation.After saving, this information about custom fields is silently stored inside AnQiCMS.

Step two: The 'Magician' in the front-end template——“guestbookTag

Next, we need to make these backend-configured field information appear on the front page.This is where our front-end template file comes in.guestbook/index.htmlthe file.

In this template file, Anqi CMS provides a very core and convenient tag——“{% guestbook fields %}. It is like a magician, able to encapsulate all the field information you configure in the background, into a collection namedfields, and pass it to the frontend template.

You need to use this tag in your form structure to retrieve field data.fieldsVariables essentially are an array (Slice) that contains all custom field information, with each array element representing a custom field you have created in the background.

Step 3: Dynamically render custom fields, build a form

Get itfieldsAfter this data set, the next step is to traverse it through a loop to dynamically generate front-end form elements. The Anqi CMS template engine (based on the Iris framework in Go language, supporting Django template syntax) provides powerfulforLoop and conditional judgment functions make this process extremely flexible.

Generally, we would use a{% for item in fields %}to loop throughfieldsarray. Inside the loop, eachitemRepresents a custom field, it will contain the fieldName(Display name),FieldName(Field name),Type(Field type),Required(Is required) as wellContent(Default value or placeholder) andItems(Option list, for single-choice, multiple-choice, dropdown selection).

By judgmentitem.TypeThe value, we can generate different types of HTML form elements:

<form method="post" action="/guestbook.html">
    <!-- 基础字段，例如用户名、联系方式、留言内容，如果后台有对应设置，也可在此循环中生成 -->
    <div>
        <label for="user_name">您的姓名</label>
        <input type="text" id="user_name" name="user_name" required placeholder="请填写您的姓名">
    </div>
    <div>
        <label for="contact">联系方式</label>
        <input type="text" id="contact" name="contact" required placeholder="手机/邮箱/微信/QQ">
    </div>

    <!-- 动态生成的自定义字段区域 -->
    {% guestbook fields %}
        {% for item in fields %}
            <div>
                <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 }}" autocomplete="off">
                    {% elif item.Type == "textarea" %}
                        <textarea id="{{ item.FieldName }}" name="{{ item.FieldName }}" {% if item.Required %}required{% endif %} placeholder="{{ item.Content }}" rows="5"></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 }}"> {{ val }}</label>
                        {%- endfor %}
                    {% elif item.Type == "select" %}
                        <select id="{{ item.FieldName }}" name="{{ item.FieldName }}" {% if item.Required %}required{% endif %}>
                            {%- for val in item.Items %}
                                <option value="{{ val }}">{{ val }}</option>
                            {%- endfor %}
                        </select>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    {% endguestbook %}

    <!-- 验证码（如果启用） -->
    {% include "partial/captcha_guestbook.html" if_exists %} {# 假设验证码是一个单独引入的片段 #}

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

The key point is:

• name="{{ item.FieldName }}"This is the core to synchronize front-end and back-end. The properties of front-end form elements must match thenameattributes set by the back-end.Calling field (FieldName)Absolutely consistent, so that the background can correctly identify and receive the value of this field.
• id="{{ item.FieldName }}": Although it is not mandatory, but to set a uniqueidContributes to front-end JS operations and improves accessibility.
• {% if item.Required %}required{% endif %}: Automatically adds the required HTML5 attributes based on backend settings.
• For multiple choice items(checkbox),namethe attribute needs to be added[]For examplename="{{ item.FieldName }}[]"So that the backend can receive an array of values.

Through such a dynamic rendering mechanism, regardless of how many custom message fields you add, modify, or delete in the background, the front-end form will automatically update accordingly, without the need to manually modify the front-end code, greatly improving operational efficiency.

Step 4: Ensure that the form data is successfully submitted

When the user