How to integrate the message form into the 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.A well-designed, feature-complete feedback form that can greatly enhance user experience, help websites collect feedback, and obtain business opportunities.AnQiCMS (AnQiCMS) understands this well, providing strong form integration capabilities, especially impressive is that it allows us to flexibly configure custom form fields through the backend and dynamically present these fields in front-end templates, thereby meeting various personalized business needs.

Understand the core advantages of the AnQi CMS message form

The Anqi CMS message function is not simply to provide a few 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 message forms for different scenarios without modifying a single line of code, which undoubtedly brings a qualitative leap to the flexibility and maintainability of the website.The ability to dynamically configure is exactly one of the highlights of Anqi CMS as an enterprise-level content management system.

Integrate the message form into the template

Integrating the message form into the website template is the first step in achieving 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 background configuration留言field through a concise template tag:

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

here,guestbookThe tag encapsulates all the background configuration留言field information into a namedfields. ThisfieldsA 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.

Build custom form fields dynamically

Dynamic display of custom fields is the essence of the Anqi CMS message form. We will iteratefieldsArray, and according to the type of each field (item.TypeThis method is used to render different HTML form elements. This ensures that the front-end form stays synchronized with any changes made to the fields in the backend, greatly reducing the manual effort to modify templates.

Generally, we would useforLoop combinationifconditional statements to handle different types of fields. Here is a practical template code snippet that shows 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 code above, we have customized the HTML structure for each field type (text/number/textarea/radio/checkbox/select). It is worth noting that:

• item.Nameis used to display the friendly name of form fields.
• item.FieldNameThis field is submitted as a form elementnameAttribute, the backend will receive data based on this name
• item.RequiredIf it istrue, it will be automatically addedrequiredAttribute, prompts the user that this field is required.
• For radio, checkbox, and dropdown lists,item.Itemsall possible values will be provided, we loop againitem.Itemsto generate each option.
• item.Contentin text and number input boxes asplaceholder.

to submit the message form

The submission of the comment form is relatively direct,formlabel'smethodproperties of thepost,actionproperty points to/guestbook.html. When submitting, in addition to the above dynamically generated custom fields, Anqi CMS will also default to receiving several core fields:user_name(commenter's name),contact(Contact information),content(Message content). Even if your backend is not configured for these fields, you can manually add them to ensure the integrity of the data.In addition, if you need the backend to return data in JSON format instead of the default HTML response, you can add a hidden field to the form:<input type="hidden" name="return" value="json">.

Improve user experience: integrate captcha

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

We reserve in the above form code,