Auto CMS provides a powerful and flexible online message feature that allows you to build basic contact forms and also enables deep customization of various fields according to business needs, thereby collecting more accurate user feedback.Below, we will explore together how to easily build and display these comment forms in the AnQi CMS.

一、In the Anqi CMS backend, configure the message form and custom fields

To start building your online message form, you first need to enter the Anqi CMS backend management interface.

  1. Access the message management module:After logging into the background, please navigate to the 'Function Management' area on the left menu, and then click 'Website Messages'. This is the central location for all message-related settings.
  2. Default field and custom field:Anqi CMS will provide some core fields for the message form, such as user name (user_name)、contact information (contact) and message content (content）。Besides these basic information, you can add an unlimited number of custom fields according to your actual business needs.
    • Add custom fields:On the "Website Feedback" page, you will find the option to add a new field. After clicking to enter, you need to configure the following key information:
      • Field Name:This is the field label that the user sees on the front-end interface, for example, “Your Industry”, “Select Service Type”, etc. Please ensure that it is clear and understandable.
      • Calling Field (FieldName):This is the unique identifier for the field referenced in the template code. It is recommended to use a combination of English lowercase letters and underscores, such asyour_industryOnce set, it is not recommended to change it arbitrarily, as it will affect the call of the front-end template.
      • Field Type:AnQi CMS provides various field types to meet different data collection needs, including:
        • Single-line text (text):Suitable for short text input, such as name, company name.
        • Number (number):Only number input is allowed, such as age, budget amount.
        • Multi-line text (textarea):Suitable for long text input, such as detailed descriptions, suggestions.
        • Single choice (radio):Users can only select one from the preset options.
        • Multiple choice (checkbox):Users can select multiple preset options.
        • Dropdown selection (select):Users can select an option from a dropdown menu.
      • Mandatory:Tick this box, and this field must be filled in when submitted on the front end.
      • Default value/Option value: For text, number, and multi-line text types, you can set a default prompt value here.For single-choice, multiple-choice, and dropdown selection types, all available options need to be entered here, with each option on a separate line.

Through this method, you can easily create highly customized comment forms, whether it is to collect the user's industry, specific needs, or preferred contact time.

English, in the front-end template, display the message form

After the background configuration is completed, the next step is to present the carefully designed comment form on the front end of your website.The Anqi CMS adopts a flexible template tag system, making this process simple.

  1. Select an appropriate template file:Your online message form is usually placed on a dedicated page. According to the template conventions of Anqi CMS, the default online message page file isguestbook/index.htmlYou can also choose to embed it into other single-page (such as "Contact Us") or any page that requires a form.

  2. UseguestbookLabel to get field:In the selected template file, you can use the CMS provided by AnqiguestbookThis tag retrieves all the fields of the backend configuration of the comments. This tag will pass all the fields as an array object to you.

    <form method="post" action="/guestbook.html" id="guestbookForm">
    {% guestbook fields %}
        {# 在这里循环输出每个字段 #}
    {% endguestbook %}


    {# 留言提交按钮 #}
    <div>
        <button type="submit">提交留言</button>
        <button type="reset">重置</button>
    </div>
</form>

    action="/guestbook.html"Specifies the backend handling address for form submission.

  3. Loop rendering form fields: fieldsA variable is an array that contains information about each field you configure in the background. You can useforLoop through this array and dynamically generate the corresponding HTML form elements based on the type of each field.

    `twig

    {% 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 }}" id="{{ item.FieldName }}" name="{{ item.FieldName }}" {% if item.Required %}required{% endif %} placeholder="{{ item.Content }}" class="form-control">
            {% elif item.Type == "textarea" %}
            <textarea id="{{ item.FieldName }}" name="{{ 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" id="{{ item.FieldName }}_{{ forloop.Counter }}" name="{{ item.FieldName }}" value="{{ val }}" {% if item.Required and forloop.Counter == 1 %}required{% endif %}>
                <label for="{{ item.FieldName }}_{{ forloop.Counter }}">{{ val }}</label>
                {% endfor %}
            {% elif item.Type == "checkbox" %}
                {% for val in item.Items %}
                <input type="checkbox" id="{{ item.FieldName }}_{{ forloop.Counter }}" name="{{ item.FieldName }}[]" value="{{ val }}" {% if item.Required and forloop.Counter == 1 %}required{% endif %}>
                <label for="{{ item.FieldName }}_{{ forloop.Counter }}">{{ val }}</label>
                {% endfor %}
            {% elif item.Type == "select" %}
            <select id="{{ item.FieldName }}" name="{{ 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 %}


    {# 集成验证码，增强安全性 #}
    <div class="form-group captcha-group">
        <label for="captcha">验证码 <span class="text-danger">*</span></label>
        <div class="d-flex">
            <input type="hidden" name="captcha_id" id="captcha_id">
            <input type="text" name="captcha" required placeholder="请填写验证码" class="form-control captcha-input">
            <img src="" id="get-captcha" class="captcha-img" alt="验证码">
        </div>
        <script>
            document.getElementById('get-captcha').addEventListener("click", function () {
              fetch('/api/captcha')
                      .then(response => response.json())
                      .then(res => {
                        document.getElementById('captcha_id').value = res.data.captcha_id