How to add a checkbox for privacy policy or terms of service in the comment form?

Enhance website compliance: How to elegantly add a privacy policy checkbox in Anqi CMS message form

In today's digital age, user privacy protection has become a cornerstone that cannot be overlooked in website operations.Whether it is to deal with the GDPR of the European Union or similar regulations in other regions, it is an important step to establish trust and avoid risks by clearly informing users of the data processing methods and obtaining their consent.For operators who use AnQiCMS to build websites, adding a checkbox for 'I have read and agreed to the privacy policy' in the message form is an effective way to achieve this goal.

As an experienced website operations expert, I know that AnQiCMS, with its efficient, customizable, and scalable features, provides strong support for content management. Although AnQiCMS does not provide a global 'Privacy Policy Check' feature directly, its flexibleCustom message fieldandTemplate engineThis is enough to allow us to easily achieve this requirement.I will elaborate in detail on how to elegantly integrate privacy policy or terms of service checkboxes in the AnQiCMS comment form.

Understanding AnQiCMS' comment feature and customization

AnQiCMS isv2.0.0-alpha3The "Online Message Support" and "Custom Message Field Support" features have been added in this version.This means that we can add any custom fields to the comment form, in addition to name, contact information, and message content, such as the privacy policy consent option we are adding this time.

AnQiCMS's template system is based on a syntax similar to the Django template engine, allowing developers to modify.htmlTemplate file, finely controlling the display of the front-end page. The comment form is usually composed byguestbooktags are rendered in the template, andguestbooktags are the key to obtaining the custom comment fields from the background.

Core implementation approach: Using custom fields and templates cooperatively

The core approach to implementing the privacy policy checkbox on the comment form consists of two steps:

1. Configure custom message fields in the AnQiCMS backend:Create a field indicating 'agreement with privacy policy' and set its type to Checkbox and make it required.
2. Modify the frontend message form template:Find the template file for rendering the comment form, identify and render the custom fields we have created, and add a link to the privacy policy page.

Step 1: Configure the custom message field in the AnQiCMS backend

First, we need to log in to the AnQiCMS backend management interface and add a dedicated privacy policy consent field to the comment form.

1. Enter "Function Management":In the left menu of the background, find and click "Function Management", then select "Website Message Management".
2. Edit the message field:On the website message management page, you will see all the fields of the current message form.Click "Add field" or edit an existing field.We need to add a new field that will be used specifically for users to agree to the privacy policy.
3. Configure a new field:
   • Parameter name:Enter a user-friendly name, for example “I have read and agreed to the Privacy Policy”.
   • Call field:This is an internal identifier name, recommended to use lowercase letters and underscores, for exampleprivacy_agreementThis name will be used in subsequent template modifications.
   • Field type:Select 'Multiple Choice (Checkbox)'. Although we only need one checkbox, the Checkbox type is the most suitable for the 'Agree' selection logic.
   • Mandatory?: Make sure to check 'Yes'This ensures that the user must check this item before submitting their comments.
   • Default:Enter a value, for example, 'I agree'. This value will be submitted as the field content after the user ticks it.

After completing the above configuration, save this field. At this point, the backend is ready, and the data structure of the message form already includes this privacy policy consent field.

Step two: Modify the front-end message form template

Next, we need to modify the front-end template to display this checkbox to the user and make it interactive. The AnQiCMS comment form template is usually located/templateThe folder of the current template theme insideguestbook/index.htmlOr in flat modeguestbook.html.

Suppose we useguestbook.htmlAs the message form template file, and the call field created in the background isprivacy_agreementThe field type ischeckbox.

You can find similar usage in the template{% guestbook fields %}Code block for loop rendering form fields. We can loop through the fields based on the field'sFieldNameHandle the privacy policy checkbox we created.

`twig

{# 如果您的网站启用了验证码，验证码部分通常在这里 #}
{# {% include "partial/captcha.html" %} 或类似代码 #}
{# 您也可以将验证码放在隐私政策勾选框之后，这样用户在同意条款后再进行验证码验证 #}

{% guestbook fields %}
    {% for item in fields %}
        {# 判断是否是我们自定义的隐私政策字段 #}
        {% if item.FieldName == "privacy_agreement" %}
            <div class="form-group privacy-agreement-group">
                <input type="{{item.Type}}" name="{{item.FieldName}}[]" value="{{item.Items|first}}" id="{{item.FieldName}}" {% if item.Required %}required{% endif %}>
                <label for="{{item.FieldName}}">
                    {# 这里的链接应指向您网站上实际的隐私政策或服务条款页面 #}
                    我已阅读并同意<a href="/privacy-policy.html" target="_blank" rel="nofollow">《隐私政策》</a>
                    {% if item.Required %}<span class="required-star">*</span>{% endif %}
                </label>
            </div>
        {% else %}
            {# 渲染其他常规留言表单字段 #}
            <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}}" {% if item.Required %}required{% endif %} placeholder="{{item.Content}}" autocomplete="off">
                    {% elif item.Type == "textarea" %}
                        <textarea name="{{item.FieldName}}" {% if item.Required %}required{% endif %} placeholder="{{item.Content}}" rows="5"></textarea>
                    {% elif item.Type == "radio" %}
                        {% for val in item.Items %}
                            <input type="{{item.Type}}" name="{{item.FieldName}}" value="{{val}}" id="{{item.FieldName}}-{{loop.index}}">
                            <label for="{{item.FieldName}}-{{loop.index}}">{{val}}</label>
                        {% endfor %}
                    {% elif item.Type == "checkbox" %}
                        {# 对于其他常规的复选框，可以按此方式渲染 #}
                        {% for val in item.Items %}
                            <input type="{{item.Type}}" name="{{item.FieldName}}[]" value="{{val}}" id="{{item.FieldName}}-{{loop.index}}">
                            <label for="{{item.FieldName}}-{{loop.index}}">{{val}}</label>
                        {% endfor %}
                    {% elif item.Type == "select" %}
                        <select name="{{item.FieldName}}" {% if item.Required %}required{% endif %}>
                            {% for val in item.Items %}
                                <option value="{{val}}">{{val}}</option>
                            {% endfor %}
                        </select>
                    {% endif %}
                </div>
            </div>
        {% endif %}
    {% endfor %}

{# 提交按钮 #}
<div class="form-group submit-group">
    <button type="submit