How to display the comment form and submit comments in Anqi CMS?

It is crucial to establish effective communication channels with visitors in website operation, and the message function is one of the key tools to achieve this goal.It can not only help websites collect user feedback and answer questions, but also promote user participation and enhance the interactivity and stickiness of the website.For users using AnQiCMS, the system's built-in message feature provides a convenient and flexible solution, allowing you to easily display and submit message forms without writing complex code.

AnQi CMS message function overview

The Anqi CMS's message function is designed to be very user-friendly, allowing you to customize the fields of the message form in the background, including text, numbers, multi-line text, radio buttons, checkboxes, dropdown selections, and more types to meet the needs of different business scenarios.The system also supports captcha functionality, effectively preventing spam, and provides a comprehensive backend message management system for easy viewing, replying, and exporting user messages.

Part 1: How to display the message form on the website front-end

To display the message form on your Anqi CMS website, you first need to understand its template structure. Anqi CMS usually names the template file for the online message page asguestbook/index.htmlorguestbook.htmlThese files are located in the template theme folder you are currently using.

In these template files, you will find a file namedguestbookThe tag is a powerful tool provided by Anqi CMS, which can dynamically obtain all the message fields configured on the backend and pass them to the frontend template.Its basic usage is:{% guestbook fields %}...{% endguestbook %}.

Herefieldsis an array object that contains all the detailed information of each field you define in the background for the message form. EachitemInfieldsthe array has the following important properties:

• item.NameThis is the field name displayed on the front end, such as "Your name", "Contact information".
• item.FieldNameThis is the field corresponding to thenameattribute value, which is the key for backend field identification.
• item.TypeIndicates the type of the field, for exampletext(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.
• item.Content: The default value or placeholder text for the field.
• item.Items: If the field type isradio/checkboxorselectThis property will contain an array, listing all options.

Using this information, you can write aforLoop to dynamically generate a message form, thereby avoiding manual modification of the front-end code each time the fields are adjusted in the background. A typical dynamic form generation code snippet might look something like this:

<form method="post" action="/guestbook.html">
{% guestbook fields %}
    {% for item in fields %}
    <div>
        <label>{{item.Name}}</label>
        <div>
            {% if item.Type == "text" or 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}}"> {{val}}
            {%- endfor %}
            {% elif item.Type == "checkbox" %}
            {%- for val in item.Items %}
            <input type="{{item.Type}}" name="{{item.FieldName}}[]" value="{{val}}" title="{{val}}"> {{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>
            <button type="submit">提交留言</button>
            <button type="reset">重置</button>
        </div>
    </div>
</form>

Of course, if you prefer to fully customize the HTML structure and style of the form, it is also possible. In this case, you just need to make sure that each form element'snameThe properties are defined in the backgroundFieldNameMaintain consistency. Anqi CMS will collect and process message data based on thesenameProperties. For example, the system will preset some core fields such asuser_name(Name of the person leaving a message),contact(Contact information) andcontent(留言内容)，even if you do not explicitly define them in the background, you can use them directly on the front endnameproperties to build the form

Part two: how to submit comments

When the user fills out the message form and clicks submit, the form data needs to be sent to the Anqi CMS backend for processing. The submission of messages isactionfixed as/guestbook.html, and is usually usedPOSTMethod.

In addition to the aforementioneduser_name/contactandcontentcore fields, if you have customized other comment fields in the background, then thenameproperties of these fields also need to match the background definitionFieldNameMaintain consistency so that the backend can correctly receive and store data.

In addition, you can also control the response format returned by the backend by adding a hiddeninputfield:

<input type="hidden" name="return" value="html">

tovalueis set tohtmlIt will make the server return a complete HTML page as a response (usually a success or failure prompt page), while set tojsonIt will return a JSON formatted data, which is very useful when you need to submit a form asynchronously through AJAX.

The third part: Enhancing comment security - Adding captcha

It is very necessary to add a captcha function to the message form to prevent malicious submissions and spam comments.The Anqi CMS is built-in with captcha support, and the enabling process is divided into two steps: backend configuration and frontend integration.

1. Enable captcha on the backend:You need to find and enable the留言验证码function in the Anqi CMS backend management interface. This is usually configured in the "Background Settings" or "Feature Management" related menus.

2. Front-end integrated captcha:In the template file of the message form, you need to add the following HTML elements and JavaScript code:

• A hiddeninputField used to store the unique identifier for the verification code (captcha_id)
• A textinputField used for user input of the verification code (captcha)
• One<img>A tag used to display the captcha image and bind a click event so that the captcha can be refreshed when the user clicks.
• A JavaScript code that is responsible for sending/api/captchaThe interface initiates a request to obtain newcaptcha_idand the captcha image URL, and update it to the page.

The following is an example code snippet for an integrated front-end captcha (assuming you are using native JavaScript):

`twig