As an experienced website operations expert, I know that every detail can affect user experience and operational efficiency.When building a website, forms are an important part of interacting with users, and clear, friendly form design is the key to improving conversion rates.AnQiCMS (AnQiCMS) takes advantage of its flexible template engine and powerful backend management features, providing us with great convenience, especially in handling scenarios such as message forms that require users to fill in information.Today, let's delve deeply into a seemingly simple but extremely practical skill: how to use the background field of theRequiredProperties, dynamically add required asterisks or prompts in AnQiCMS message form.

Smart design of AnQiCMS message form.

Firstly, we need to understand the underlying logic of the Anqi CMS message form.AnQiCMS allows operators to customize the fields of the留言表单 in the background, including field names, types, and most importantly - whether it is a "required" item (Required).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, but instead can dynamically read these properties through template tags, thus avoiding the麻烦 of modifying the front-end code every time there is a change in business requirements.

This isguestbookThe form tag plays a role in the place. It is not simply to output form elements, but more like an intelligent data adapter, which passes the field information configured on the backend to the front-end template completely.

Core function:guestbookThe clever use of tags

In AnQiCMS templates, we can use{% guestbook fields %}...{% endguestbook %}such tag structure to obtain all the form fields defined in the background comment form. Here is thefieldsis an array that contains all form items (or more accurately, an iterable object). Inforeach iteration, everyitemrepresent a specific form field, such as username, contact information, and message content.

Eachitemcarry rich attribute information, the most critical of which isitem.Required. This attribute is a boolean value(trueorfalseIt 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 a required identifier

Our goal is to, whenitem.RequiredWithtrueAt that time, display a red asterisk next to the field name, and add an HTML5 label for the correspondinginputortextareatag.requiredProperty, 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>