在现代网站运营中,提供一个便捷的用户交流渠道至关重要,留言板就是其中一种高效的方式。安企CMS(AnQiCMS)深知这一需求,通过其强大的模板标签系统,特别是 guestbook 标签,让您能够灵活地在网站上动态生成留言表单,并轻松自定义表单字段,以满足各种业务场景。
动态留言表单的基石:guestbook 标签
在安企CMS中,要在前端页面展示留言表单,核心就是使用 guestbook 模板标签。这个标签的作用是获取您在后台预先配置好的留言表单字段信息,然后您就可以根据这些信息在模板中动态地构建出完整的表单。
使用方法非常直观:
{% guestbook fields %}
{# 在这里,您可以使用fields变量来构建您的表单 #}
{% endguestbook %}
这里,fields 是一个由 guestbook 标签提供的变量,它包含了您在安企CMS后台“功能管理”下的“网站留言管理”中定义的所有留言字段信息。每个字段都是一个独立的对象,携带了该字段的名称、类型、是否必填等详细属性。
后台自定义表单字段:灵活性的源泉
安企CMS的强大之处在于,您无需修改代码,就可以在后台管理界面为留言板添加各种自定义字段。这些字段将直接影响 guestbook 标签在前端能够动态生成的表单元素。
在“功能管理”的“网站留言管理”中,您可以为留言表单添加:
- 单行文本 (text):适用于姓名、邮箱、电话等简短输入。
- 数字 (number):确保用户只能输入数字,例如数量、年龄。
- 多行文本 (textarea):适用于留言内容、详细描述等需要较长文本输入的情况。
- 单项选择 (radio):提供一组选项,用户只能选择其中一个,例如“性别”、“意向产品”等。
- 多项选择 (checkbox):提供一组选项,用户可以选择多个,例如“服务需求”、“兴趣爱好”等。
- 下拉选择 (select):以下拉菜单形式呈现一组选项,用户单选,适用于国家、省份等列表。
配置这些字段时,您可以为它们指定显示名称(Name),这是用户在前端看到的标签;设置调用字段(FieldName),这是表单提交时后端接收的字段名;选择字段类型(Type),这决定了前端生成何种HTML输入元素;以及设置是否必填(Required)和默认值或选项列表(Content/Items)。
在模板中动态构建表单
拿到 fields 变量后,您就可以通过一个 for 循环遍历所有字段,并根据每个字段的 Type 属性,动态地生成相应的HTML表单元素。
以下是一个典型的动态生成表单的模板代码片段:
<form method="post" action="/guestbook.html">
{% 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>
{% 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 }}" 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" %}
<div class="form-check-group">
{% for val in item.Items %}
<div class="form-check form-check-inline">
<input type="radio" name="{{ item.FieldName }}" id="{{ item.FieldName }}_{{ forloop.Counter }}" value="{{ val }}" class="form-check-input"
{% if forloop.Counter == 1 %}checked{% endif %} {% if item.Required %}required{% endif %}>
<label class="form-check-label" for="{{ item.FieldName }}_{{ forloop.Counter }}">{{ val }}</label>
</div>
{% endfor %}
</div>
{% elif item.Type == "checkbox" %}
<div class="form-check-group">
{% for val in item.Items %}
<div class="form-check form-check-inline">
<input type="checkbox" name="{{ item.FieldName }}[]" id="{{ item.FieldName }}_{{ forloop.Counter }}" value="{{ val }}" class="form-check-input"
{% if forloop.Counter == 1 %}checked{% endif %} {% if item.Required %}required{% endif %}>
<label class="form-check-label" for="{{ item.FieldName }}_{{ forloop.Counter }}">{{ val }}</label>
</div>
{% endfor %}
</div>
{% elif item.Type == "select" %}
<select name="{{ item.FieldName }}" id="{{ item.FieldName }}" class="form-control" {% if item.Required %}required{% endif %}>
{% for val in item.Items %}
<option value="{{ val }}">{{ val }}</option>
{% endfor %}
</select>
{% endif %}
</div>
{% endfor %}
<div class="form-group text-center mt-4">
<button type="submit" class="btn btn-primary">提交留言</button>
<button type="reset" class="btn btn-secondary ml-2">重置</button>
</div>
{% endguestbook %}
</form>
在这段代码中,item.Name 用于显示表单字段的标签,item.FieldName 用于作为输入框的 name 属性,item.Type 根据其值(”text”, “number”, “textarea”, “radio”, “checkbox”, “select”)生成不同的HTML输入元素。item.Required 属性则会为必填字段添加 required 属性。对于单选、多选和下拉选择,item.Items 会被遍历以生成各个选项。
留言表单提交与安全
留言表单的提交地址固定为 /guestbook.html,提交方式为 POST。安企CMS会根据您后台配置的字段自动处理提交的数据。除了自定义字段,系统默认会接收 user_name(用户名)、contact(联系方式)和 content(留言内容)这几个核心字段。
为了提高网站的安全性,防止垃圾留言,强烈建议您开启验证码功能。在安企CMS后台的“后台设置”->“内容设置”中,您可以启用留言验证码。开启后,需要在您的留言表单中添加以下代码来动态获取和展示