如何在前端页面构建并显示自定义字段的留言表单？

📅 👁️ 83

当您希望网站访问者能够与您进行互动，例如提交问题、提供反馈或进行预约时，一个功能完善的留言表单是必不可少的。AnQiCMS 提供了一套非常灵活且强大的留言管理功能，其中最核心的便是支持自定义留言字段，让您可以根据实际业务需求构建个性化的表单。本文将指导您如何在前端页面构建并显示这些带有自定义字段的留言表单。

为什么需要自定义留言表单？

传统的留言表单可能只包含姓名、邮箱、留言内容等基础字段，但在很多场景下，这些字段远远不能满足我们的需求。例如，如果您经营一个培训机构，可能需要收集学生的年龄、感兴趣的课程；如果您是招聘网站，可能需要求职者的教育背景、工作经验等。通过自定义字段，您可以根据网站的具体功能和用户群体，精准地收集所需信息，极大地提升数据收集效率和用户体验。AnQiCMS 的自定义留言字段功能正是为此而生，它允许您在不编写代码的情况下，通过后台配置就能实现这些个性化需求。

后台配置自定义留言字段

首先，我们需要在 AnQiCMS 后台定义好留言表单所需的字段。

登录您的 AnQiCMS 后台，导航到左侧菜单的“功能管理”区域，然后点击“网站留言”。在这里，您可以看到当前已有的留言字段列表。系统通常会预置一些基础字段，您也可以根据需求添加或修改字段。

点击添加新字段，您会看到以下几个关键的配置项：

参数名与调用字段：
- 参数名是这个字段的中文名称，会显示给用户看，例如“您的称呼”、“手机号码”。
- 调用字段则是系统内部用于识别和存储数据的英文名称，建议使用简洁的英文小写字母，例如 your_name、phone。
字段类型：AnQiCMS 提供了多种字段类型来适应不同的数据输入需求，这与内容模型中自定义字段的概念类似：
- 单行文本：适用于姓名、标题、短句等简短的文字输入。
- 数字：仅允许输入数字，适合电话、数量等。
- 多行文本：用于较长的留言或详细描述。
- 单项选择：以单选按钮形式呈现，用户只能选择其中一个选项。
- 多项选择：以复选框形式呈现，用户可以选择多个选项。
- 下拉选择：以下拉菜单形式呈现，用户从预设选项中选择一个。
是否必填：勾选此项可以强制用户填写该字段，确保您收集到关键信息。
默认值/选项：
- 对于单行文本、数字、多行文本，这里可以设置字段的默认填充内容或提示文字。
- 对于单项选择、多项选择和下拉选择，您可以在这里一行一个地输入您的选项，例如：
```
男
女
保密
```
  系统会根据您输入的选项自动生成前端的选择项。

完成字段配置后，保存更改。这些自定义字段就已在后台准备就绪，等待我们在前端页面中调用。

前端页面构建留言表单

后台字段配置完毕后，接下来就是在网站前端页面上构建并显示这个留言表单。AnQiCMS 的模板系统基于 Go 语言的 Django 模板引擎语法，提供了强大的灵活性，让您可以轻松将后台定义的字段渲染成 HTML 表单。

首先，您需要找到或创建一个用于显示留言表单的模板文件。根据 AnQiCMS 的模板约定，留言页面的模板文件通常位于您的模板目录下的 guestbook/index.html 或 guestbook.html。例如，如果您的模板名为 default，则文件路径可能是 /template/default/guestbook/index.html。

在该模板文件中，您可以使用 {% guestbook fields %} 标签来加载后台配置的所有留言字段。这个标签会将所有字段信息存储在一个名为 fields 的数组对象中，您可以遍历这个数组来动态生成表单元素。

以下是一个详细的前端表单构建示例，它涵盖了各种字段类型的渲染，以及表单提交的逻辑：

”`twig

{# 用于指定后端返回格式，html 返回页面，json 返回 JSON 数据，默认是 html #}
<input type="hidden" name="return" value="html">

{% guestbook fields %}
    {% for item in fields %}
    <div class="form-group">
        <label for="{{ item.FieldName }}">
            {{ item.Name }}
            {% if item.Required %}
                <span class="required-star">*</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 }}"
                       autocomplete="off"
                       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 %}
                <label class="radio-inline">
                    <input type="radio"
                           name="{{ item.FieldName }}"
                           value="{{ val }}"
                           {% if item.Required and forloop.First %}required{% endif %} {# 确保第一个选项是必选 #}
                           class="form-check-input">
                    {{ val }}
                </label>
                {%- endfor %}
            {% elif item.Type == "checkbox" %}
                {%- for val in item.Items %}
                <label class="checkbox-inline">
                    <input type="checkbox"
                           name="{{ item.FieldName }}[]" {# 多选框需要加 [] #}
                           value="{{ val }}"
                           {%

如何在前端页面构建并显示自定义字段的留言表单？

为什么需要自定义留言表单？

后台配置自定义留言字段

前端页面构建留言表单

相关文章

如何在安企CMS中显示用户对文章的评论列表？

安企CMS如何显示和管理网站的友情链接？

如何显示与当前文章相关的推荐内容列表？

如何在安企CMS内容页中显示上一篇和下一篇文章的链接？

如何显示网站的Logo、备案号、版权信息等系统级配置？

如何在内容中嵌入和显示来自Markdown编辑器的数学公式或流程图？

安企CMS如何处理内容中的图片，以优化加载速度和显示质量（WebP、压缩）？

如何在模板中获取并显示文章、产品等内容模型的自定义参数？