作为一名资深的安企CMS网站运营人员，我深知在线留言功能对于用户互动和业务发展的重要性。一个配置良好、易于使用的留言系统不仅能提升用户体验，更是收集用户反馈、挖掘潜在客户的有效渠道。安企CMS提供了灵活的在线留言和自定义留言字段功能，让网站能够根据自身需求，轻松搭建起高效的用户沟通桥梁。

下面，我将详细介绍如何在AnQiCMS中配置在线留言和自定义留言字段功能。

启用与管理在线留言功能

在AnQiCMS中，在线留言是作为一个核心功能模块存在的。首先，我们需要在后台管理界面找到并启用它。

进入AnQiCMS后台，导航到功能管理部分。在这里，您会看到一个名为“网站留言管理”的选项。点击进入，即可对网站的留言功能进行全面配置。通常，这里会有一个总开关，允许您启用或禁用整个网站的留言系统。确保该功能已启用，以便您的访客能够提交留言。

在这个管理界面，您还可以查看所有用户提交的留言，并进行审批、回复、删除或导出等操作。同时，AnQiCMS也支持留言邮件提醒，这意味着当有新的留言提交时，系统可以自动发送邮件通知到指定的邮箱，确保您能及时响应用户需求。

配置自定义留言字段

AnQiCMS的留言功能强大之处在于其高度的可定制性。除了用户姓名、联系方式和留言内容这些标准字段外，您可以根据业务需要添加任意数量的自定义字段，以收集更具体、更有价值的信息。

在“网站留言管理”界面中，通常会有“自定义字段”或“表单字段”的设置入口。点击进入，您将能够：

  • 添加新字段：为您的留言表单新增一个信息收集项，例如“公司名称”、“产品兴趣”、“所在行业”等。
  • 编辑现有字段：修改已有字段的显示名称、类型或默认值。
  • 定义字段属性：
    • 参数名（显示名称）：这是字段在前台表单中向用户显示的名称，如“您的公司名称”。
    • 调用字段（FieldName）：这是一个内部标识，用于模板调用和数据存储。建议使用英文小写字母，以便在模板中准确引用。
    • 字段类型（Type）：AnQiCMS提供了多种字段类型来适应不同的数据输入需求：
      • 单行文本（text）：适用于简短的文本输入，如姓名、电话。
      • 数字（number）：仅允许输入数字。
      • 多行文本（textarea）：适用于较长的文本输入，如详细的留言内容。
      • 单项选择（radio）：提供预设选项，用户只能选择其中一项，如性别。
      • 多项选择（checkbox）：提供预设选项，用户可以选择多项，如兴趣爱好。
      • 下拉选择（select）：提供下拉菜单供用户选择其中一项，如所在地区。
    • 是否必填（Required）：决定用户在提交留言时是否必须填写该字段。
    • 默认值（Content/Items）：对于单选、多选和下拉选择类型的字段，您可以在这里设置具体的选项值，每个选项占据一行。对于文本或数字类型，这里可以设置提示文本。

通过这些灵活的配置，您可以设计出最符合您网站需求的留言表单。

前端模板集成与显示

自定义字段在后台配置完成后，需要通过前端模板标签才能在前台页面上正确展示出来。AnQiCMS使用Django模板引擎语法，通过特定的标签来调用数据。

默认的在线留言页面通常位于/template目录下的guestbook/index.html或guestbook.html文件。您可以通过编辑这些模板文件，来定制留言表单的显示样式和布局。

核心的留言表单标签是{% guestbook fields %}。这个标签会获取您在后台配置的所有留言字段，并将其作为fields变量提供给模板进行循环渲染。

以下是一个标准的前端模板代码示例，展示如何动态生成留言表单，同时包括了常规的用户信息字段：

<form method="post" action="/guestbook.html">
    {# 如果希望后端返回JSON格式而非HTML，可以添加此隐藏字段 #}
    <input type="hidden" name="return" value="html">

    {# 循环输出后台配置的自定义留言字段 #}
    {% guestbook fields %}
        {% for item in fields %}
        <div class="form-group">
            <label for="{{ item.FieldName }}">{{ item.Name }}{% if item.Required %}<span style="color: red;">*</span>{% endif %}</label>
            <div>
                {% if item.Type == "text" or item.Type == "number" %}
                <input type="{{ item.Type }}" name="{{ item.FieldName }}" id="{{ item.FieldName }}"
                       {% if item.Required %}required{% endif %} placeholder="{{ item.Content }}" autocomplete="off" class="form-control">
                {% elif item.Type == "textarea" %}
                <textarea name="{{ item.FieldName }}" id="{{ 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 forloop.Counter == 1 %}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 }}" id="{{ item.FieldName }}" class="form-control">
                    {%- for val in item.Items %}
                    <option value="{{ val }}">{{ val }}</option>
                    {%- endfor %}
                </select>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    {% endguestbook %}

    {# 添加验证码功能，提升安全性 #}
    <div class="form-group" style="display: flex; align-items: center;">
      <input type="hidden" name="captcha_id" id="captcha_id">
      <input type="text" name="captcha" required placeholder="请填写验证码" class="form-control" style="flex: 1; margin-right: 10px;">
      <img src="" id="get-captcha" style="width: 120px; height: 40px; cursor: pointer; border: 1px solid #ccc;" alt="验证码" />
      <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.error('获取验证码失败:', err));
        });
        document.getElementById('get-captcha').click(); // 页面加载时自动获取验证码
      </script>
    </div>

    <div class="form-group">
        <button type="submit" class="btn btn-primary">提交留言</button>
        <button type="reset" class="btn btn-default">重置</button>
    </div>
</form>

这段代码会遍历所有在后台配置的留言字段，并根据其类型生成相应的HTML表单元素。同时，我还加入了验证码功能，以有效防止垃圾信息提交。

提交后的处理与优化

用户提交留言后，数据会发送到/guestbook.html这个默认接口进行处理。AnQiCMS会在后台保存这些留言，并根据您的配置进行邮件通知。

为了优化用户体验，您可以在前端通过JavaScript对表单进行初步验证（例如检查必填项、格式等），并在提交成功或失败后向用户提供明确的反馈。例如，可以弹出一个提示框告知用户“留言已成功提交，感谢您的宝贵意见！”或“留言提交失败，请检查您的输入”。

通过以上步骤，您就可以在AnQiCMS中全面配置在线留言和自定义留言字段功能，为您的网站访客提供一个高效、友好的互动平台。

常见问题

如何为留言表单添加验证码？

为了增强留言功能的安全性，防止垃圾信息，您可以在AnQiCMS后台的全局设置中开启留言验证码功能。同时，需要在前端留言表单的模板文件中，按照文档中tag-captcha.md提供的方法，添加验证码相关的HTML元素和JavaScript代码，包括一个隐藏的captcha_id字段、一个captcha输入框以及一个用于显示验证码图片的img标签，并绑定点击事件来刷新验证码。

如何查看和管理用户提交的留言？

所有用户通过前端表单提交的留言都会汇集到AnQiCMS后台进行统一管理。您只需登录后台，导航至“功能管理”菜单下的“网站留言管理”选项。在这里，您可以浏览所有留言列表，查看留言详情，并执行审核、回复、删除或批量导出留言数据等操作。

如果我想在网站的不同页面展示不同的留言表单字段，AnQiCMS是否支持？

AnQiCMS的{% guestbook fields %}标签默认会获取后台“网站留言管理”中统一配置的所有自定义字段。如果需要在不同页面展示不同的留言字段，一种常见的方法是，在后台配置所有可能用到的字段，然后在前端模板中通过条件判断（如{% if item.FieldName == 'specific_field_name' %}）来选择性地渲染特定页面所需的字段。或者，也可以考虑创建多个内容模型或单页面，并为每个页面定制专门的联系表单，但这会超出“网站留言管理”模块的范畴，需要更深层次的模板和后台内容模型定制。