AnQiCMS模板如何生成和显示网站的留言表单？

在网站运营中，一个高效便捷的留言表单是用户与网站互动的重要桥梁。它不仅收集用户反馈，也是潜在客户获取信息的入口。AnQiCMS作为一个企业级内容管理系统，在这方面提供了强大且灵活的功能，让我们可以轻松地在模板中生成和管理留言表单。

AnQiCMS留言表单功能概览

AnQiCMS内置了完善的在线留言功能，并且自v2.0.0-alpha3版本起，便支持了自定义留言字段。这意味着我们可以根据实际业务需求，灵活地定义表单中需要收集的信息，无论是基础的用户姓名、联系方式，还是更具体的咨询内容、产品偏好等，都能轻松实现。后台的“网站留言管理”模块则统一管理所有提交的留言，方便查阅和处理。

模板层面：生成留言表单的关键标签——guestbook

要在AnQiCMS模板中显示留言表单，核心是使用guestbook标签。这个标签能够动态地获取后台配置的留言表单字段，并将其结构化地输出，供我们在前端模板中进行渲染。

使用guestbook标签的基本语法是： {% guestbook fields %} ... {% endguestbook %}

在这里，fields是我们自定义的一个变量名，它会承载从后台获取到的所有留言表单字段数据，这些数据是一个数组对象，我们需要通过for循环来遍历它。

guestbook标签支持一个可选参数siteId，通常情况下无需填写，除非您在多站点环境下需要调用特定站点的留言表单配置。

遍历fields变量时，每个item（即每个表单字段）都包含以下关键属性，这些属性决定了表单元素的类型和行为：

• Name：表单字段的中文名称，用于显示给用户。
• FieldName：表单字段的变量名，用于后端接收数据时识别，通常是英文。
• Type：表单字段的类型，决定了渲染成哪种HTML输入元素，例如：
  • text：单行文本输入框。
  • number：数字输入框。
  • textarea：多行文本输入区。
  • radio：单选按钮。
  • checkbox：多选按钮。
  • select：下拉选择框。
• Required：一个布尔值，表示该字段是否为必填项。
• Content：字段的默认值或占位符文本。
• Items：当Type为radio、checkbox或select时，此属性包含所有可选值的数组。

实际操作：如何在模板中构建留言表单

了解了guestbook标签的结构后，我们就可以在guestbook/index.html（或您自定义的留言页面模板文件，如guestbook.html）中，编写HTML和模板代码来生成留言表单了。

以下是一个动态生成表单的完整示例，它会根据后台配置自动渲染出不同的输入元素：

<form method="post" action="/guestbook.html">
    <input type="hidden" name="return" value="html"> {# 可选，指定后端返回html或json #}

    {% 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 }}" name="{{ item.FieldName }}"
                           {% if item.Required %}required{% endif %}
                           placeholder="{{ item.Content }}" autocomplete="off" class="form-control">
                {% elif item.Type == "textarea" %}
                    <textarea 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 %}
                    <label class="radio-inline">
                        <input type="{{ item.Type }}" name="{{ item.FieldName }}" value="{{ val }}" {% if loop.first %}checked{% endif %}> {{ val }}
                    </label>
                    {% endfor %}
                {% elif item.Type == "checkbox" %}
                    {% for val in item.Items %}
                    <label class="checkbox-inline">
                        <input type="{{ item.Type }}" name="{{ item.FieldName }}[]" value="{{ val }}"> {{ val }}
                    </label>
                    {% endfor %}
                {% elif item.Type == "select" %}
                    <select name="{{ item.FieldName }}" class="form-control">
                        {% for val in item.Items %}
                        <option value="{{ val }}">{{ val }}</option>
                        {% endfor %}
                    </select>
                {% else %}
                    {# 如果有其他未知类型，可以提供一个默认处理方式 #}
                    <input type="text" name="{{ item.FieldName }}"
                           {% if item.Required %}required{% endif %}
                           placeholder="{{ item.Content }}" autocomplete="off" class="form-control">
                {% endif %}
            </div>
        </div>
        {% endfor %}
    {% endguestbook %}

    {# 验证码部分，增强安全性 #}
    <div class="form-group captcha-group">
        <label for="captcha">验证码<span class="text-danger">*</span></label>
        <div class="input-group">
            <input type="hidden" name="captcha_id" id="captcha_id">
            <input type="text" name="captcha" id="captcha" required placeholder="请输入验证码" class="form-control">
            <span class="input-group-btn">
                <img src="" id="get-captcha" alt="验证码" style="cursor: pointer; height: 34px;">
            </span>
        </div>
    </div>
    <script>
        // 非jQuery版本
        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;
                    document.getElementById('get-captcha').src = res.data.captcha;
                })
                .catch(err => console.error('Error loading captcha:', err));
        });
        document.getElementById('get-captcha').click(); // 页面加载时自动获取一次验证码
    </script>
    {# 如果您网站使用了 jQuery，也可以这样写 #}
    {#
    <script>
        $(function() {
            $('#get-captcha').on("click", function () {
                $.get('/api/captcha', function(res) {
                    $('#captcha_id').val(res.data.captcha_id);
                    $('#get-captcha').attr("src", res.data.captcha);
                }, 'json');
            }).trigger('click'); // 页面加载时自动获取一次验证码
        });
    </script>
    #}

    <div class="form-group">
        <button type="submit" class="btn btn-primary">提交留言</button>
        <button type="reset" class="btn btn-default">重置</button>
    </div>
</form>

提交表单的注意事项：

• 表单的action属性应指向 /guestbook.html。
• method属性必须设置为 post。
• 除了动态生成的自定义字段外，通常会包含一些通用的必填字段，如user_name（留言者姓名）和contact（联系方式），它们是AnQiCMS留言功能内置的，建议在后台自定义字段时也创建对应字段，或者在模板中手动添加它们以确保数据完整性。
• return隐藏字段用于指定后端在处理完表单后返回的数据格式，html表示返回HTML页面，json表示返回JSON数据，方便前端进行异步处理。

添加验证码增强安全性：

为了有效防止垃圾留言，AnQiCMS支持集成验证码功能。在后台开启留言评论验证码后，只需在留言表单中加入验证码相关的HTML和JavaScript代码即可。上述代码示例中已经包含了验证码的实现方式，它会请求/api/captcha接口获取验证码图片和对应的captcha_id，用户需要填写图片中显示的验证码才能成功提交。

自定义表单样式与布局

尽管guestbook标签为我们生成了表单结构，但其默认样式通常比较朴素。我们可以利用HTML和CSS知识，结合标签输出的结构，对表单进行美化和布局。例如，可以为div和label等元素添加CSS类，或者通过外部CSS文件进行统一的样式管理。AnQiCMS的模板制作约定鼓励将样式、JS脚本等静态资源存放在/public/static/目录，这使得前端资源管理清晰有序。

留言提交后的处理

当用户提交留言后，AnQiCMS的后端会自动接收并处理这些数据。管理员可以在后台的“网站留言管理”模块中查看、管理和回复这些留言。系统也可能配置邮件提醒功能，确保留言能被及时发现和处理。

总之，AnQiCMS通过其灵活的guestbook标签和后台管理功能，为网站留言表单的生成、显示和管理提供了极大的便利。无论是简单的反馈表单，还是复杂的咨询表格，都能在AnQiCMS的框架下高效搭建，并确保安全性和可管理性。

常见问题解答 (FAQ)

1. 如何自定义留言表单中需要收集的字段？

答：您可以通过登录AnQiCMS后台管理界面，在”功能管理” > “网站留言”模块中，找到“自定义留言字段”的设置项。