How to integrate a feedback form on a website and retrieve custom fields entered by the user?

As a senior CMS website operation personnel of an enterprise, I am well aware of the importance of interacting with users, and the comment form is the core channel for collecting user feedback and understanding user needs.AnQi CMS took full consideration of the actual needs of enterprises and content operation teams from the beginning of its design, providing a simple yet powerful message management function, especially supporting custom fields, allowing us to flexibly obtain the required user information.

Anqi CMS Message Form Feature Overview

In today's digital environment, the interaction between users and websites is increasingly important.Whether it is to inquire about products, provide advice, or simply express gratitude, an easy-to-use and powerful feedback form is indispensable.AnQi CMS recognizes this point, built-in perfect online message function, and allows us to flexibly customize the fields of the message form according to specific business needs.This means we are no longer limited to the fixed set of 'name, email, message content', but can create truly personalized forms that align with business logic, thereby obtaining more valuable user data.This flexibility makes AnQi CMS an ideal tool for small and medium-sized enterprises, self-media operators to collect user feedback and conduct market research.

Core Function: Customize Message Field

The strength of AnQi CMS lies in its 'flexible content model' design concept.Although the document mainly mentions that the content model is used for articles and products, it also inherits this advantage in the comment feature.Through the "website message management" feature on the backend, we can conveniently add and manage custom fields of the message form.

When customizing fields, Anqi CMS provides various field types to meet different data collection needs. We can choose single-line text (text) used for short input, such as a user's name or company name; numeric type (number) is suitable for phone numbers or quantity statistics; multi-line text (textarea）It is very suitable for long comments or detailed feedback. In addition, for scenarios where users need to make choices, we can also set single-choice options （radio), multiple choice (checkbox）and dropdown selections （select) field, by setting predefined options, simplifies the user's filling process and ensures the collection of structured data. These fields can also be set as required to ensure the integrity of key information.

Front-end template integration: Create a message form

Integrating a message form into the website front-end in Anqi CMS is very intuitive. We mainly useguestbookTemplate tags to complete this task. This tag will dynamically generate the corresponding form elements based on the custom fields we configure in the background.

To render the message form on the front-end template, we first need to use{% guestbook fields %}tags to retrieve all the defined message fields.fieldsA variable is an array object containing all field information, we canforloop through it, and render different HTML input elementsTypebased on each field's properties.

This is an example of a dynamically generated message form code snippet:

