In Anqi CMS, adding and managing custom fields for the website's message form can not only help us collect more specific and targeted customer information, but also significantly improve the interactivity and data collection efficiency of the website.AnQi CMS, with its flexible content model and easy expandability, makes this process very convenient.

This article will guide you on how to obtain and display custom fields in the Anqi CMS template and ensure that these fields are correctly submitted.

Step 1: Define the custom message field in the Anqi CMS backend

Firstly, we need to add the required custom fields for the message function in the Anqi CMS backend management system.This is like designing questions for your form to ensure you can collect the information you want.

  1. Enter the website message management:Log in to the AnQi CMS backend, navigate to the "Function Management" menu, and then click "Website Message Management."}
  2. Add custom field:Here, you will see a button labeled 'Add Field' or similar. Click it to start defining new fields.
  3. Configure field properties:
    • Parameter name:This is the field name displayed on the back end, for example 'Your industry', 'Product type'.
    • Field Name (FieldName):This is the unique identifier for the field referenced in the template, it is usually recommended to use letters, such asyourIndustry/productType.Be sure to remember this name, it will be used in the template.
    • Field type:The Anqi CMS provides various field types to meet different input requirements:
      • Single-line text (text):Suitable for brief information such as names, phone numbers, and email addresses.
      • Number (number):Enter only numbers, such as quantity, budget.
      • Multiline text (textarea):Suitable for longer content, such as specific requirements, message details.
      • Single choice (radio):Users can only select one option, such as gender, agree to the agreement.
      • Multiple choice (checkbox):Users can select multiple options, such as services of interest.
      • Drop-down selection (select):Select an option from the dropdown menu.
    • Mandatory?:Tick as required; if ticked, this field must be filled out when submitting the form.
    • Default:Provide a default value or placeholder text for the field. This is where you define the options for radio buttons, checkboxes, and dropdowns, one per line.

After defining the field, save your settings. Now, these custom fields are ready for use in the template.

Step two: Retrieve and render the custom fields in the template.

Next, we will modify the Anqi CMS template file, displaying these custom fields in the website's front-end message form. Usually, the message form is located in your template directory.guestbook/index.htmlfile.

The template used by Anqi CMS is similar to the Django template engine syntax. To get the custom fields of the comment form, we need to use the built-inguestbook.

  1. Find the comment form template file:In your template directory, find the HTML file used to display the comment form (for example:)template/您的模板名/guestbook/index.html)

  2. UseguestbookLabel field acquisition:within the form's<body>or at the appropriate location, use{% guestbook fields %}tags to retrieve all the defined message fields.fieldsThe variable will be an array object containing all field information.

    <form method="post" action="/guestbook.html">
    {# 这里将用于展示默认的留言字段和您自定义的字段 #}
    {% guestbook fields %}
        {% for item in fields %}
        <div class="form-group">
            <label for="{{ item.FieldName }}">{{ item.Name }}{% if item.Required %} <span class="text-danger">*</span>{% endif %}</label>
            <div>
                {% if item.Type == "text" or item.Type == "number" %}
                <input type="{{ item.Type }}" name="{{ item.FieldName }}" id="{{ item.FieldName }}"
                       {% if item.Required %}required{% endif %}
                       placeholder="{{ item.Content }}" class="form-control">
                {% elif item.Type == "textarea" %}
                <textarea name="{{ item.FieldName }}" id="{{ 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 %}
                    <input type="radio" name="{{ item.FieldName }}" value="{{ val }}" id="{{ item.FieldName }}-{{ loop.index }}"
                           {% if item.Required %}required{% endif %} class="form-check-input">
                    <label for="{{ item.FieldName }}-{{ loop.index }}" class="form-check-label">{{ val }}</label>
                    {%- endfor %}
                {% elif item.Type == "checkbox" %}
                    {%- for val in item.Items %}
                    <input type="checkbox" name="{{ item.FieldName }}[]" value="{{ val }}" id="{{ item.FieldName }}-{{ loop.index }}"
                           {% if item.Required %}required{% endif %} class="form-check-input">
                    <label for="{{ item.FieldName }}-{{ loop.index }}" class="form-check-label">{{ val }}</label>
                    {%- endfor %}
                {% elif item.Type == "select" %}
                <select name="{{ item.FieldName }}" id="{{ item.FieldName }}"
                        {% if item.Required %}required{% endif %} class="form-control">
                    {%- for val in item.Items %}
                    <option value="{{ val }}">{{ val }}</option>
                    {%- endfor %}
                </select>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    {% endguestbook %}

    {# 假设您还会有一些固定的留言字段，例如联系方式和留言内容 #}
    <div class="form-group">
        <label for="user_name">您的称呼 <span class="text-danger">*</span></label>
        <input type="text" name="user_name" id="user_name" required placeholder="请填写您的称呼" class="form-control">
    </div>
    <div class="form-group">
        <label for="contact">联系方式 <span class="text-danger">*</span></label>
        <input type="text" name="contact" id="contact" required placeholder="手机号/邮箱/微信" class="form-control">
    </div>
    <div class="form-group">
        <label for="content">留言内容 <span class="text-danger">*</span></label>
        <textarea name="content" id="content" required placeholder="请输入您的留言内容" rows="6" class="form-control"></textarea>
    </div>

    {# 提交按钮 #}
    <div class="form-group">
        <button type="submit" class="btn btn-primary">提交留言</button>
        <button type="reset" class="btn btn-secondary">重置</button>
    </div>
</form>

    Code description:

    • {% guestbook fields %}It will take all custom fields set in the background asfieldsan array to provide to the template. *