在 AnQiCMS 中，建立一个能与访客互动、收集反馈的留言表单，并灵活配置自定义字段，是一项非常实用的功能。AnQiCMS 提供了简洁高效的方式来实现这一目标，无论是后台设置还是前端展示，都能轻松上手。

后台启用和配置留言功能

通常，当你希望网站访客能与你取得联系，或者收集他们的反馈时，留言表单便是首选。在 AnQiCMS 中启用和配置留言功能，首先需要进入后台管理界面。

在后台界面的左侧导航栏中，找到“功能管理”菜单，点击后，你会看到一个名为“网站留言管理”的选项。这里就是你管理和配置留言表单的核心区域。进入此页面后，你可以添加、编辑或删除留言表单的字段。

AnQiCMS 允许你根据实际需求自定义留言表单的字段。这就像你在设计一份问卷，可以灵活设置各种问题类型。比如，你可能需要访客填写他们的姓名、联系电话、邮箱地址，或者对某个产品服务的意见。

创建自定义字段时，你可以选择多种字段类型：

  • 单行文本（text）：适用于姓名、简短问题回答等。
  • 数字（number）：如果你需要收集数量、年龄等数字信息。
  • 多行文本（textarea）：非常适合访客输入长篇意见或详细描述。
  • 单项选择（radio）：提供几个预设选项，访客只能选择其中一个。
  • 多项选择（checkbox）：提供多个选项，访客可以选择一个或多个。
  • 下拉选择（select）：同样提供预设选项，以下拉菜单形式展示。

对于选择类型的字段（单选、多选、下拉），你可以在后台直接设定它们的默认值，这些默认值将作为前端显示的可选项目。同时，你可以标记任何字段为“必填”，确保收集到关键信息。这种灵活性使得你可以为各种业务场景创建定制化的留言表单。

此外，为了防止恶意提交或垃圾信息，为留言表单启用验证码是一个明智的选择。你可以在后台的“全局设置”中，进入“内容设置”选项，找到并开启验证码功能。一旦开启，留言表单在提交时就会要求用户输入验证码。

你可能还希望在收到新留言时能及时获得通知。AnQiCMS 同样支持配置留言邮件提醒功能，确保你不会错过任何重要的客户反馈。

前端模板中显示留言表单

留言功能的后端配置完成后，接下来就是让它在前台页面上实际显示出来。AnQiCMS 采用模板驱动的方式来展示内容，所以你需要修改或创建一个专门的留言页面模板。

在你的模板目录中，通常会有一个 guestbook/index.html（或者如果你的模板采用扁平化结构，可能是 guestbook.html）文件，这个文件就是用来渲染留言表单页面的。如果你没有这个文件，可以自行创建一个。

在模板中，你需要使用 AnQiCMS 提供的 guestbook 标签来动态获取后台配置的留言字段。这个标签的使用方式非常直观：

<form method="post" action="/guestbook.html">
    {% guestbook fields %}
        {% for item in fields %}
        <div>
            <label>{{item.Name}}</label>
            <div>
                {% if item.Type == "text" || 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>
        {% endfor %}

    {# 验证码集成，如果后台开启了验证码功能，则需要添加以下代码 #}
    <div style="display: flex; clear: both; margin-top: 15px;">
        <input type="hidden" name="captcha_id" id="captcha_id">
        <input type="text" name="captcha" required placeholder="请填写验证码" style="flex: 1; padding: 10px; border: 1px solid #ccc;">
        <img src="" id="get-captcha" style="width: 150px;height: 50px;cursor: pointer; margin-left: 10px; border: 1px solid #ccc;" />
        <script>
            document.getElementById('get-captcha').addEventListener("click", function (e) {
              fetch('/api/captcha')
                      .then(response => response.json())
                      .then(res => {
                        document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id);
                        document.getElementById('get-captcha').setAttribute("src", res.data.captcha);
                      }).catch(err => console.log(err));
            });
            document.getElementById('get-captcha').click(); // 页面加载时自动获取验证码
        </script>
    </div>

    <div style="margin-top: 20px;">
        <button type="submit" style="padding: 10px 20px; background-color: #007bff; color: white; border: none; cursor: pointer;">提交留言</button>
        <button type="reset" style="padding: 10px 20px; background-color: #6c757d; color: white; border: none; cursor: pointer; margin-left: 10px;">重置</button>
    </div>
</form>

在这个代码片段中，{% guestbook fields %} 标签会加载后台配置的所有字段信息。然后，通过 {% for item in fields %} 循环，我们可以根据 item.Type（字段类型）动态地生成相应的 HTML 输入元素。item.Name 用于显示字段的中文名称，item.FieldName 则是表单提交时使用的字段名，item.Required 则决定了是否需要添加 HTML5 的 required 属性。

如果你在后台启用了验证码功能，那么一定要确保将验证码相关的 input 字段和 JavaScript 代码也加入到表单中，以便动态加载验证码图片并进行验证。

表单的 action 属性应指向 /guestbook.html，这是 AnQiCMS 接收留言提交的默认处理地址。提交后，你可以通过后端配置让它返回 HTML 页面，或者返回 JSON 数据，方便前端进行处理。

留言提交后的处理

当访客填写并提交留言后，所有信息都会被安全地存储在你的 AnQiCMS 后台的“网站留言管理”中。你可以在那里查看所有收到的留言，进行审核、回复或删除等操作。

通过上述步骤，你不仅可以在 AnQiCMS 中轻松启用一个功能完善的网站留言表单，还能根据品牌和业务需求，灵活地自定义字段，提升网站的互动性和信息收集能力。这种深度定制化的能力，正是 AnQiCMS 致力于提供高效、可定制内容管理解决方案的体现。

常见问题解答 (FAQ)

1. 我提交的留言在哪里查看？ 所有通过前台表单提交的留言，都会存储在 AnQiCMS 后台的“功能管理”菜单下的“网站留言管理”中。进入该页面，你可以查看、管理和回复所有收到的留言。

2. 如何为留言表单的单选、多选或下拉字段设置选项？ 在 An