在网站运营中，一个高效便捷的留言表单是用户与网站互动的重要桥梁。它不仅收集用户反馈，也是潜在客户获取信息的入口。AnQiCMS作为一个企业级内容管理系统，在这方面提供了强大且灵活的功能，让我们可以轻松地在模板中生成和管理留言表单。
AnQiCMS留言表单功能概览
AnQiCMS内置了完善的在线留言功能，并且自v2.0.0-alpha3版本起，便支持了自定义留言字段。这意味着我们可以根据实际业务需求，灵活地定义表单中需要收集的信息，无论是基础的用户姓名、联系方式，还是更具体的咨询内容、产品偏好等，都能轻松实现。后台的“网站留言管理”模块则统一管理所有提交的留言，方便查阅和处理。
模板层面：生成留言表单的关键标签——guestbook
要在AnQiCMS模板中显示留言表单，核心是使用guestbook标签。这个标签能够动态地获取后台配置的留言表单字段，并将其结构化地输出，供我们在前端模板中进行渲染。
使用guestbook标签的基本语法是：
{% guestbook fields %} ... {% endguestbook %}
在这里，fields是我们自定义的一个变量名，它会承载从后台获取到的所有留言表单字段数据，这些数据是一个数组对象，我们需要通过for循环来遍历它。
guestbook标签支持一个可选参数siteId，通常情况下无需填写，除非您在多站点环境下需要调用特定站点的留言表单配置。
遍历fields变量时，每个item（即每个表单字段）都包含以下关键属性，这些属性决定了表单元素的类型和行为：
Name：表单字段的中文名称，用于显示给用户。FieldName：表单字段的变量名，用于后端接收数据时识别，通常是英文。Type：表单字段的类型，决定了渲染成哪种HTML输入元素，例如：text：单行文本输入框。number：数字输入框。textarea：多行文本输入区。radio：单选按钮。checkbox：多选按钮。select：下拉选择框。
Required：一个布尔值，表示该字段是否为必填项。Content：字段的默认值或占位符文本。Items：当Type为radio、checkbox或select时，此属性包含所有可选值的数组。
实际操作：如何在模板中构建留言表单
了解了guestbook标签的结构后，我们就可以在guestbook/index.html（或您自定义的留言页面模板文件，如guestbook.html）中，编写HTML和模板代码来生成留言表单了。
以下是一个动态生成表单的完整示例，它会根据后台配置自动渲染出不同的输入元素：
<form method="post" action="/guestbook.html">
<input type="hidden" name="return" value="html"> {# 可选，指定后端返回html或json #}
{% guestbook fields %}
{% for item in fields %}
<div class="form-group">
<label for="{{ item.FieldName }}">{{ item.Name }}{% if item.Required %}<span class="text-danger">*</span>{% endif %}</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" class="form-control">
{% elif item.Type == "textarea" %}
<textarea name="{{ item.FieldName }}"
{% if item.Required %}required{% endif %}
placeholder="{{ item.Content }}" rows="5" class="form-control"></textarea>
{% elif item.Type == "radio" %}
{% for val in item.Items %}
<label class="radio-inline">
<input type="{{ item.Type }}" name="{{ item.FieldName }}" value="{{ val }}" {% if loop.first %}checked{% endif %}> {{ val }}
</label>
{% endfor %}
{% elif item.Type == "checkbox" %}
{% for val in item.Items %}
<label class="checkbox-inline">
<input type="{{ item.Type }}" name="{{ item.FieldName }}[]" value="{{ val }}"> {{ val }}
</label>
{% endfor %}
{% elif item.Type == "select" %}
<select name="{{ item.FieldName }}" class="form-control">
{% for val in item.Items %}
<option value="{{ val }}">{{ val }}</option>
{% endfor %}
</select>
{% else %}
{# 如果有其他未知类型，可以提供一个默认处理方式 #}
<input type="text" name="{{ item.FieldName }}"
{% if item.Required %}required{% endif %}
placeholder="{{ item.Content }}" autocomplete="off" class="form-control">
{% endif %}
</div>
</div>
{% endfor %}
{% endguestbook %}
{# 验证码部分，增强安全性 #}
<div class="form-group captcha-group">
<label for="captcha">验证码<span class="text-danger">*</span></label>
<div class="input-group">
<input type="hidden" name="captcha_id" id="captcha_id">
<input type="text" name="captcha" id="captcha" required placeholder="请输入验证码" class="form-control">
<span class="input-group-btn">
<img src="" id="get-captcha" alt="验证码" style="cursor: pointer; height: 34px;">
</span>
</div>
</div>
<script>
// 非jQuery版本
document.getElementById('get-captcha').addEventListener("click", function () {
fetch('/api/captcha')
.then(response => response.json())
.then(res => {
document.getElementById('captcha_id').value = res.data.captcha_id;
document.getElementById('get-captcha').src = res.data.captcha;
})
.catch(err => console.error('Error loading captcha:', err));
});
document.getElementById('get-captcha').click(); // 页面加载时自动获取一次验证码
</script>
{# 如果您网站使用了 jQuery，也可以这样写 #}
{#
<script>
$(function() {
$('#get-captcha').on("click", function () {
$.get('/api/captcha', function(res) {
$('#captcha_id').val(res.data.captcha_id);
$('#get-captcha').attr("src", res.data.captcha);
}, 'json');
}).trigger('click'); // 页面加载时自动获取一次验证码
});
</script>
#}
<div class="form-group">
<button type="submit" class="btn btn-primary">提交留言</button>
<button type="reset" class="btn btn-default">重置</button>
</div>
</form>
提交表单的注意事项：
- 表单的
action属性应指向/guestbook.html。 method属性必须设置为post。- 除了动态生成的自定义字段外，通常会包含一些通用的必填字段，如
user_name（留言者姓名）和contact（联系方式），它们是AnQiCMS留言功能内置的，建议在后台自定义字段时也创建对应字段，或者在模板中手动添加它们以确保数据完整性。 return隐藏字段用于指定后端在处理完表单后返回的数据格式，html表示返回HTML页面，json表示返回JSON数据，方便前端进行异步处理。
添加验证码增强安全性：
为了有效防止垃圾留言，AnQiCMS支持集成验证码功能。在后台开启留言评论验证码后，只需在留言表单中加入验证码相关的HTML和JavaScript代码即可。上述代码示例中已经包含了验证码的实现方式，它会请求/api/captcha接口获取验证码图片和对应的captcha_id，用户需要填写图片中显示的验证码才能成功提交。
自定义表单样式与布局
尽管guestbook标签为我们生成了表单结构，但其默认样式通常比较朴素。我们可以利用HTML和CSS知识，结合标签输出的结构，对表单进行美化和布局。例如，可以为div和label等元素添加CSS类，或者通过外部CSS文件进行统一的样式管理。AnQiCMS的模板制作约定鼓励将样式、JS脚本等静态资源存放在/public/static/目录，这使得前端资源管理清晰有序。
留言提交后的处理
当用户提交留言后，AnQiCMS的后端会自动接收并处理这些数据。管理员可以在后台的“网站留言管理”模块中查看、管理和回复这些留言。系统也可能配置邮件提醒功能，确保留言能被及时发现和处理。
总之，AnQiCMS通过其灵活的guestbook标签和后台管理功能，为网站留言表单的生成、显示和管理提供了极大的便利。无论是简单的反馈表单，还是复杂的咨询表格，都能在AnQiCMS的框架下高效搭建，并确保安全性和可管理性。
常见问题解答 (FAQ)
1. 如何自定义留言表单中需要收集的字段？
答：您可以通过登录AnQiCMS后台管理界面，在”功能管理” > “网站留言”模块中，找到“自定义留言字段”的设置项。