在网站运营中，留言表单是与用户互动、收集反馈和线索的重要渠道。安企CMS（AnQiCMS）提供了灵活的留言功能，其中一项非常实用的能力就是允许我们在后台自定义表单字段，并将其无缝地呈现在前端的留言表单中，以满足不同业务场景下的个性化信息收集需求。

接下来，我们将详细探讨如何在安企CMS中实现这一功能。

一、在后台定义自定义留言字段

首先，我们需要进入安企CMS的后台管理界面，设置留言表单所需的自定义字段。

  1. 导航至留言表单管理： 登录后台后，请找到并点击左侧菜单中的“功能管理”，然后在下拉菜单中选择“网站留言”。这里是所有与网站留言相关设置的集中地。
  2. 创建或编辑自定义字段： 在“网站留言”页面，您会看到一个名为“自定义留言字段”的区域。点击进入后，您可以添加新的字段或编辑现有字段。
    • 参数名 (Name)： 这是在后台界面显示给管理员看的字段名称，例如“您的称谓”、“所属行业”、“咨询类型”等，建议使用直观的中文描述。
    • 调用字段 (FieldName)： 这是前端模板中用来标识这个字段的唯一变量名，也是表单提交时数据对应的键名。请务必使用英文小写字母，确保其唯一性，例如honorific、industry、inquiry_type。
    • 字段类型 (Type)： 安企CMS提供了多种字段类型来适应不同的输入需求，包括：
      • text (单行文本)：用于短文本输入，如姓名、电话。
      • number (数字)：只允许输入数字，如数量。
      • textarea (多行文本)：用于长文本输入，如详细留言内容。
      • radio (单项选择)：提供多个选项供用户单选。
      • checkbox (多项选择)：提供多个选项供用户多选。
      • select (下拉选择)：提供下拉菜单供用户单选。
    • 是否必填 (Required)： 勾选此项，则该字段在前端表单中成为必填项。
    • 默认值 (Content)： 对于单行文本和多行文本，这里可以设置提示文字（placeholder）。对于单选、多选、下拉选择类型，这里是定义选项内容的关键。每个选项请单独占一行输入，系统会自动将其解析为独立的选项。

完成字段定义后，保存设置。这些自定义字段就为前端表单的动态生成做好了准备。

二、在前端模板中动态显示自定义字段

定义好后台字段后，下一步就是在前端留言表单的模板文件中，利用安企CMS的模板标签来动态地获取并渲染这些字段。

  1. 找到留言表单模板： 通常，留言表单位于模板目录下的guestbook/index.html或类似命名的文件中。

  2. 使用guestbook标签获取字段： 安企CMS提供了一个专门用于获取留言表单字段的guestbook标签。您可以在表单的<body>部分使用它来循环遍历所有自定义字段：

    <form method="post" action="/guestbook.html">
    {# 默认必填字段，您可能需要根据模板实际情况调整 #}
    <div>
        <label>您的姓名</label>
        <input type="text" name="user_name" required placeholder="请填写您的姓名">
    </div>
    <div>
        <label>联系方式</label>
        <input type="text" name="contact" required placeholder="请填写您的联系方式">
    </div>
    <div>
        <label>留言内容</label>
        <textarea name="content" required rows="5" placeholder="请填写您的留言内容"></textarea>
    </div>


    {# 动态加载后台自定义字段 #}
    {% guestbook fields %}
        {% for item in fields %}
        <div>
            <label>{{ item.Name }}</label>
            <div>
                {# 根据字段类型渲染不同的表单元素 #}
                {% if item.Type == "text" or 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="3"></textarea>
                {% elif item.Type == "radio" %}
                    {%- for val in item.Items %}
                    <label><input type="radio" name="{{ item.FieldName }}" value="{{ val }}" {% if item.Required %}required{% endif %}> {{ val }}</label>
                    {%- endfor %}
                {% elif item.Type == "checkbox" %}
                    {%- for val in item.Items %}
                    <label><input type="checkbox" name="{{ item.FieldName }}[]" value="{{ val }}" {% if item.Required %}required{% endif %}> {{ val }}</label>
                    {%- endfor %}
                {% elif item.Type == "select" %}
                <select name="{{ item.FieldName }}" {% if item.Required %}required{% endif %}>
                    <option value="">请选择</option>
                    {%- for val in item.Items %}
                    <option value="{{ val }}">{{ val }}</option>
                    {%- endfor %}
                </select>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    {% endguestbook %}


    <div>
        <button type="submit">提交留言</button>
        <button type="reset">重置</button>
    </div>
</form>

  3. 解析代码示例：

    • {% guestbook fields %}：这个标签会从后台获取所有定义的自定义留言字段，并将其作为一个数组赋给变量fields。
    • {% for item in fields %}：我们通过for循环遍历fields数组中的每一个字段item。
    • {{ item.Name }}：显示字段的名称，这是后台设置的“参数名”。
    • name="{{ item.FieldName }}"：这是表单元素最重要的属性，它的值是后台设置的“调用字段”，确保提交时数据能正确地与后台字段关联。注意多选框checkbox的name需要加上[]，如name="{{ item.FieldName }}[]"，以便后台能接收到多个值。
    • type="{{ item.Type }}"：根据后台定义的字段类型动态设置前端input标签的type属性。
    • {% if item.Required %}required{% endif %}：如果后台设置为必填，这里会添加HTML5的required属性，浏览器会进行基础的非空验证。
    • placeholder="{{ item.Content }}"：将后台定义的默认值作为输入框的提示文本。
    • {% for val in item.Items %}：对于单选、多选和下拉选择类型，item.Items是一个包含所有选项值的数组，我们可以再次循环来生成radio、checkbox或option元素。

通过上述步骤，您就可以实现在安企CMS前端留言表单中灵活接收并显示后台自定义字段的功能。这样一来，无论您的业务需求如何变化，都能轻松调整留言表单以收集所需信息，极大地提升了网站的互动性和数据收集效率。

常见问题 (FAQ)

1. 我是否必须在模板中手动编写每个自定义字段的HTML代码？

不，正如文章中演示的，您可以使用guestbook模板标签和for循环来动态遍历并生成所有自定义字段的HTML代码。这样，无论您在后台添加或删除了多少字段，前端表单都会自动更新，无需手动修改模板文件，极大地提高了维护效率。

2. 如果自定义字段是选择类型（单选、多选、下拉），前端如何获取并显示这些选项？

当您在后台为选择类型（radio、checkbox、select）的字段定义选项时，每个选项请单独占一行输入。在前端模板中，通过guestbook标签获取到的item对象会包含一个item.Items属性，它是一个包含所有选项值的数组。您可以再次使用for循环遍历item.Items来动态生成这些选择项（<input type="radio">、<input type="checkbox">或<option>标签）。

3. 提交表单时，自定义字段的数据是如何发送到后台的？

当用户提交包含自定义字段的留言表单时，每个自定义字段的值会通过其HTML元素的name属性（即后台设置的“调用字段”item.FieldName）作为键，将用户输入或选择的数据发送到后台。安企CMS后台的留言管理功能会自动识别这些字段，并将数据存储起来，方便您查阅和管理。