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

As an experienced CMS website operator, I fully understand the importance of the online message function for user interaction and business development.A well-configured and easy-to-use message system not only improves user experience but also is an effective channel for collecting user feedback and mining potential customers.AnQi CMS provides flexible online message and custom message field functions, allowing the website to easily build an efficient user communication bridge according to its own needs.

Below, I will introduce how to configure the online message and custom message field features in AnQiCMS.

Enable and manage the online message function

In AnQiCMS, online留言 is a core feature module existing. Firstly, we need to find and enable it in the background management interface.

Log in to the AnQiCMS backend and navigate tofunction managementPart. Here, you will see an option named "Website Message Management".Click to enter and fully configure the website's message function.There is usually a master switch here that allows you to enable or disable the entire website's comment system.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.At the same time, AnQiCMS also supports message email reminders, which means that when new messages are submitted, the system can automatically send email notifications to the specified email address, ensuring that you can respond to user needs in a timely manner.

Configure the custom message field

The strength of AnQiCMS' comment 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". Click to enter, you will be able to:

• Add new fieldAdd a new information collection item to your comment form, such as "Company Name", "Product Interest", "Industry" etc.
• Edit existing fieldsModify the display name, type, or default value of existing fields.
• Define field properties:
  • Parameter name (display name)This is the name of the field displayed to the user on the front-end form, such as 'Your company name'.
  • Calling field (FieldName)This is an internal identifier used for template calls 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 inputs, such as names, phone numbers.
    • Number (number): Only numeric input is allowed.
    • Multiline text (textarea): Suitable for long text input, such as detailed message content.
    • Single choice (radio): Provide preset options, users can only choose one, such as gender.
    • Multiple choice (checkbox)Provide preset options for the user to select multiple choices, such as hobbies.
    • Dropdown selection (select)Provide a dropdown menu for the user to select one item, such as the region.
  • RequiredDetermine whether the user must fill in this field when submitting a message.
  • Default value (Content/Items): For single-choice, multiple-choice, and dropdown fields, you can set specific option values here. Each option takes up one line.For text or numeric types, you can set the prompt text here.

With these flexible settings, you can design a comment form that best suits your website needs.

Front-end template integration and display

The custom field needs to be displayed on the front page after it is configured in the background, through the front-end template tag.AnQiCMS uses Django template engine syntax to call data through specific tags.

The default online comment page is usually located/templateUnder the directoryguestbook/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 retrieve all the fields you configure in the background and provide them asfieldsvariables to the template for loop rendering.

This is a standard front-end template code example, demonstrating how to dynamically generate a message form, including common 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 the comment fields configured in the background and generate the corresponding HTML form elements according to their type.At the same time, I also added a captcha function 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 will process it. AnQiCMS will save these messages in the background and send email notifications according to your configuration.

To optimize the user experience, you can perform initial validation of the form on the front-end using JavaScript (such as checking required fields, formats, etc.), and provide clear feedback to the user after the submission is successful or failed.For example, you can pop up a prompt box to inform the user that 'The message has been successfully submitted, thank you for your valuable comments!'or "Message submission failed, please check your input.

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

Common questions

How to add a 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 AnQiCMS background global settings. At the same time, you need to follow the document in the template file of the front-end message form.tag-/anqiapi-other/167.htmlThe method provided, adds HTML elements and JavaScript code related to captcha, including a hiddencaptcha_idfield, onecaptchainput box and one used to display the captcha imageimgLabel, and bind a click event to refresh the captcha.

How to view and manage user submitted messages?

All user comments submitted through the front-end form will be collected and managed on the AnQiCMS backend.You just need to log in to the back end, navigate to the 'Function Management' menu under the 'Website Message Management' option.Here, you can browse all the comment lists, view comment details, and perform operations such as auditing, replying, deleting, or batch exporting comment data.

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

AnQiCMS'{% guestbook fields %}The label defaults to fetching all custom fields configured in the background "Website Message Management". If you need to display different message fields on different pages, a common method is to configure all possible fields in the background, and then use conditional judgments in the front-end template (such as{% if item.FieldName == 'specific_field_name' %}) To selectively render the fields required for a specific page. Alternatively, you can also consider creating multiple content models or single pages, and customizing special contact forms for each page, but this goes beyond the scope of the "Website Message Management" module and requires deeper template and backend content model customization.