在网站运营中，与访问者建立有效的沟通渠道至关重要，而留言功能正是实现这一目标的关键工具之一。它不仅能帮助网站收集用户反馈、解答疑问，还能促进用户参与，提升网站的互动性与粘性。对于使用安企CMS（AnQiCMS）的用户来说，系统内置的留言功能提供了便捷且灵活的解决方案，让您无需编写复杂代码，即可轻松实现留言表单的展示与提交。

安企CMS留言功能概览

安企CMS的留言功能设计得相当人性化，它允许您在后台自定义留言表单的字段，包括文本、数字、多行文本、单选、多选、下拉选择等多种类型，以满足不同业务场景的需求。系统还支持验证码功能，有效防范垃圾信息，并提供完善的后台留言管理，方便您查看、回复和导出用户留言。

第一部分：如何在网站前端显示留言表单

要在您的安企CMS网站上展示留言表单，首先需要了解其模板结构。安企CMS通常会将在线留言页面的模板文件命名为 guestbook/index.html 或 guestbook.html，这些文件位于您当前使用的模板主题文件夹中。

在这些模板文件中，您会发现一个名为 guestbook 的关键标签。这个标签是安企CMS提供的一个强大工具，能够动态地获取您在后台配置的所有留言字段，并将其传递给前端模板。它的基本使用方式是：{% guestbook fields %}...{% endguestbook %}。

这里的 fields 是一个数组对象，包含了您在后台为留言表单定义的每一个字段的详细信息。每个 item 在 fields 数组中都拥有以下几个重要属性：

  • item.Name：这是字段在前端显示的名称，比如“您的姓名”、“联系方式”。
  • item.FieldName：这是表单提交时，该字段对应的 name 属性值，是后端识别字段的关键。
  • item.Type：指示字段的类型，例如 text (单行文本)、number (数字)、textarea (多行文本)、radio (单选)、checkbox (多选) 或 select (下拉选择)。
  • item.Required：一个布尔值，表示该字段是否为必填项。
  • item.Content：字段的默认值或占位符文本。
  • item.Items：如果字段类型是 radio、checkbox 或 select，这个属性将包含一个数组，列出所有可选项。

利用这些信息，您可以编写一个 for 循环来动态生成留言表单，从而避免每次在后台调整字段后都手动修改前端代码。一个典型的动态表单生成代码片段可能看起来像这样：

<form method="post" action="/guestbook.html">
{% guestbook fields %}
    {% for item in fields %}
    <div>
        <label>{{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}}" title="{{val}}"> {{val}}
            {%- endfor %}
            {% elif item.Type == "checkbox" %}
            {%- for val in item.Items %}
            <input type="{{item.Type}}" name="{{item.FieldName}}[]" value="{{val}}" title="{{val}}"> {{val}}
            {%- endfor %}
            {% elif item.Type == "select" %}
            <select name="{{item.FieldName}}">
                {%- for val in item.Items %}
                <option value="{{val}}">{{val}}</option>
                {%- endfor %}
            </select>
            {% endif %}
        </div>
    </div>
    {% endfor %}
    <div>
        <div>
            <button type="submit">提交留言</button>
            <button type="reset">重置</button>
        </div>
    </div>
</form>

当然，如果您更倾向于完全自定义表单的 HTML 结构和样式，也是完全可行的。在这种情况下，您只需确保每个表单元素的 name 属性与后台定义的 FieldName 保持一致。安企CMS会根据这些 name 属性来收集和处理留言数据。例如，系统会预设一些核心字段，如 user_name（留言者姓名）、contact（联系方式）和 content（留言内容），即使您没有在后台显式定义它们，也可以在前端直接使用这些 name 属性来构建表单。

第二部分：如何提交留言

当用户填写完留言表单并点击提交时，表单数据需要发送到安企CMS的后端进行处理。提交留言的 action 地址固定为 /guestbook.html，并且通常使用 POST 方法。

除了上述提到的 user_name、contact 和 content 等核心字段外，如果您在后台自定义了其他留言字段，那么这些字段的 name 属性也需要与后台定义的 FieldName 保持一致，以便后端能够正确接收和存储数据。

此外，您还可以通过添加一个隐藏的 input 字段来控制后端返回的响应格式：

<input type="hidden" name="return" value="html">

将 value 设置为 html 将使服务器返回一个完整的 HTML 页面作为响应（通常是提交成功或失败的提示页面），而设置为 json 则会返回一个 JSON 格式的数据，这在您需要通过 AJAX 异步提交表单时非常有用。

第三部分：增强留言安全性——添加验证码

为了防止恶意提交和垃圾留言，为留言表单添加验证码功能是很有必要的。安企CMS内置了验证码支持，启用过程分为后台配置和前端集成两步。

1. 后台开启验证码： 您需要在安企CMS的后台管理界面中找到并开启留言验证码功能。通常这会在“后台设置”或“功能管理”相关的菜单中进行配置。

2. 前端集成验证码： 在留言表单的模板文件中，您需要添加以下 HTML 元素和 JavaScript 代码：

  • 一个隐藏的 input 字段，用于存储验证码的唯一标识符（captcha_id）。
  • 一个文本 input 字段，用于用户输入验证码（captcha）。
  • 一个 <img> 标签，用于显示验证码图片，并绑定一个点击事件，以便用户点击时刷新验证码。
  • 一段 JavaScript 代码，负责向 /api/captcha 接口发起请求，获取新的 captcha_id 和验证码图片URL，并更新到页面上。

以下是一个前端集成验证码的示例代码片段（假设您正在使用原生 JavaScript）：

”`twig