如何在模板中构建留言表单，并动态显示后台自定义的字段？

在网站运营中，留言表单是与用户互动、收集反馈和建立联系的重要桥梁。安企CMS（AnQiCMS）提供了强大且灵活的留言功能，不仅允许用户快速搭建基础表单，更支持通过后台自定义字段，让表单能够动态适应各种业务需求。本文将深入探讨如何在安企CMS的模板中构建这样一个留言表单，并动态地显示这些来自后台的自定义字段。

一、后台准备：配置留言表单的自定义字段

在着手模板开发之前，我们需要先在安企CMS的后台管理系统中进行一些基础配置。这些配置是表单能够动态显示自定义字段的关键。

1. 进入留言管理界面：登录安企CMS后台，导航至“功能管理”菜单，找到并点击“网站留言”选项。
2. 设置表单额外字段：在“网站留言”页面，您会看到一个名为“表单额外字段设置”的区域。这里就是我们定义自定义字段的核心所在。
   • 添加新字段：点击添加按钮，为您的留言表单新增字段。
   • 参数名（显示名称）：这是字段在后台和前端模板中用于展示给用户的名称，比如“您的行业”、“意向产品”等。
   • 调用字段（FieldName）：这是字段在数据库中存储和模板中引用的唯一标识。建议使用英文小写字母，例如your_industry、product_interest。
   • 字段类型：安企CMS提供了多种字段类型来满足不同需求：
     • 单行文本 (text)：适用于短文本输入，如姓名、邮箱。
     • 数字 (number)：仅允许输入数字，如电话、数量。
     • 多行文本 (textarea)：适用于长文本输入，如详细描述、具体需求。
     • 单项选择 (radio)：提供多个选项，用户只能选择其中一个。
     • 多项选择 (checkbox)：提供多个选项，用户可以选择多个。
     • 下拉选择 (select)：提供一个下拉菜单，用户从预设选项中选择一个。
   • 是否必填：根据需求勾选，标记为必填的字段在用户提交时会进行验证。
   • 默认值/选项：对于单行文本、数字、多行文本，这里可以设置默认的提示内容（placeholder）。对于选择类字段（单项、多项、下拉），每行输入一个选项，作为用户可选择的值。
3. 配置留言验证码（可选但推荐）：为了有效防止垃圾信息和恶意提交，建议在“网站留言”设置中，开启留言验证码功能。这通常包括选择验证码类型和样式。开启后，后续在模板中也需要相应地添加验证码的显示和输入框。

通过以上步骤，您就为留言表单定义好了所需的各种字段及其属性。

二、模板中的实现：动态呈现自定义字段

完成后台配置后，接下来就是编辑前端模板文件，让这些自定义字段能够动态地显示在用户面前，并收集用户输入。

安企CMS的留言表单模板文件通常位于您当前使用主题下的guestbook/index.html或guestbook.html（具体路径请参考模板目录结构约定）。

1. 使用guestbook标签获取字段数据： 在模板文件中，安企CMS提供了一个专门的guestbook标签来获取后台配置的留言字段。它会将所有字段作为一个数组对象传递给您定义的变量。

   <form method="post" action="/guestbook.html">
       {% guestbook fields %}
           {# 在这里循环遍历fields数组，动态生成表单字段 #}
       {% endguestbook %}
       {# 提交按钮 #}
       <div>
           <button type="submit">提交留言</button>
           <button type="reset">重置</button>
       </div>
   </form>
   

   在上述代码中，fields就是您定义所有留言字段的数组。

2. 动态生成表单字段： fields数组中的每一个item都代表一个自定义字段，它包含了我们之前在后台配置的Name（显示名称）、FieldName（调用字段）、Type（字段类型）、Required（是否必填）和Content（默认值/选项列表）。我们可以使用for循环和if/elif/else条件判断来根据字段类型动态生成不同的HTML表单元素。

   ”`twig

   {# 隐藏域，用于后端识别返回格式，默认为html，可改为json #}
   <input type="hidden" name="return" value="html">
   
   {# 假设您有常规的用户名、联系方式、留言内容字段 #}
   <div class="form-group">
       <label for="user_name">您的姓名</label>
       <input type="text" id="user_name" name="user_name" required placeholder="请填写您的姓名" class="form-control">
   </div>
   <div class="form-group">
       <label for="contact">联系方式</label>
       <input type="text" id="contact" name="contact" required placeholder="您的电话或邮箱" class="form-control">
   </div>
   <div class="form-group">
       <label for="content">留言内容</label>
       <textarea id="content" name="content" required rows="5" placeholder="请留下您的宝贵留言" class="form-control"></textarea>
   </div>
   
   {# 动态生成自定义字段 #}
   {% guestbook fields %}
       {% for item in fields %}
       <div class="form-group">
           <label for="{{item.FieldName}}">{{item.Name}}</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 %} rows="3" placeholder="{{item.Content}}" class="form-control"></textarea>
               {# 单项选择 (radio) #}
               {% elif item.Type == "radio" %}
                   {%- for val in item.Items %}
                   <label class="radio-inline">
                       <input type="{{item.Type}}" name="{{item.FieldName}}" value="{{val}}" {% if item.Required %}required{% endif %}> {{val}}
                   </label>
                   {%- endfor %}
               {# 多项选择 (checkbox) #}
               {% elif item.Type == "checkbox" %}
                   {%- for val in item.Items %}
                   <label class="checkbox-inline">
                       {# 注意：多选框的name属性通常会加上[]以表示数组 #}
                       <input type="{{item.Type}}" name="{{item.FieldName}}[]" value="{{val}}" {% if item.Required %}required{% endif %}> {{val}}
                   </label>
                   {%- endfor %}
               {# 下拉选择 (select) #}
               {%