如何在安企CMS中构建和显示在线留言表单及其自定义字段？

安企CMS提供了一套强大而灵活的在线留言功能，不仅允许您构建基础的联系表单，还能根据业务需求深度定制各种字段，从而收集更精准的用户反馈。下面，我们将一起探索如何在安企CMS中轻松地构建和显示这些留言表单。

一、在安企CMS后台配置留言表单与自定义字段

要开始构建您的在线留言表单，首先需要进入安企CMS的后台管理界面。

1. 访问留言管理模块： 登录后台后，请导航至左侧菜单的“功能管理”区域，然后点击“网站留言”。这里是所有留言相关设置的集中地。
2. 默认字段与自定义字段： 安企CMS会为留言表单提供一些核心字段，例如用户姓名（user_name）、联系方式（contact）和留言内容（content）。除了这些基本信息，您可以根据实际业务需求，添加无限多的自定义字段。
   • 添加自定义字段： 在“网站留言”页面，您会找到添加新字段的选项。点击进入后，需要配置以下几项关键信息：
     • 字段名称： 这是用户在前台界面看到的字段标签，例如“您的行业”、“选择服务类型”等。请确保其清晰易懂。
     • 调用字段（FieldName）： 这是在模板代码中引用该字段的唯一标识符。建议使用英文小写字母和下划线组合，例如 your_industry。一旦设定，不建议随意更改，因为这会影响到前端模板的调用。
     • 字段类型： 安企CMS提供了多种字段类型以满足不同数据的收集需求，包括：
       • 单行文本（text）： 适用于短文本输入，如姓名、公司名称。
       • 数字（number）： 仅限数字输入，如年龄、预算金额。
       • 多行文本（textarea）： 适用于长文本输入，如详细描述、建议。
       • 单项选择（radio）： 用户只能从预设选项中选择一个。
       • 多项选择（checkbox）： 用户可以从预设选项中选择多个。
       • 下拉选择（select）： 用户通过下拉菜单选择一个选项。
     • 是否必填： 勾选此项，则该字段在前台提交时必须填写。
     • 默认值/选项值： 对于文本、数字和多行文本类型，这里可以设置一个默认提示值。对于单选、多选和下拉选择类型，这里则需要输入所有可选的选项，每个选项占一行。

通过这种方式，您可以构建出高度定制化的留言表单，无论是收集用户所在行业、具体需求，还是偏好的联系时间，都能轻松实现。

二、在前端模板中展示留言表单

后台配置完成后，下一步就是将精心设计的留言表单呈现在您的网站前台。安企CMS采用了灵活的模板标签系统，让这一过程变得简单。

1. 选择合适的模板文件： 您的在线留言表单通常会放置在一个专门的页面上。根据安企CMS的模板约定，默认的在线留言页面文件是 guestbook/index.html。您也可以选择将其嵌入到其他单页面（例如“联系我们”）或任何需要表单的页面中。

2. 使用 guestbook 标签获取字段： 在选定的模板文件中，您可以使用安企CMS提供的 guestbook 标签来获取后台配置的所有留言字段。这个标签会将所有字段作为一个数组对象传递给您。

   <form method="post" action="/guestbook.html" id="guestbookForm">
       {% guestbook fields %}
           {# 在这里循环输出每个字段 #}
       {% endguestbook %}
   
       {# 留言提交按钮 #}
       <div>
           <button type="submit">提交留言</button>
           <button type="reset">重置</button>
       </div>
   </form>
   

   action="/guestbook.html" 指明了表单提交的后台处理地址。

3. 循环渲染表单字段： fields 变量是一个数组，其中包含了您在后台配置的每一个字段的信息。您可以通过 for 循环遍历这个数组，并根据每个字段的类型动态生成相应的HTML表单元素。

   ”`twig

   {% 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 }}" id="{{ item.FieldName }}" name="{{ item.FieldName }}" {% if item.Required %}required{% endif %} placeholder="{{ item.Content }}" class="form-control">
               {% elif item.Type == "textarea" %}
               <textarea id="{{ item.FieldName }}" 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 %}
                   <input type="radio" id="{{ item.FieldName }}_{{ forloop.Counter }}" name="{{ item.FieldName }}" value="{{ val }}" {% if item.Required and forloop.Counter == 1 %}required{% endif %}>
                   <label for="{{ item.FieldName }}_{{ forloop.Counter }}">{{ val }}</label>
                   {% endfor %}
               {% elif item.Type == "checkbox" %}
                   {% for val in item.Items %}
                   <input type="checkbox" id="{{ item.FieldName }}_{{ forloop.Counter }}" name="{{ item.FieldName }}[]" value="{{ val }}" {% if item.Required and forloop.Counter == 1 %}required{% endif %}>
                   <label for="{{ item.FieldName }}_{{ forloop.Counter }}">{{ val }}</label>
                   {% endfor %}
               {% elif item.Type == "select" %}
               <select id="{{ item.FieldName }}" name="{{ item.FieldName }}" {% if item.Required %}required{% endif %} class="form-control">
                   {% for val in item.Items %}
                   <option value="{{ val }}">{{ val }}</option>
                   {% endfor %}
               </select>
               {% endif %}
           </div>
       </div>
       {% endfor %}
   
       {# 集成验证码，增强安全性 #}
       <div class="form-group captcha-group">
           <label for="captcha">验证码 <span class="text-danger">*</span></label>
           <div class="d-flex">
               <input type="hidden" name="captcha_id" id="captcha_id">
               <input type="text" name="captcha" required placeholder="请填写验证码" class="form-control captcha-input">
               <img src="" id="get-captcha" class="captcha-img" alt="验证码">
           </div>
           <script>
               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