<form method="post" action="/guestbook.html">
    {% guestbook fields %}
        {% for item in fields %}
        <div class="form-group"> {# 使用一个通用的CSS类来控制样式 #}
            <label for="{{item.FieldName}}">{{item.Name}}{% if item.Required %} *{% 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" autocomplete="off">
                {% 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" %}
                <div class="radio-group">
                    {%- for val in item.Items %}
                    <label>
                        <input type="{{item.Type}}" name="{{item.FieldName}}" value="{{val}}"
                               {% if loop.index == 1 %}checked{% endif %}> {# 默认选中第一个 #}
                        {{val}}
                    </label>
                    {%- endfor %}
                </div>
                {% elif item.Type == "checkbox" %}
                <div class="checkbox-group">
                    {%- for val in item.Items %}
                    <label>
                        <input type="{{item.Type}}" name="{{item.FieldName}}[]" value="{{val}}">
                        {{val}}
                    </label>
                    {%- endfor %}
                </div>
                {% elif item.Type == "select" %}
                <select id="{{item.FieldName}}" name="{{item.FieldName}}" class="form-control">
                    {%- for val in item.Items %}
                    <option value="{{val}}">{{val}}</option>
                    {%- endfor %}
                </select>
                {% endif %}
            </div>
        </div>
        {% endfor %}

        {# 额外的固定字段，如用户名、联系方式、留言内容，如果后台没有作为自定义字段添加，可在此处固定添加 #}
        <div class="form-group">
            <label for="user_name">您的姓名 *</label>
            <input type="text" id="user_name" name="user_name" required placeholder="请填写您的姓名" class="form-control" autocomplete="off">
        </div>
        <div class="form-group">
            <label for="contact">联系方式 *</label>
            <input type="text" id="contact" name="contact" required placeholder="请填写您的手机或邮箱" class="form-control" autocomplete="off">
        </div>
        <div class="form-group">
            <label for="content">留言内容 *</label>
            <textarea id="content" name="content" required placeholder="请留下您宝贵的留言" rows="5" class="form-control"></textarea>
        </div>

        <div class="form-group form-actions">
            <button type="submit" class="btn btn-primary">提交留言</button>
            <button type="reset" class="btn btn-secondary">重置</button>
        </div>
        <input type="hidden" name="return" value="html"> {# 可选，指定返回格式 #}
    {% endguestbook %}
</form>

Please note the code in the aboveform-group/form-control/btnThe CSS classes are illustrative, you need to adjust them according to your template style.action="/guestbook.html"The default submission address for the message form, all data will be sent here via POST request.

Form submission and data processing

After the user fills in and submits the form, the data will be transmitted via/guestbook.htmlThe path is sent to the AnQi CMS backend. The "Website Message Management" feature automatically receives and stores this submitted data, including all custom fields.The operations staff can log in to the backend at any time to view, filter, and export these messages, making it convenient for data analysis and user management.For messages that need to be followed up in real time, AnQi CMS also supports message email reminder features to ensure that the operation team can respond to user feedback in the first time.

Improve user experience: integrate captcha

To prevent spam and malicious submissions, integrating captcha is a common security measure for comment forms.AnQi CMS provides a convenient captcha integration solution, which can effectively protect the cleanliness of the comment system.

The steps to integrate the captcha are divided into two parts: first, enable the captcha function for comment留言 in the "Global Settings" -> "Content Settings" of the Anqi CMS background.Next, add HTML and JavaScript code related to the captcha in the front-end comment form template.

This is an example of the captcha integration code, which is usually placed before the submit button:

<div class="form-group captcha-group" style="display: flex; align-items: center; margin-top: 15px;">
  <input type="hidden" name="captcha_id" id="captcha_id">
  <input type="text" name="captcha" required placeholder="请填写验证码" class="form-control" style="flex: 1; margin-right: 10px;">
  <img src="" id="get-captcha" style="width: 150px; height: 40px; cursor: pointer; border: 1px solid #ccc; vertical-align: middle;" alt="点击刷新验证码" title="点击刷新验证码"/>
  <script>
    document.getElementById('get-captcha').addEventListener("click", function (e) {
      fetch('/api/captcha')
              .then(response => response.json())
              .then(res => {
                document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id);
                document.getElementById('get-captcha').setAttribute("src", res.data.captcha);
              })
              .catch(err => console.error('获取验证码失败:', err));
    });
    // 页面加载时自动获取一次验证码
    document.getElementById('get-captcha').click();
  </script>
</div>

This JavaScript code will automatically request and display the captcha image when the page is loaded, and also provide a refresh button.Users need to enter the characters displayed in the image to successfully submit a comment, which greatly enhances the security of the form.

Summary

Aiqi CMS offers powerful form integration capabilities to website operators through its flexible custom fields and convenient template tags.From defining diverse field types to dynamically generating front-end forms, to integrating captcha for security, the entire process aims to help us efficiently collect user feedback, better understand and meet reader needs, and ultimately enhance the website's user attraction and retention rate.

Frequently Asked Questions (FAQ)

Where can I view and manage the user submitted comment data?

All user data submitted through the comment form can be viewed and managed in the "Function Management" menu under the "Website Comment Management" module in the Anqi CMS backend.You can filter, reply, export, and perform data analysis on different fields here.

Can I place multiple comment forms on a single page?

Technically, you can call multiple times on a single pageguestbookTags to display multiple forms. However, in actual operation, in order to avoid user confusion and ensure the clarity of data collection, it is usually recommended to place only one main purpose comment form on a page.If you need to collect different types of information, consider creating different pages and placing feedback forms for specific purposes on each page.

How can I receive notifications when new comments are submitted?

The AnQi CMS supports the留言email reminder feature. You can configure the email server and recipient email in the "Function Management" or "Background Settings" related modules on the back end. After enabling this feature, the system will automatically send an email notification to the specified email address whenever a new message is submitted, ensuring that you can handle user feedback in a timely manner.