How to configure the online message and custom message field features of AnQiCMS?

As an experienced CMS website operation personnel for information security, I am well aware of the importance of the online message function for user interaction and business development.An well-configured and easy-to-use message system not only enhances user experience, but also is an effective channel for collecting user feedback and mining potential customers.AutoCMS provides flexible online message and custom message field functions, allowing websites to easily build an efficient user communication bridge according to their own needs.

Below, I will give a detailed introduction on how to configure the online message and custom message field features in AnQiCMS.

Enable and manage the online message feature

In AnQiCMS, online message is a core function module. First, we need to find and enable it in the background management interface.

Enter AnQiCMS backend, navigate toFunction ManagementPart.Here, you will see an option named “Website Message Management”.Click to enter and you can fully configure the website's message function.通常，这里会有一个总开关，允许您启用或禁用整个网站的留言系统。Ensure that this feature is enabled so that your visitors can submit messages.

In this management interface, you can also view all user-submitted messages and perform operations such as approval, reply, delete, or export, etc.At the same time, AnQiCMS also supports email reminder for messages, which means that when new messages are submitted, the system can automatically send an email notification to the specified email address, ensuring that you can respond to user needs in a timely manner.

Configure custom message field

The powerful feature of AnQiCMS'留言 function lies in its high customizability.In addition to standard fields such as user name, contact information, and message content, you can add any number of custom fields as needed to collect more specific and valuable information.

In the 'Website Message Management' interface, there is usually an entry for 'Custom Fields' or 'Form Fields' settings. Clicking into it, you will be able to:

• Add new fieldAdd a new information collection item to your message form, such as 'Company Name', 'Product Interest', 'Industry', etc.
• Edit existing fieldModify the display name, type, or default value of an existing field.
• Define field properties:
  • Parameter name (display name)'} ]This is the name displayed to the user in the front-end form, such as "Your company name."
  • Call Field (FieldName)This is an internal identifier used for template invocation and data storage. It is recommended to use lowercase English letters for accurate referencing in templates.
  • Field Type (Type)：AnQiCMS provides various field types to meet different data input requirements:
    • Single-line Text (text)：Suitable for short text input, such as names, phone numbers.
    • Number (number))：Only allows input of numbers.
    • Multi-line text (textarea)：适用于较长的文本输入，如详细的留言内容。
    • Single choice (radio)：提供预设选项，用户只能选择其中一项，如性别。
    • Multiple selection (checkbox))：提供预设选项，用户可以选择多项，如兴趣爱好。
    • Drop-down selection (select)：提供下拉菜单供用户选择其中一项，如所在地区。
  • Required：Decide whether the field must be filled in when the user submits a message.
  • Default value (Content/Items)For single-choice, multiple-choice, and dropdown selection fields, you can set specific option values here, with each option occupying a line.For text or numeric types, you can set the prompt text here.

Through these flexible configurations, you can design the most suitable message form for your website.

Front-end template integration and display

The custom field needs to be displayed correctly on the front page after the backend configuration is completed through the front-end template tags.AnQiCMS uses Django template engine syntax, calling data through specific tags.

The default online message page is usually located/templatethe directory.guestbook/index.htmlorguestbook.htmlFile. You can customize the display style and layout of the message form by editing these template files.

The core message form tags are{% guestbook fields %}This tag will get all the message fields you configure in the background and provide them as variables for template loop rendering.fieldsThe variable is provided for template loop rendering.

The following is a standard front-end template example, demonstrating how to dynamically generate a message form, including conventional user information fields:

<form method="post" action="/guestbook.html">
    {# 如果希望后端返回JSON格式而非HTML，可以添加此隐藏字段 #}
    <input type="hidden" name="return" value="html">

    {# 循环输出后台配置的自定义留言字段 #}
    {% guestbook fields %}
        {% for item in fields %}
        <div class="form-group">
            <label for="{{ item.FieldName }}">{{ item.Name }}{% if item.Required %}<span style="color: red;">*</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 }}" autocomplete="off" 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 %}
                    <label class="radio-inline">
                        <input type="{{ item.Type }}" name="{{ item.FieldName }}" value="{{ val }}" {% if forloop.Counter == 1 %}checked{% endif %}> {{ val }}
                    </label>
                    {%- endfor %}
                {% elif item.Type == "checkbox" %}
                    {%- for val in item.Items %}
                    <label class="checkbox-inline">
                        <input type="{{ item.Type }}" name="{{ item.FieldName }}[]" value="{{ val }}"> {{ val }}
                    </label>
                    {%- endfor %}
                {% elif item.Type == "select" %}
                <select name="{{ item.FieldName }}" id="{{ item.FieldName }}" class="form-control">
                    {%- for val in item.Items %}
                    <option value="{{ val }}">{{ val }}</option>
                    {%- endfor %}
                </select>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    {% endguestbook %}

    {# 添加验证码功能，提升安全性 #}
    <div class="form-group" style="display: flex; align-items: center;">
      <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: 120px; height: 40px; cursor: pointer; border: 1px solid #ccc;" alt="验证码" />
      <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>

    <div class="form-group">
        <button type="submit" class="btn btn-primary">提交留言</button>
        <button type="reset" class="btn btn-default">重置</button>
    </div>
</form>

This code will iterate over all message fields configured in the background and generate corresponding HTML form elements according to their type.At the same time, I also added a captcha feature to effectively prevent spam submissions.

Processing and optimization after submission

After the user submits a message, the data will be sent to/guestbook.htmlthis default interface for processing. AnQiCMS will save these messages in the background and notify you by email according to your configuration.

To optimize user experience, you can perform preliminary validation on the form using JavaScript on the front end (for example, checking required fields and formats), and provide clear feedback to the user upon successful or failed submission.For example, a prompt box can pop up to inform the user that 'The message has been successfully submitted, thank you for your valuable comments!'留言提交失败，请检查您的输入。

By following these steps, you can fully configure the online message and customized message field features in AnQiCMS, providing your website visitors with an efficient and friendly interactive platform.

Common Questions

How to add captcha to the comment form?

To enhance the security of the message function and prevent spam, you can enable the message verification code feature in the global settings of the AnQiCMS backend. At the same time, you need to follow the documentation in the template file of the frontend message form.tag-/anqiapi-other/167.htmlProvide the method, add HTML elements and JavaScript code related to captcha, including a hiddencaptcha_idfield, acaptchaInput box and a picture display area for the verification code.imgLabel, and bind click event to refresh the verification code.

How to view and manage user submitted messages?

All user comments submitted through the front-end form will be collected and managed centrally in the AnQiCMS backend.You just need to log in to the backend, navigate to the "Function Management" menu under the "Website Message Management" option.Here, you can browse all the message lists, view message details, and perform operations such as review, reply, delete, or batch export message data.

If I want to display different comment form fields on different pages of the website, does AnQiCMS support this?

AnQiCMS{% guestbook fields %}The label will automatically fetch all custom fields configured in the "Website Message Management" section on the backend. If you need to display different message fields on different pages, a common method is to configure all possible fields on the backend, and then use conditional judgments in the frontend template (such as{% if item.FieldName == 'specific_field_name' %}）Selectively render the fields required for rendering a specific page.Or, you can also consider creating multiple content models or single-page applications, and customizing a special contact form for each page, but this goes beyond the scope of the 'Website Message Management' module and requires deeper template and backend content model customization.