As an experienced website operations expert, I know that every detail can affect user experience and operational efficiency.When building a website, the form is an important part of interaction with users, and clear, friendly form design is the key to improving conversion rates.AnQiCMS provides us with great convenience with its flexible template engine and powerful background management functions, especially in scenarios that require users to fill in information, such as message forms.RequiredProperties, dynamically add required asterisks or prompts in the AnQi CMS comment form.

Intelligent design of AnQi CMS comment form

Firstly, we need to understand the underlying logic of the security CMS message form.AnQiCMS Allows operators to customize the fields of the留言表单留言表单 form in the background, including field names, types, and most importantly——whether it is a "Required" mandatory item.This design philosophy is very efficient because it decouples business logic from the front-end display.The front-end template does not need to hard-code which fields are required; instead, it can dynamically read these properties through template tags, thus avoiding the麻烦 of modifying the front-end code each time there is a change in business requirements.

This isguestbookThe place where the form label takes effect.It is not just a simple output of form elements, but more like an intelligent data adapter that passes the complete field information configured on the backend to the frontend template.

Core Function:guestbookThe magic use of tags

In AnQiCMS templates, we can use{% guestbook fields %}...{% endguestbook %}such tag structure to get all the back-end defined form fields for comments. Here,fieldsis an array containing all form items (or more accurately, an iterable object). Inforevery loop,itemEach represents a specific form field, such as username, contact information, message content, etc.

EachitemEach carries rich attribute information, the most critical of which isitem.RequiredThis property is a boolean valuetrueorfalseIt directly tells us whether the current field is marked as required in the background. By cleverly utilizing this property, we can implement dynamic required prompts in the front-end template.

The implementation path for dynamically adding required tags

Our goal is to,item.Requiredresponse fortrueThen, display a red asterisk next to the field name, and for the corresponding,inputortextareaTo add HTML5'srequiredProperties, to enable the built-in validation feature of the browser.

Below, we demonstrate this process through a specific template code example:

`twig

{% guestbook fields %}

{% for item in fields %}
<div class="form-group">
    <label for="{{ item.FieldName }}">
        {{ item.Name }}
        {% if item.Required %}<span class="required-asterisk">*</span>{% 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 }}"
               autocomplete="off"
               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="{{ item.Type }}"
                       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="{{ item.Type }}"
                       name="{{ item.FieldName }}[]" {# 复选框名称通常带[] #}
                       value="{{ val }}"
                       {% if item.Required %}data-required-group="true"{% endif %} {# 用于前端JS验证至少选一项 #}
                       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">
            <option value="">请选择</option> {# 为必填的select添加一个空值选项 #}
            {%- 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">
    <label for="captcha">验证码 {% if captcha_required %}<span class="required-asterisk">*</span>{% endif %}</label>
    <div>
        <input type="hidden" name="captcha_id" id="captcha_id">
        <input type="text" name="captcha" id="captcha" {% if captcha_required %}required{% endif %} placeholder="请输入验证码" class="form-control captcha-input">
        <img src="" id="get-captcha" class="captcha-img" alt="验证码">
        <script>
            // 验证码加载逻辑
        </script>
    </div>
</div> #}

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