AnQi CMS: Flexible Display and Field Customization of the Website Message Form

In website operation, the message form is an important bridge connecting users to the website.Whether it is to collect customer feedback, provide consulting services, or interact with users, a well-functioning and easy-to-use comment form is particularly important.AnQiCMS (AnQiCMS) is well-versed in this, providing users with a powerful and flexible message form function, which can be easily displayed on the front end of the website and supports in-depth customization of form fields to meet various business needs.

I. The Position and Importance of the Message Form in AnQi CMS

In the Anqi CMS backend management interface, you can find the 'Website Message Management' in the 'Function Management' module.Here you can not only view and manage all the messages submitted by users, but it is also the place to define and configure the core structure of the message form.

A well-designed feedback form can effectively reduce the threshold for users to fill in, improve user experience, and thus increase conversion rates.The Anqi CMS comment form feature is exactly to enable you to easily meet these challenges.

II. Dynamic Display of the Message Form:{% guestbook %}The application of tags

AnQi CMS provides a namedguestbookThe template tag allows you to integrate the message form into any page of the website at a low cost.The strength of this tag lies in its ability to dynamically read the form fields you configure in the background and automatically generate the corresponding HTML form elements.This means that when you adjust form fields in the background, the front-end page does not need to modify the code to update in real time.

To use this tag, simply insert the following code structure into the template file where you need to display the comment form:

<form method="post" action="/guestbook.html">
    {% guestbook fields %}
        {% for item in fields %}
            <div>
                <label>{{item.Name}}</label>
                <div>
                    {% if item.Type == "text" || item.Type == "number" %}
                        <input type="{{item.Type}}" name="{{item.FieldName}}" {% if item.Required %}required{% endif %} placeholder="{{item.Content}}" autocomplete="off">
                    {% elif item.Type == "textarea" %}
                        <textarea name="{{item.FieldName}}" {% if item.Required %}required{% endif %} placeholder="{{item.Content}}" rows="5"></textarea>
                    {% elif item.Type == "radio" %}
                        {%- for val in item.Items %}
                            <input type="{{item.Type}}" name="{{item.FieldName}}" value="{{val}}" title="{{val}}">
                        {%- endfor %}
                    {% elif item.Type == "checkbox" %}
                        {%- for val in item.Items %}
                            <input type="{{item.Type}}" name="{{item.FieldName}}[]" value="{{val}}" title="{{val}}">
                        {%- endfor %}
                    {% elif item.Type == "select" %}
                        <select name="{{item.FieldName}}">
                            {%- for val in item.Items %}
                                <option value="{{val}}">{{val}}</option>
                            {%- endfor %}
                        </select>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
    <div>
        <div>
            <button type="submit">提交留言</button>
            <button type="reset">重置</button>
        </div>
    </div>
</form>

This code passes{% guestbook fields %}The tag retrieves all the details of the form fields and passes them through{% for item in fields %}Loop through each field. Inside the loop, through{% if item.Type == "text" %}Such conditional judgment, based on the different types of fields (such as text input boxes, numbers, multi-line text, single selection, multiple selection, dropdown selection, etc.), generates the corresponding HTML form elements.This mechanism ensures the high customizability of the form, and the front-end code is concise and efficient.

Third, deeply customize the display of form fields

The AnQi CMS allows you to add and edit custom fields for the comment form in the backend, just like configuring content model fields.This greatly expands the application scenarios of the message form. Each custom field can be set to have a form name (Name）、“form variable”（FieldName）、“form type”（Type）as well as “is required”（Required）even properties, even for some types (such as radio, checkbox, dropdown) can define "default values" or "option lists" (Items)

After you define these custom fields in the background, the{% guestbook fields %}labels will automatically capture this information. In the code example above,itemThe variable represents the properties of each custom field configured in the background.

  • item.Name: It is used to display the field name to the user, such as 'Your Name', 'Phone Number', etc.
  • item.FieldNameThis is the field name submitted to the background, which is a unique identifier.
  • item.TypeThis determines the type of form element rendered on the front end, such astext(Single-line text),number(Number),textarea(Multi-line text),radio(Single selection),checkbox(Select multiple) orselect(Dropdown select).
  • item.Required: A boolean value indicating whether the field is required or not.
  • item.ContentThis can be an input box forplaceholdertext, or the default value of some fields.
  • item.ItemsWhen the field type isradio/checkboxorselectthen,ItemsIt will contain a list of all available options, nested{% for val in item.Items %}Loop it to display it.

This flexible field definition and dynamic rendering mechanism allows you to quickly build various complex feedback forms according to your actual needs, whether it is simple name and email collection, or advanced features such as multiple options and file upload (if integrated), all can be easily achieved.

Four, Form Submission and Security Considerations

The target address for message form submission is unified as/guestbook.htmlThe submission method isPOST. In addition to the fields you customize, it usually also requires submission of some core fields such asuser_name(Username of the post comment),contact(Contact information) andcontent(Content of the post comment). AnQi CMS can automatically handle these submitted data and store them in the background for easy review and management at any time.

To enhance the security of the message form, prevent malicious submissions and spam, AnQi CMS also supports integrated captcha functionality. After enabling the captcha settings in the background, you just need to add the corresponding captcha field and JS code (such astag-/anqiapi-other/167.htmlAs shown), it can add a layer of security to the comment form.

Summary

The AnQi CMS comment form feature, with its powerful flexibility and ease of use, provides a solid foundation for interaction between the website and users. Through{% guestbook %}Dynamic label rendering, combined with the powerful ability of background custom fields, you can easily build留言 forms that meet various business scenarios.At the same time, a well-designed backend management and security considerations also safeguard the operation of your website.

Frequently Asked Questions (FAQ)

Q1: Do I have to use{% guestbook %}Tag to display the message form?

Not required.{% guestbook %}The advantage of tags lies in their ability to dynamically generate forms and automatically match custom fields configured on the back-end, reducing the amount of manual coding work. It is particularly suitable for scenarios where fields often change or need to be deployed quickly. However, if you have very precise control over the HTML structure of the form or if the form fields are fixed and you do not want them to change automatically with the back-end configuration, you can also manually write them.<form>Tags and<input>/<textarea>elements, make surenamethe attribute name expected by the background (such asuser_name,contact,contentand your custom fieldsFieldName) are consistent and point to/guestbook.htmlsubmit it.

How to add file upload functionality to a comment form?

Currently, the embedded field types of the Anqi CMS message form (text, number, multi-line text, radio, checkbox, dropdown selection) do not directly include file upload type.If you need to implement a file upload feature, it usually requires some secondary development: this may involve custom form processing logic, integration of front-end file upload components (such as using Ajax to upload files to a specific interface), and submitting the returned file URL or identifier as a regular text field to a custom field in the comment form.Or, you can consider using other content models (if they support file fields) to implement similar functionality and guide users through page links.

How to prevent malicious submissions to a comment form (such as spam)?

SecureCMS provides some built-in security measures. First, you can enable captcha functionality for the message form in the background and integrate captcha display logic into the frontend template (refer to thetag-/anqiapi-other/167.html)。Next, for the comments submitted, the background usually has a review mechanism that can be manually reviewed before being displayed publicly.In addition, combining website firewalls, IP blacklist restrictions, and regular manual cleaning can also effectively reduce the interference of spam information.For more advanced protection, it may be necessary to implement through extending or integrating third-party anti-spam services.