On website operation, the message form is an important channel for user interaction, collecting feedback and leads.AnQiCMS provides a flexible message function, one very practical feature of which is to allow us to customize form fields in the background and seamlessly present them in the front-end message form to meet the needs of personalized information collection in different business scenarios.

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

1. Define custom留言fields in the back-end

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

  1. Navigate to the message form management:After logging in to the backend, please find and click on the "Function Management" in the left menu, and then select "Website Message" in the dropdown menu.This is the centralized location for all settings related to website comments.
  2. Create or edit custom fields:On the "website message" page, you will see an area named "custom message field". Click to enter and you can add new fields or edit existing fields.
    • Parameter name (Name):This is the field name displayed in the background interface for administrators, for example, "Your title," "Industry," "Consultation type," etc., it is recommended to use intuitive Chinese descriptions.
    • Field Name (FieldName):This is the unique variable name used to identify this field in the front-end template, and it is also the key name corresponding to the data submitted in the form. Please make sure to use English lowercase letters and ensure its uniqueness, for examplehonorific/industry/inquiry_type.
    • Field Type (Type):AnQi CMS provides various field types to meet different input requirements, including:
      • text(Single-line text): Used for short text input, such as name, phone number.
      • number(Number): Only numbers are allowed, such as quantity.
      • textarea(Multiline text): Used for long text input, such as detailed message content.
      • radio(Single selection): Provide multiple options for users to select.
      • checkbox(Multiple choice): Provide multiple options for user selection.
      • select(Dropdown selection): Provide a dropdown menu for user selection.
    • (Required):Check this box to make this field required in the front-end form.
    • Default value (Content):For single-line text and multi-line text, you can set the placeholder here.For single-choice, multiple-choice, and dropdown selection types, this is the key content defining the options.Each option should be entered on a separate line, and the system will automatically parse it as a separate option.

After defining the field, save the settings. These custom fields are ready for the dynamic generation of the front-end form.

II. Dynamically display custom fields in the front-end template.

After defining the background fields, the next step is to use the Anqi CMS template tags in the front-end message form template file to dynamically retrieve and render these fields.

  1. Find the comment form template:通常，留言表单位于模板目录下的guestbook/index.htmlor in a file with a similar name.

  2. UseguestbookLabel field acquisition:Anqi CMS provides a special field for obtaining the comment form.guestbookLabel. You can use it in the form of<body>to iterate over 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 retrieve all the custom message fields defined in the background and assign them as an array to a variablefields.
    • {% for item in fields %}: We go throughforLoop throughfieldsEach field in the arrayitem.
    • {{ item.Name }}: Displays 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 'call field' set by the background, ensuring that the data can be correctly associated with the background fields when submitted. Note the checkboxcheckboxofnameNeed to add[]such asname="{{ item.FieldName }}[]"In order to receive multiple values by the backend.
    • type="{{ item.Type }}": The front-end is dynamically set according to the field type defined by the backend.inputlabel'stypeProperty.
    • {% if item.Required %}required{% endif %}: If the backend is set as required, HTML5 will be added here.requiredProperty, the browser will perform basic non-empty validation.
    • placeholder="{{ item.Content }}": Set 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/checkboxoroptionelements.

By following these steps, you can achieve the flexibility of receiving and displaying custom fields from the backend in the Anqi CMS frontend comment form.In 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.

Frequently Asked 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 traverse and generate HTML code for all custom fields.This way, no matter how many fields you add or delete in the background, the front-end form will automatically update without manually modifying the template file, greatly improving maintenance efficiency.

2. How does the front-end obtain and display options for custom fields that are selection types (single-choice, multiple-choice, dropdown)?

When you are in the back-end for selection types (radio/checkbox/selectWhen defining field options, each option should be entered on a separate line. In the frontend template, through theguestbookTags retrieved from comments.itemThe object will include aitem.Itemsproperty, it is an array containing all the option values. You can use it againforLoop throughitem.ItemsGenerate these options dynamically(<input type="radio">/<input type="checkbox">or<option>tags).

How is the data of custom fields sent to the backend when the form is submitted?

When the user submits a form with custom fields, the value of each custom field will be transmitted through its HTML element,nameproperty (i.e., the 'calling field' set in the backgrounditem.FieldName) as the key, send the user input or selected data to the background.The Anqi CMS backend's message management feature will automatically identify these fields and store the data for easy viewing and management.