How to dynamically generate and display the user's guestbook form with the label `guestbook`?

In website operation, visitor comments and interaction are important for building trust, obtaining feedback, and promoting business development.AnQiCMS (AnQiCMS) is well aware of this need, and therefore provides a flexible and powerful form message function that allows you to easily generate and display user message forms on your website.This is mainly through its built-inguestbookTo implement template tags, it not only allows you to customize form fields but also ensures the security and smooth submission of forms.

UnderstandingguestbookThe core role of tags

When we need to add a comment form on the website,guestbookThe tag does not directly generate a complete HTML form, but provides an array containing all the field *definitions*. This means that you can flexibly build a comment form that conforms to the design style of your website, rather than being restricted by fixed styles.This design concept allows for highly customizable form presentation, fully reflecting the advantages of AnQiCMS in content model and modular design.

The definition of these form fields comes from the 'Function Management' of the AnQiCMS background under the 'Website Message' settings.Here, you can add or edit the various fields required for the message form, such as visitor name, contact information, message content, and even customize other fields according to business needs, such as 'intended product', 'service type', etc.Each custom field will have its corresponding display name, field type (such as text, number, multiline text, radio, checkbox, or dropdown selection) and whether it is required or not properties.

Front-end application: Dynamically build a message form

To convert these backend-defined fields into actual usable forms in your template, we will do so in the corresponding template file (for example inguestbook/index.htmlOr other pages that need to display the comment form are usedguestbookTags:

{% guestbook fields %}
    <form method="post" action="/guestbook.html">
        {# 这里将根据fields数组动态生成表单字段 #}
        {% for item in fields %}
            <div>
                <label for="{{ item.FieldName }}">{{ item.Name }}</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">
                    {% elif item.Type == "textarea" %}
                    <textarea name="{{ item.FieldName }}" id="{{ 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 }}" id="{{ item.FieldName }}_{{ forloop.Counter }}">
                        <label for="{{ item.FieldName }}_{{ forloop.Counter }}">{{ val }}</label>
                        {% endfor %}
                    {% elif item.Type == "checkbox" %}
                        {% for val in item.Items %}
                        <input type="{{ item.Type }}" name="{{ item.FieldName }}[]" value="{{ val }}" id="{{ item.FieldName }}_{{ forloop.Counter }}">
                        <label for="{{ item.FieldName }}_{{ forloop.Counter }}">{{ val }}</label>
                        {% endfor %}
                    {% elif item.Type == "select" %}
                    <select name="{{ item.FieldName }}" id="{{ item.FieldName }}">
                        {% for val in item.Items %}
                        <option value="{{ val }}">{{ val }}</option>
                        {% endfor %}
                    </select>
                    {% endif %}
                </div>
            </div>
        {% endfor %}

        {# 验证码区域，如果开启了验证码功能 #}
        <div style="display: flex; align-items: center; margin-bottom: 15px;">
            <input type="hidden" name="captcha_id" id="captcha_id">
            <input type="text" name="captcha" required placeholder="请填写验证码" style="flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">
            <img src="" id="get-captcha" style="width: 120px; height: 40px; cursor: pointer; margin-left: 10px; border-radius: 4px; border: 1px solid #eee;" alt="验证码" />
            <script>
                document.getElementById('get-captcha').addEventListener("click", function () {
                    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>
            <button type="submit" style="padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">提交留言</button>
            <button type="reset" style="padding: 10px 20px; background-color: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; margin-left: 10px;">重置</button>
        </div>
    </form>
{% endguestbook %}

In this code block:

1. {% guestbook fields %}The tag will load the form fields defined in the backgroundfieldsthe variable.
2. fieldsA variable is an array that contains the detailed information of each input item defined for the comment form in the background.
3. We pass{% for item in fields %}looping through this array. In each loop,itemA variable represents the definition of a form field.
4. Based onitem.Type(Form type), we use conditional judgment{% if item.Type == "text" %}to render different HTML form elements such as<input type="text">/<textarea>/<input type="radio">/<select>etc.
5. item.Nameused to display the label text of the form itemitem.FieldNamethen as the HTML element'snameandidProperty ensures that form data can be submitted correctly and interact with the front-end.
6. item.RequiredProperty determines whether to add HTML's.requiredProperty implements front-end required validation.
7. For single-choice, multiple-choice, and dropdown fields,item.Itemsan option list is provided, and we loop through again{% for val in item.Items %}to generate these options.

Submit message: Make sure the data is sent