How to generate and display the website's message form in AnQiCMS templates?

In website operation, an efficient and convenient feedback form is an important bridge for user interaction with the website.It not only collects user feedback but also serves as an entry point for potential customers to obtain information.AnQiCMS as an enterprise-level content management system provides powerful and flexible functions in this regard, allowing us to easily generate and manage comment forms in templates.

AnQiCMS message form feature overview

AnQiCMS has built-in comprehensive online message functionality, and has supported custom message fields since version v2.0.0-alpha3.This means we can flexibly define the information needed to collect in the form based on actual business requirements, whether it is basic user name, contact information, or more specific consultation content, product preferences, etc., it can be easily realized.The "website message management" module manages all submitted messages centrally, making it convenient to view and handle.

At the template level: the key tags for generating the message form -guestbook

The core of displaying the message form in the AnQiCMS template is to useguestbookThe tag can dynamically retrieve the background configuration of the message form fields and output them in a structured manner for rendering in the front-end template.

UseguestbookThe basic syntax of the tag is:{% guestbook fields %} ... {% endguestbook %}

Here, fieldsIt is a custom variable name that carries all the form field data obtained from the background, which is an array object, and we need to go throughforto iterate over it.

guestbookThe tag supports an optional parametersiteIdLeave a comment form configuration is not required in most cases, unless you need to call the specific site's comment form configuration in a multi-site environment.

Traversalfieldsfor each variable,item(i.e., each form field) contains the following key attributes that determine the type and behavior of the form element:

• Name: The Chinese name of the form field, used to display to the user.
• FieldNameThe variable name of the form field, used to identify when receiving data from the backend, usually in English.
• TypeThe type of the form field, determines which HTML input element it is rendered as, for example:
  • text: Single line text input box.
  • number: Numeric input box.
  • textarea: Multi-line text input area.
  • radio: Single selection button.
  • checkbox: Multiple selection button.
  • select: Dropdown selection box.
• Required: A boolean value indicating whether the field is required.
• Content: The default value or placeholder text for the field.
• Items：WhenTypeWithradio/checkboxorselectWhen, this property contains an array of all possible values.

Actual operation: How to build a comment form in the template.

UnderstoodguestbookAfter the structure of the tag, we canguestbook/index.html(or you can customize your message page template file, such asguestbook.html)in which you can write HTML and template code to generate a message form.

This is a complete example of a dynamically generated form, which will automatically render different input elements based on the backend configuration:

<form method="post" action="/guestbook.html">
    <input type="hidden" name="return" value="html"> {# 可选，指定后端返回html或json #}

    {% guestbook fields %}
        {% for item in fields %}
        <div class="form-group">
            <label for="{{ item.FieldName }}">{{ item.Name }}{% if item.Required %}<span class="text-danger">*</span>{% endif %}</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" class="form-control">
                {% elif item.Type == "textarea" %}
                    <textarea name="{{ 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 loop.first %}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 }}" class="form-control">
                        {% for val in item.Items %}
                        <option value="{{ val }}">{{ val }}</option>
                        {% endfor %}
                    </select>
                {% else %}
                    {# 如果有其他未知类型，可以提供一个默认处理方式 #}
                    <input type="text" name="{{ item.FieldName }}"
                           {% if item.Required %}required{% endif %}
                           placeholder="{{ item.Content }}" autocomplete="off" class="form-control">
                {% endif %}
            </div>
        </div>
        {% endfor %}
    {% endguestbook %}

    {# 验证码部分，增强安全性 #}
    <div class="form-group captcha-group">
        <label for="captcha">验证码<span class="text-danger">*</span></label>
        <div class="input-group">
            <input type="hidden" name="captcha_id" id="captcha_id">
            <input type="text" name="captcha" id="captcha" required placeholder="请输入验证码" class="form-control">
            <span class="input-group-btn">
                <img src="" id="get-captcha" alt="验证码" style="cursor: pointer; height: 34px;">
            </span>
        </div>
    </div>
    <script>
        // 非jQuery版本
        document.getElementById('get-captcha').addEventListener("click", function () {
            fetch('/api/captcha')
                .then(response => response.json())
                .then(res => {
                    document.getElementById('captcha_id').value = res.data.captcha_id;
                    document.getElementById('get-captcha').src = res.data.captcha;
                })
                .catch(err => console.error('Error loading captcha:', err));
        });
        document.getElementById('get-captcha').click(); // 页面加载时自动获取一次验证码
    </script>
    {# 如果您网站使用了 jQuery，也可以这样写 #}
    {#
    <script>
        $(function() {
            $('#get-captcha').on("click", function () {
                $.get('/api/captcha', function(res) {
                    $('#captcha_id').val(res.data.captcha_id);
                    $('#get-captcha').attr("src", res.data.captcha);
                }, 'json');
            }).trigger('click'); // 页面加载时自动获取一次验证码
        });
    </script>
    #}

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

Note on submitting the form:

• The form'sactionattribute should point to/guestbook.html.
• methodattribute must be set topost.
• In addition to dynamically generated custom fields, it usually includes some common required fields such asuser_nameand the name of thecontact（Contact information），they are built-in to the AnQiCMS message function. It is recommended to create corresponding fields when customizing fields in the background, or to manually add them to the template to ensure data integrity.
• returnHidden field used to specify the data format returned by the backend after processing the form.htmlIndicates returning an HTML page.jsonIndicates returning JSON data, convenient for asynchronous processing by the frontend.

Add captcha to enhance security:

To effectively prevent spam comments, AnQiCMS supports integrated captcha function.After enabling the comment captcha in the background, you just need to add the relevant HTML and JavaScript code to the comment form./api/captchaInterface to get captcha image and correspondingcaptcha_id, users need to fill in the captcha displayed in the image to submit successfully.

Customize form style and layout

ThoughguestbookThe label generates the form structure for us, but its default style is usually quite plain.We can use our knowledge of HTML and CSS, combined with the structure of tag output, to beautify and lay out the form.divandlabelElements should be added with CSS classes, or a unified style management can be achieved through external CSS files. AnQiCMS's template production conventions encourage storing static resources such as styles, JS scripts, and so on./public/static/Catalog, which makes front-end resource management clear and orderly.

Processing after leaving a message

After the user submits a message, the AnQiCMS backend will automatically receive and process these data.Administrators can view, manage, and reply to these messages in the "Website Message Management" module on the backend.The system may also configure email reminder functions to ensure that messages can be discovered and handled in a timely manner.

In short, AnQiCMS is flexible through itsguestbookLabel and backend management features, providing great convenience for the generation, display, and management of website message forms.Whether it is a simple feedback form or a complex consultation form, it can be efficiently built under the AnQiCMS framework and ensure security and manageability.

Frequently Asked Questions (FAQ)

How to customize the fields to be collected in a message form?

Answer: You can log in to the AnQiCMS backend management interface, navigate to the "Function Management" > "Website Message" module, and find the setting item for "Custom Message Field".