As a senior CMS website operation personnel, I fully understand the importance of interacting with users, and the message form is the core channel for collecting user feedback and understanding user needs.The Anqi CMS has fully considered the actual needs of enterprises and content operation teams from the beginning of its design, providing a simple yet powerful message management function, especially for custom fields, which allows us to flexibly obtain the required user information.

Overview of the Anqi CMS message form function

In today's digital environment, user interaction with websites is increasingly important.Whether consulting products, providing advice, or simply expressing gratitude, an easy-to-use and powerful feedback form is indispensable.The Anqi CMS recognizes this point, and is equipped with a comprehensive online message function, allowing 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 the Safe CMS an ideal tool for small and medium-sized enterprises, self-media operators to collect user feedback and conduct market research.

Core Function: Custom 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, we can conveniently add and manage custom fields of the message form.

When customizing fields, Safe CMS provides various field types to meet different data collection needs. We can choose single-line text (text）用于简短输入，例如用户的姓名或公司名称；数字类型（Englishnumber）适用于电话号码或数量统计；多行文本（Englishtextarea）is very suitable for long messages or detailed feedback. In addition, for scenarios where users need to make a selection, we can also set single-choice options (radio）、多项选择（Englishcheckbox）和下拉选择（Englishselect）field, by preset options, simplifies the user's filling process, and ensures the collection of structured data. These fields can also be set as required items to ensure the completeness of key information.

Front-end Template Integration: Create a留言表单

In AnQi CMS, integrating a留言表单 into the website front-end is very intuitive. We mainly useguestbookThis template tag is used to complete this task. This tag dynamically generates the corresponding form elements based on the custom fields we configure in the background.

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

The following is an example code snippet for a dynamically generated comment form.

<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, in the above code,form-group/form-control/btnThe CSS classes are illustrative, and you need to adjust them according to your template styles.action="/guestbook.html"This is 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 out and submits the form, the data will be sent through/guestbook.html

Enhance user experience: Integrate captcha

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

The steps to integrate captcha are divided into two parts: first, enable the captcha function for message comments in the 'Global Settings' -> 'Content Settings' of the security CMS background.Then, add the HTML and JavaScript code related to the captcha in the front-end form template.

Here is an example of 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 it also provides a click-to-refresh feature.The user needs to enter the characters displayed in the image to successfully submit the message, which greatly enhances the security of the form.

Summary

The AnQi CMS provides powerful form integration capabilities for 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 is aimed at helping us efficiently collect user feedback, thereby better understanding and meeting reader needs, and ultimately enhancing the website's user attraction and retention rate.

Common Questions and Answers (FAQ)

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

All user data submitted through the留言表单can be viewed and managed in the "功能管理" menu under the "网站留言管理" module in the 安企CMS backend.You can perform operations such as filtering, replying, exporting, and statistical analysis of data in different fields here.

Can multiple comment forms be placed on a single page?

Technically, you can call on a single page multiple timesguestbookLabel 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 form with a main purpose on a single page.If you need to collect different types of information, consider creating different pages and placing comment forms for specific purposes on each page.

How can I receive notifications when new comments are submitted?

The AutoCMS supports the message email reminder feature.You can configure the email server and receiving email in the related modules of 'Function Management' or 'Background Settings' on the backend. After enabling this feature, the system will automatically send an email notification to the specified email address whenever there is a new message submission, ensuring that you can handle user feedback in a timely manner.