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

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

Firstly, we need to add the required custom fields for the message function in the backstage management system of Anqi CMS.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
  2. Add custom fields:Here, you will see a "Add Field" or similar button. Click it to start defining a new field.
  3. Configure field properties:
    • Parameter name:This is the field name displayed on the backend for you to see, such as "Your industry", "Product type".
    • Calling Field (FieldName):This is the unique identifier that is referenced in the template, usually recommended to use letters, such asyourIndustry/productType.Remember this name carefully, it will be used in the template.
    • Field Type:English CMS provides various field types to meet different input requirements:
      • Single line text (text):Suitable for names, phone numbers, email addresses, and other brief information.
      • 数字 (number)：仅限输入数字，例如数量、预算。
      • 多行文本 (textarea)：Suits longer content, such as specific requirements, message details.
      • Single selection (radio):Users can only select one option, such as gender, agreement.
      • Multiple choice (checkbox)：Users can select multiple options, such as services of interest.
      • Drop-down selection (select)：The following dropdown menu allows users to select an option.
    • Mandatory:Check as needed. If checked, this field must be filled out by the user when submitting the form.
    • Default value:Provide a default value or prompt text for the field. For radio buttons, checkboxes, and dropdown selections, this is where you define the options, enter one option per line.

Complete field definition and save your settings. Now, these custom fields are ready for use in templates.

Step 2: Retrieve and render custom fields in the template

Next, we will modify the template file of the Anqi CMS, displaying these custom fields in the留言表单 form on the website front end. Typically, the message form is located under your template directory.guestbook/index.htmlfile.

The template used by Anqi CMS is based on a syntax similar to Django template engine. To get the custom fields of the message form, we need to use the built-inguestbookLabel.

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

  2. UseguestbookLabel to get field:In the form of<body>or use at an appropriate location,{% guestbook fields %}tags to retrieve all defined comment 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 explanation:

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