How to quickly generate a customizable website guestbook form with the `guestbook` tag?

In website operation, interacting with visitors and collecting feedback is an important link to improve user experience and obtain valuable information. The message form is the core tool to achieve this goal. AnQiCMS (AnQiCMS) fully understands its importance and provides users withguestbookTag, allowing you to easily and flexibly build a powerful and highly customizable website message form.

UseguestbookLabel, you can not only quickly generate the basic message function, but also according to your business needs, add various custom fields to the form, so as to accurately collect the information you want, without touching the complex backend code.

Core feature: customizable field message form

The留言表单functionality of 安企CMS is powerful in its customizability.It allows you to define the fields required for the message form in the website backend management system, for example, in addition to the common name, contact information, and message content, you can also add various fields such as "Select service type", "reservation time", "upload file", and so on.These custom fields will directly affect the display form and the type of information collected by the front-end message form.

After you set these fields in the background, you just need to make a simple call in the front-end templateguestbookLabel, AnQi CMS will automatically generate the corresponding form elements according to your configuration.This greatly simplifies the development process, allowing content operators to easily handle the creation and management of forms.

Deep understandingguestbookTag

guestbookThe usage of tags is very intuitive: {% guestbook fields %}...{% endguestbook %}. Here,fieldsThis is an array object automatically generated by the Anqi CMS system based on the backend configuration. This array contains all the details of the fields you define for the comment form.

Let's take a look atfieldsEach element in the arrayitemWhich key attributes does each form field contain, they are the foundation for customization:

• NameThis is the display name of the field, which is the label text that visitors see on the form, such as "Your Name", "Contact Email", etc.
• FieldNameThis is the unique identifier used by the backend to recognize and store the field data, which is usually a string in English, such asuser_name/contact_email. This name will be sent as part of the data when the form is submitted.
• TypeThis property is very critical, it determines the type of form element. Anqi CMS supports various types, including:
  • text(Single-line text input box)
  • number(Numeric input box)
  • textarea(Multi-line text area)
  • radio(Radio button group)
  • checkbox(Checkbox group)
  • select(Drop-down selection box)
• RequiredA boolean value (trueorfalse），indicating whether the field is required. If it istrue，the front-end form will usually add corresponding validation rules.
• ContentThis attribute is usually used as a placeholder for text input boxesplaceholder) or default value, providing visitors with a filling prompt.
• ItemsWhen the field type isradio/checkboxorselectAt that time, this property will provide an array containing all the available option values.

Step by step build your message form.

Now, let's go through a real template code example to see how to useguestbooktags to quickly generate a customizable field comment form.

First, you need to make sure that you have already added custom fields, set their names, types, whether they are required, and options (if needed) in the 'Function Management' -> 'Website Message Management' section of the Anqin CMS backend.For example, you may have set "Name (text, required)", "Email (text, required)", "Service Type (select, options: Website Construction, SEO Optimization, Content Marketing)", "Message Content (textarea, required)".

Next, you can edit your message page template file (usuallyguestbook/index.htmlor your custom message page template) by writing the following code:

`twig

{# 用于系统识别提交来源和返回格式，如果需要json返回，可设置为json #}
<input type="hidden" name="return" value="html">

{% guestbook fields %}
    {% for item in fields %}
    <div class="form-group">
        <label for="{{ item.FieldName }}">{{ item.Name }}{% if item.Required %} *{% endif %}</label>
        <div>
            {% if item.Type == "text" or item.Type == "number" %}
            <input type="{{ item.Type }}"
                   id="{{ item.FieldName }}"
                   name="{{ item.FieldName }}"
                   {% if item.Required %}required{% endif %}
                   placeholder="{{ item.Content }}"
                   class="form-control">
            {% elif item.Type == "textarea" %}
            <textarea id="{{ item.FieldName }}"
                      name="{{ item.FieldName }}"
                      {% if item.Required %}required{% endif %}
                      placeholder="{{ item.Content }}"
                      rows="5"
                      class="form-control"></textarea>
            {% elif item.Type == "radio" %}
            <div class="form-check-group">
                {%- for val in item.Items %}
                <label class="form-check-label">
                    <input type="radio"
                           name="{{ item.FieldName }}"
                           value="{{ val }}"
                           {% if loop.first %}checked{% endif %} {# 默认选中第一个 #}
                           {% if item.Required %}required{% endif %}
                           class="form-check-input"> {{ val }}
                </label>
                {%- endfor %}
            </div>
            {% elif item.Type == "checkbox" %}
            <div class="form-check-group">
                {%- for val in item.Items %}
                <label class="form-check-label">
                    <input type="checkbox"
                           name="{{ item.FieldName }}[]" {# 多选框通常需要[]表示数组 #}
                           value="{{ val }}"
                           class="form-check-input"> {{ val }}
                </label>
                {%- endfor %}
            </div>
            {% elif item.Type == "select" %}
            <select id="{{ item.FieldName }}"
                    name="{{ item.FieldName }}"
                    {% if item.Required %}required{% endif %}
                    class="form-control">
                {%- for val in item.Items %}
                <option value="{{ val }}">{{ val }}</option>
                {%- endfor %}
            </select>
            {% endif %}
        </div>
    </div>
    {% endfor %}

    {# 留言验证码，如果后台开启，需集成 #}
    {# 详情请参考 tag-/anqiapi-other/167.html 文档 #}
    {#
    <div class="form-group captcha-group">
        <label for="captcha">验证码 {% if system.guestbook_captcha_open %}*{% endif %}</label>
        <div style="display: flex; align-items: center;">
            <input type="hidden" name="captcha_id" id="captcha_