安企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