How to integrate a message form into AnQiCMS template and dynamically display the custom form fields configured in the backend?

In today's digital world, websites are not just platforms for displaying information, but also important bridges for interaction and communication with users.An elegantly designed, feature-complete feedback form that can greatly enhance user experience and help the website collect feedback and gain business opportunities.AnQiCMS (AnQiCMS) is well-versed in this field, providing powerful integration capabilities for留言表单留言表单, especially praiseworthy is that it allows us to flexibly configure custom form fields through the backend, and dynamically present these fields in the front-end template, thereby satisfying various personalized business needs.

Understanding the core advantages of the CMS message form

The message function of Anqi CMS is not simply to provide several fixed input boxes, but it gives website operators a great degree of freedom.Through the "Website Message Management" feature on the backend, we can easily add, modify, or delete form fields.This means that whether it is product consultation, technical support, or cooperation negotiation, we can customize exclusive comment forms for different scenarios without modifying a single line of code, which undoubtedly brings a qualitative leap in the flexibility and maintainability of the website.This dynamic configuration capability is one of the major highlights of Anqi CMS as an enterprise-level content management system.

Integrate the message form into the template

Integrate the message form into the website template is the first step to achieve this powerful function. According to the template design conventions of Anqi CMS, the message page usually corresponds to the template directory underguestbook/index.htmlorguestbook.htmlFile. Of course, you can also embed it into any page as needed, such as the product details page or the contact us page.

In the template file, we introduce the backend configuration comment field through a concise template tag:

{% guestbook fields %}
    {# 在这里我们将动态生成表单字段 #}
{% endguestbook %}

Here,guestbookThe tag encapsulates all the comment field information configured on the backend into a name offieldsThe variable is in.fieldsA variable is an array that contains detailed properties of each field, such as name, type, and whether it is required.Next, we can use this information to automatically build forms in the front-end template.

Dynamically build custom form fields.

Dynamically displaying custom fields is the essence of the safety CMS message form. We will traversefieldsArray, and according to each field type (item.Type）to render different HTML form elements.This method ensures that the front-end form can keep synchronized with the back-end field adjustments, greatly reducing the manual modification of templates.

Usually, we will useforLoop combinedifCondition judgment to handle different types of fields. The following is a practical template code snippet that demonstrates how to dynamically generate common form elements:

<form method="post" action="/guestbook.html">
{% guestbook fields %}
    {% for item in fields %}
    <div class="form-group">
        <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" %}
            <div class="form-check-inline">
                {%- for val in item.Items %}
                <input type="{{item.Type}}" name="{{item.FieldName}}" id="{{item.FieldName}}-{{loop.index}}" value="{{val}}" class="form-check-input">
                <label for="{{item.FieldName}}-{{loop.index}}" class="form-check-label">{{val}}</label>
                {%- endfor %}
            </div>
            {% elif item.Type == "checkbox" %}
            <div class="form-check-inline">
                {%- for val in item.Items %}
                <input type="{{item.Type}}" name="{{item.FieldName}}[]" id="{{item.FieldName}}-{{loop.index}}" value="{{val}}" class="form-check-input">
                <label for="{{item.FieldName}}-{{loop.index}}" class="form-check-label">{{val}}</label>
                {%- endfor %}
            </div>
            {% elif item.Type == "select" %}
            <select name="{{item.FieldName}}" id="{{item.FieldName}}" {% if item.Required %}required{% endif %}>
                {%- for val in item.Items %}
                <option value="{{val}}">{{val}}</option>
                {%- endfor %}
            </select>
            {% endif %}
        </div>
    </div>
    {% endfor %}

    {# 引入验证码，如果后台开启 #}
    <div class="form-group" id="captcha-container" style="display: none;">
        <label for="captcha">验证码</label>
        <div style="display: flex;">
            <input type="hidden" name="captcha_id" id="captcha_id">
            <input type="text" name="captcha" id="captcha" required placeholder="请填写验证码" autocomplete="off" style="flex: 1;">
            <img src="" id="get-captcha" style="width: 120px; height: 40px; cursor: pointer; margin-left: 10px;" alt="验证码">
        </div>
    </div>

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

In the above code, we have customized the corresponding HTML structure for each field type (text/number/textarea/radio/checkbox/select). It is worth noting:

• item.NameThe friendly name used to display the form field.
• item.FieldNameIs this field submitted as a form element?nameAttribute, the backend will receive data according to this name.
• item.RequiredIf it istrue, the attribute will be automatically addedrequiredAttribute, prompts the user that this field is required.
• For radio buttons, checkboxes, and dropdown selects,item.Itemsall possible values will be provided, and we loopitem.Itemsto generate each option.
• item.Contentin text and number input boxes,placeholdertext.

submit the message form.

The submission of the comment form is relatively direct,formTagsmethodthe properties should be set topost,actionthe attribute points to/guestbook.html. When submitting, in addition to the above dynamically generated custom fields, the security CMS will also default to receiving several core fields:user_name(name of the leaver),contact(Contact Information),content(Leave a message).Even if your backend is not configured with these fields, you can manually add them in the template to ensure data integrity.<input type="hidden" name="return" value="json">.

Enhance user experience: Integrate captcha

To prevent malicious submissions and spam, website comments usually require a captcha.The auto CMS backend provides the function to enable留言评论验证码.Once enabled in the background, you need to integrate the display and refresh logic of the captcha in the frontend template.This usually involves a captcha image and an input box.

In the above form code, we reserve