How does AnQi CMS display the message form and submit a message?

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 the website collect user feedback and answer questions, but also promote user participation and enhance the interactivity and stickiness of the website.For users who use AnQiCMS, the built-in message function provides a convenient and flexible solution, allowing you to easily display and submit a message form without writing complex code.

Overview of AnQi CMS message function

The留言功能 of 安企CMS is designed quite user-friendly, it allows you to customize the fields of the comment form in the background, including text, numbers, multi-line text, radio buttons, checkboxes, drop-down selections, and many other types, to meet the needs of different business scenarios.The system also supports captcha functionality, effectively preventing spam, and provides comprehensive backend message management, making it convenient for you to view, reply, and export user messages.

Part 1: How to display the留言form on the website front end

To display a message form on your security CMS website, you first need to understand its template structure. Security 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 English translation of 'auto' is 'English'.This tag is a powerful tool provided by AnQi CMS, which can dynamically retrieve all the comment fields you configure on the backend and pass them to the frontend template.{% guestbook fields %}...{% endguestbook %}.

Here are thefieldsis an array object that contains detailed information of each field you define for the comment form in the background. EachitemInfieldsarray has the following important properties:

• item.Name：This is the field name displayed on the front-end, such as 'Your Name', 'Contact Information'.
• item.FieldName：This is the value corresponding to the field when the form is submitted.nameAttribute value, the key for backend field identification.
• item.Type：Indicates the type of the field, for exampletext(Single-line text)、number(Number)、textarea(Multi-line text)、radio(Radio button)、checkbox(多选) Orselect(Drop-down selection).
• item.Required: A boolean value indicating whether the field is required.
• item.Content: The default value or placeholder text of the field.
• item.Items: If the field type isradio/checkboxorselectThis property will contain an array listing all options.

With this information, you can write aforTranslate the loop to dynamically generate the comment form, thus avoiding manual modification of the front-end code each time the fields are adjusted in the background. A typical code snippet for dynamic form generation might look 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, it is also completely feasible if you prefer to fully customize the HTML structure and style of the form. In this case, you just need to ensure that each form element isnameAttributes defined in the backgroundFieldNameshould be consistent. Safe CMS will collect and process comment data based on thesenameattributes. For example, the system will preset some core fields such asuser_name（Name of the留言者）、contact（Contact information）andcontent(Leave a message), even if you have not explicitly defined them in the background, you can use these directly on the frontendnameproperties to build a form.

Part Two: How to submit a message

When the user fills out the message form and clicks submit, the form data needs to be sent to the backend of Anqi CMS for processing. Submit the message.actionThe address is fixed as/guestbook.html, and is usually usedPOSTmethod.

Except for the aforementioneduser_name/contactandcontentcore fields, if you have customized other comment fields in the background, then the properties of these fieldsnamealso need to match the definition in the backgroundFieldNameMaintain consistency so that the backend can correctly receive and store data.

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

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

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

Third part: Enhancing留言safety——Adding captcha

It is very necessary to add a captcha function to the comment form to prevent malicious submissions and spam comments.The AutoCMS built-in captcha support, the enable 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 "Backend Settings" or "Function Management" related menus.

2. Front-end integration 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 of the captchacaptcha_id).
• A textinputField, used to input the captcha by the usercaptcha).
• An<img>Label used to display the captcha image and bind a click event to refresh the captcha when the user clicks it.
• A JavaScript code that is responsible for/api/captchaThe interface initiates a request to get newcaptcha_idand the URL of the verification code image, 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