How to build and display an online comment form and its custom fields in Anqi CMS?

A strong and flexible online message function is provided by AnQi CMS, which not only allows you to build a basic contact form, but also can customize various fields according to business needs, thereby collecting more accurate user feedback.Below, we will explore how to easily build and display these comment forms in Anqi CMS.

One, configure the message form and custom fields in the Anqi CMS background

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

1. Access the message management module:After logging in to the backend, please navigate to the "Function Management" area in the left menu, then click "Website Messages". This is the central location for all message-related settings.
2. The default field and custom field:Anqi CMS will provide some core fields for the comment form, such as user name(user_name）、Contact Information（contact) and message content (content)。Except for this basic information, you can add an unlimited number of custom fields according to your actual business needs.
   • Add custom field:On the "Website Feedback" page, you will find the option to add a new field. Click to enter and configure the following key information:
     • Field Name:This is the field label displayed to the user on the front-end interface, for example, 'Your industry', 'Select service type', etc. Please ensure it is clear and understandable.
     • Field Name (FieldName):This is the unique identifier for the field referenced in the template code. It is recommended to use a combination of lowercase letters and underscores, such asyour_industry. Once set, it is not recommended to change it arbitrarily, as it will affect the calling of the front-end template.
     • Field type:AnQi CMS provides various field types to meet the collection needs of different data, including:
       • Single-line text (text):Suitable for short text input, such as names, company names.
       • Number (number):Only numeric 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 selection (checkbox):Users can select multiple preset options.
       • Dropdown selection (select):Users can select an option from a dropdown menu.
     • Mandatory?:Check this box, then this field must be filled in when submitted on the front end.
     • Default/Option Value:For text, number, and multiline text types, you can set a default prompt value here.For radio, checkbox, and dropdown selection types, here you need to enter all the available options, each on a new line.

In this way, you can build a highly customized feedback form, whether it is to collect the industry of the user, specific needs, or preferred contact time, it can be easily realized.

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

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

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

2. UseguestbookLabel field acquisition:In the selected template file, you can use the security CMS providedguestbookThe tag to get all the background configuration fields of 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"Indicates the backend processing address for form submission.

3. Loop rendering form fields: fieldsThe 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