In website operation, establishing effective interaction with visitors is a key factor in improving user experience and collecting valuable feedback.AnQi CMS knows this and therefore provides us with a powerful and flexible comment form feature, which not only supports basic comment collection but also allows for easy implementation of custom fields and captcha, making the website's interactive module both efficient and secure.
Next, we will delve into how to build and display a fully functional message form on the front page of Anqi CMS, while supporting custom fields and captcha, so as to better serve our users.
The core construction of the message form
The first step in building a message form is to understand how Anqi CMS calls the message feature on the front end. Anqi CMS provides a special template tag.{% guestbook fields %}It can intelligently obtain all the fields information we configure for the message form on the backend.This means we do not need to manually write each form element, the system will automatically pass the fields set in the backend to the frontend template for rendering.
In the front-end template file (usuallyguestbook/index.htmlor any other template you specify for the comment feature), our form structure will be roughly as follows. Please note that theactionattribute should point to/guestbook.html,methodWithpostThis is the standard interface for Anqi CMS to receive messages.
<form method="post" action="/guestbook.html">
<input type="hidden" name="return" value="html"> {# 可选，指定后端返回格式为HTML #}
<div>
<label for="user_name">您的姓名：</label>
<input type="text" id="user_name" name="user_name" required placeholder="请填写您的称呼">
</div>
<div>
<label for="contact">联系方式：</label>
<input type="text" id="contact" name="contact" required placeholder="您的电话/邮箱/微信">
</div>
<div>
<label for="content">留言内容：</label>
<textarea id="content" name="content" rows="5" required placeholder="请留下您的宝贵留言..."></textarea>
</div>
{# 这里将是自定义字段和验证码的插入位置 #}
<div>
<button type="submit">提交留言</button>
<button type="reset">重置</button>
</div>
</form>
This code provides us with a basic message framework, among which.user_name/contactandcontentIs the system default field that needs to be provided when submitting, even if we have not specially set them up in the background, they should still be included in the form.
Flexible custom field support
The strength of AnQi CMS lies in the flexibility of its content model, this feature also extends to the comment form.In the background settings, we can easily add various custom fields to the message form, such as "Industry", "Your Company", "Products of Interest", etc., to meet different business needs.
When we use{% guestbook fields %}When a tag is encountered, it will return afieldsarray that includes all the form fields configured in the background (including the default and those we customize). We can iterate over thisfieldsAn array, dynamically rendering form elements. This method greatly improves the reusability and maintainability of templates.
Here is an example of dynamically rendering a custom field code.
<form method="post" action="/guestbook.html">
<input type="hidden" name="return" value="html">
{# 动态渲染留言表单字段 #}
{% guestbook fields %}
{% for item in fields %}
<div>
<label for="{{item.FieldName}}">{{item.Name}}：</label>
<div>
{# 根据字段类型渲染不同的输入框 #}
{% if item.Type == "text" || item.Type == "number" %}
<input type="{{item.Type}}" id="{{item.FieldName}}" name="{{item.FieldName}}" {% if item.Required %}required{% endif %} placeholder="{{item.Content}}" autocomplete="off">
{% elif item.Type == "textarea" %}
<textarea id="{{item.FieldName}}" name="{{item.FieldName}}" {% if item.Required %}required{% endif %} placeholder="{{item.Content}}" rows="5"></textarea>
{% elif item.Type == "radio" %}
{%- for val in item.Items %}
<label><input type="radio" name="{{item.FieldName}}" value="{{val}}" {% if item.Required %}required{% endif %}> {{val}}</label>
{%- endfor %}
{% elif item.Type == "checkbox" %}
{%- for val in item.Items %}
<label><input type="checkbox" name="{{item.FieldName}}[]" value="{{val}}" {% if item.Required %}required{% endif %}> {{val}}</label>
{%- endfor %}
{% elif item.Type == "select" %}
<select id="{{item.FieldName}}" name="{{item.FieldName}}" {% if item.Required %}required{% endif %}>
{%- for val in item.Items %}
<option value="{{val}}">{{val}}</option>
{%- endfor %}
</select>
{% endif %}
</div>
</div>
{% endfor %}
{% endguestbook %}
{# 验证码将在此处插入 #}
<div>
<button type="submit">提交留言</button>
<button type="reset">重置</button>
</div>
</form>
Enhance security: CAPTCHA integration
To prevent malicious submissions and spam, the comment form usually needs to integrate a captcha function.The Anqi CMS has built-in captcha support, we just need to enable the captcha for comment posts in the background "Global Settings" -> "Content Settings" to integrate it into the frontend form.
The key to integrating captcha is to generate a unique captcha ID and the corresponding image, and to validate them together when the user submits. Below is the captcha integration template and JavaScript code snippet:
`twig
If your website uses jQuery, you can also write it like this: