如何在网站上显示用户提交的留言表单？

安企CMS提供了一套高效且灵活的机制，帮助您在网站上轻松地展示和管理用户留言表单。无论是收集用户反馈、咨询，还是简单的互动留言，安企CMS都能让您快速实现这一功能，并根据业务需求进行个性化定制。

了解安企CMS留言功能

在安企CMS的后台管理界面中，您可以在“功能管理”菜单下找到“网站留言”选项。这里是您管理所有留言相关设置的核心区域，包括查看已提交的留言、自定义表单字段、以及配置留言提交后的行为等。

安企CMS的留言表单功能的一大亮点是支持自定义字段。这意味着您可以根据实际需求，添加各种类型的表单元素，如文本框、数字输入、多行文本、单选、多选和下拉选择框等。这些自定义字段将在前端模板中被动态识别和渲染，大大提升了表单的灵活性和适用性。

网站前端模板中，留言表单通常会放置在专门的留言页面，例如默认的 guestbook/index.html 或 guestbook.html 文件中。如果您正在开发自定义模板，可以在 /template 目录下的模板文件夹中创建或编辑这些文件。

在模板中展示留言表单

要在网站页面上显示留言表单，我们需要借助安企CMS提供的 guestbook 标签。这个标签会为您准备好在后台配置的所有留言字段信息，并将它们存储在一个名为 fields 的变量中。

以下是在模板中动态生成留言表单的示例代码：

<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 lay-verify="required"{% endif %} placeholder="{{item.Content}}" autocomplete="off">
            {% elif item.Type == "textarea" %}
            <textarea name="{{item.FieldName}}" {% if item.Required %}required lay-verify="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}}">
            {%- endfor %}
            {% elif item.Type == "checkbox" %}
            {%- for val in item.Items %}
            <input type="{{item.Type}}" name="{{item.FieldName}}[]" value="{{val}}" title="{{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>

这段代码的核心逻辑是使用 {% for item in fields %} 循环遍历后台定义的每一个留言字段。在循环内部，根据 item.Type 的值（例如 text、textarea、radio 等），动态地渲染出相应的 HTML 表单元素。每个表单元素的 name 属性会设置为 item.FieldName，这是后端识别并处理数据的重要依据。item.Required 属性则用于判断该字段是否为必填项，并添加相应的 required 属性。

除了动态生成的自定义字段，留言表单还需要几个基本字段用于用户提交信息：

• user_name: 用户的名称
• contact: 用户的联系方式（如手机、邮箱等）
• content: 留言的具体内容

这些基本字段在上面的动态生成代码中并未直接体现，通常您可以在后台的留言表单设置中进行配置。如果您希望这些字段也以自定义的方式呈现，可以手动在 guestbook 标签循环之外添加这些 input 或 textarea 元素，确保它们的 name 属性符合后端要求（例如 name="user_name"）。

例如，您可以像这样手动添加基础的用户名和联系方式字段：

<form method="post" action="/guestbook.html">
  <input type="hidden" name="return" value="html"> {# 可选：指定后端返回html格式 #}
  <div>
    <label>您的姓名</label>
    <div>
      <input type="text" name="user_name" required placeholder="请填写您的姓名" autocomplete="off">
    </div>
  </div>
  <div>
    <label>您的联系方式</label>
    <div>
      <input type="text" name="contact" required placeholder="请填写您的手机号或邮箱" autocomplete="off">
    </div>
  </div>
  <div>
    <label>留言内容</label>
    <div>
      <textarea name="content" required placeholder="请输入您的留言" rows="5"></textarea>
    </div>
  </div>
  {# 动态生成的自定义字段，如同上述代码片段 #}
  {% guestbook fields %}
      {# ... 动态字段渲染逻辑 ... #}
  {% endguestbook %}
  <div>
      <button type="submit">提交留言</button>
      <button type="reset">重置</button>
  </div>
</form>

留言表单的提交与验证

留言表单的 action 属性应指向 /guestbook.html，并使用 POST 方法提交。当用户填写并提交表单后，安企CMS会自动接收并处理这些数据。

为了提高网站的安全性，防止垃圾信息提交，强烈建议为留言表单开启验证码功能。

添加验证码 (CAPTCHA)

1. 后台启用验证码：首先，您需要在安企CMS后台的“后台设置”->“内容设置”中，找到并开启留言评论验证码功能。

2. 模板集成验证码：在您的留言表单HTML中，找到合适的位置（例如提交按钮上方），插入以下代码片段。这段代码会负责加载并显示验证码图片，并处理验证码的刷新逻辑。

   <div style="display: flex; clear: both">
     <input type="hidden" name="captcha_id" id="captcha_id">
     <input type="text" name="captcha" required placeholder="请填写验证码" class="layui-input" style="flex: 1">
     <img src="" id="get-captcha" style="width: 150px;height: 56px;cursor: pointer;" />
     <script>
       // 普通 JavaScript 版本
       document.getElementById('get-captcha').addEventListener("click", function (e) {
         fetch('/api/captcha')
                 .then(response => {
                   return 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>
     {# 如果您的网站使用 jQuery，可以使用以下代码替换上面的 script 标签内容 #}
     {#
     <script>
       // jQuery 版本
       $('#get-captcha').on("click", function (e) {
         $.get('/api/captcha', function(res) {
           $('#captcha_id').attr("value", res.data.captcha_id)
           $('#get-captcha').attr("src", res.data.captcha)
         }, 'json')
       })
       $('#get-captcha').click();
     </script>
     #}
   </div>
   

集成这段代码后，您的留言表单将要求用户输入验证码，并在提交时进行验证，从而有效减少垃圾信息的干扰。

总结

通过上述步骤，您已经可以在安企CMS网站上成功展示一个功能完备且可定制的用户留言表单。安企CMS的灵活内容模型和强大的模板标签使得这一过程变得直观而高效。利用后台的便捷管理功能，您可以轻松收集和回应用户的宝贵意见和建议，从而更好地与网站访问者进行互动。

常见问题 (FAQ)

Q1: 我想自定义留言表单的字段，并在前台展示，应该怎么操作？ A1: 您可以在安