如何构建一个自定义的网站留言表单？

网站留言表单是网站与访客互动的重要桥梁，无论是收集用户反馈、客户咨询还是其他互动需求，一个设计良好且功能完善的留言表单都至关重要。在安企CMS中，构建自定义留言表单远比你想象的要简单和灵活。系统内置的“网站留言”功能，提供了一个强大的基础框架，允许我们根据实际需求进行深度定制。

接下来，我们将详细探讨如何在安企CMS中构建一个满足你特定需求的自定义留言表单。

一、在后台配置留言表单字段

要开始构建留言表单，我们首先需要进入安企CMS的后台管理界面。找到并点击左侧菜单栏中的“功能管理”，然后选择“网站留言管理”。这里是所有留言表单相关设置的中心。

1. 基础字段： 通常，系统会提供一些基础字段，如访客姓名（user_name）、联系方式（contact）和留言内容（content）。这些足以满足大多数网站的基本留言需求，并且它们是默认存在的，你无需额外创建。

2. 自定义字段： 然而，如果你的业务有更独特的访客信息收集需求，安企CMS的强大之处就体现在其对自定义字段的灵活支持上。你可以根据实际情况添加更多字段，例如：

• 文本类型（text）：用于收集简短的文本信息，如公司名称、职位等。
• 数字类型（number）：用于收集纯数字信息，如年龄、预算金额等。
• 多行文本（textarea）：用于收集详细的描述性内容，如项目需求、建议等。
• 单项选择（radio）：提供预设选项，访客只能选择其中一项，例如“性别”、“产品类型”。
• 多项选择（checkbox）：提供预设选项，访客可以选择多项，例如“感兴趣的服务”、“产品功能”。
• 下拉选择（select）：提供一个下拉菜单供访客选择预设选项。

在添加自定义字段时，你可以设置字段的名称（用于后台和模板显示）、对应的字段变量名（用于数据存储和模板调用），并指定该字段是否为必填项。对于单选、多选和下拉选择类型的字段，你还需要设置它们的默认值，即提供给访客选择的各项内容，每项内容占一行。

这些设置完成后，表单的数据结构就已经在后台搭建完毕了。后台的配置直观且易于操作，只需几步就能完成字段的增删改查。

二、创建和定制留言表单模板

后台字段配置完毕后，我们需要将这些字段呈现在网站前端，形成一个可供访客填写的表单。

1. 模板文件位置： 根据安企CMS的模板约定，留言表单的模板文件通常位于你的当前模板目录下的 guestbook/index.html。如果该文件不存在，你可以手动创建一个。

2. 核心模板标签：guestbook： 安企CMS提供了一个专门的guestbook模板标签，它能够智能地获取你在后台定义的留言字段。你可以通过循环这个标签返回的fields变量，动态地生成表单元素。

这是一个基本的留言表单模板结构示例：

<form method="post" action="/guestbook.html">
    {% 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 }}" name="{{ item.FieldName }}" id="{{ item.FieldName }}"
                       {% if item.Required %}required{% endif %}
                       placeholder="{{ item.Content }}" autocomplete="off" class="form-control">
                {% elif item.Type == "textarea" %}
                <textarea name="{{ item.FieldName }}" id="{{ 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 %}
                    <label>
                        <input type="{{ item.Type }}" 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="{{ item.Type }}" name="{{ item.FieldName }}[]" value="{{ val }}"
                               {% if item.Required %}required{% endif %}> {{ val }}
                    </label>
                    {% endfor %}
                {% elif item.Type == "select" %}
                <select name="{{ item.FieldName }}" id="{{ 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">
            <button type="submit" class="btn btn-primary">提交留言</button>
            <button type="reset" class="btn btn-secondary">重置</button>
        </div>
    {% endguestbook %}
</form>

在上面的代码中：

• <form method="post" action="/guestbook.html"> 定义了表单的提交方式和目标地址。
• {% guestbook fields %} 标签获取后台定义的表单字段，并将其赋值给fields变量。
• {% for item in fields %} 循环遍历每一个字段。
• {{ item.Name }} 显示字段的中文名称。
• {{ item.FieldName }} 作为input或textarea的name和id属性值。
• {% if item.Required %}required{% endif %} 根据后台设置，自动添加HTML5的required属性。
• placeholder="{{ item.Content }}" 将后台设置的默认值作为提示文本。
• 根据item.Type的不同，我们生成了不同的HTML表单元素，如text、number、textarea、radio、checkbox和select。特别是对于多选、单选和下拉选择，我们再次循环item.Items来生成各个选项。

通过这种方式，你后台添加或修改任何字段，前端表单都会自动更新，大大提高了维护效率。

三、表单的进一步增强与安全防护

一个美观且功能完整的留言表单还需考虑用户体验和安全性。

1. 添加验证码： 为了有效防止恶意提交或垃圾信息，为留言表单添加验证码是一个非常重要的措施。

• 后台开启： 首先，请确保在安企CMS后台的“功能管理”->“网站留言管理”中启用了验证码功能。
• 模板集成： 在你的guestbook/index.html模板中，你需要添加验证码的显示区域和相关的JavaScript代码。

以下是集成验证码的模板代码示例（你可以根据自己的前端框架选择原生JS或jQuery版本）：

原生JavaScript版本：

”`twig

<input type="hidden" name="captcha_id" id="captcha_id">
<input type="text" name="captcha" required placeholder="请填写验证码" class="form-control" style="flex: 1; margin-right: 10px;">
<img src="" id="get-captcha" style="width: 150px; height: 40px; cursor: pointer; border-radius: 4px; border: 1px solid #ddd;" alt="验证码">
<script>
    document.getElementById('get-captcha').addEventListener("click", function () {
        fetch('/api/captcha')
            .then(response => response.json())
            .