留言表单标签`guestbook`如何动态生成并显示用户留言表单？
📅
👁️ 67
在网站运营中，访客留言与互动是建立信任、获取反馈以及促进业务发展的重要环节。安企CMS（AnQiCMS）深知这一需求，为此提供了灵活且强大的留言表单功能，让您可以轻松地在网站上动态生成并显示用户留言表单。这主要通过其内置的guestbook模板标签来实现，它不仅允许您自定义表单字段，还能确保表单的安全性和提交的顺畅。
理解 guestbook 标签的核心作用
当我们需要在网站上添加一个留言表单时，guestbook标签并不是直接生成一个完整的HTML表单，而是提供一个包含所有表单字段*定义*的数组。这意味着，您可以根据这些定义，灵活地构建符合您网站设计风格的留言表单，而不是被固定的样式所限制。这种设计理念让表单的呈现具有高度的可定制性，充分体现了AnQiCMS在内容模型和模块化设计上的优势。
这些表单字段的定义，源自AnQiCMS后台的“功能管理”中的“网站留言”设置。在这里，您可以添加或编辑留言表单所需的各项字段，例如访客姓名、联系方式、留言内容，甚至可以根据业务需求自定义其他字段，如“意向产品”、“服务类型”等。每个自定义字段都会有其对应的显示名称、字段类型（如文本、数字、多行文本、单选、多选或下拉选择）以及是否必填等属性。
前端应用：动态构建留言表单
要在您的模板中将这些后台定义的字段转化为实际可用的表单，我们会在相应的模板文件（例如在guestbook/index.html或者其他需要展示留言表单的页面）中使用guestbook标签：
{% guestbook fields %}
<form method="post" action="/guestbook.html">
{# 这里将根据fields数组动态生成表单字段 #}
{% for item in fields %}
<div>
<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">
{% elif item.Type == "textarea" %}
<textarea name="{{ item.FieldName }}" id="{{ item.FieldName }}"
{% if item.Required %}required{% endif %}
placeholder="{{ item.Content }}" rows="5"></textarea>
{% elif item.Type == "radio" %}
{% for val in item.Items %}
<input type="{{ item.Type }}" name="{{ item.FieldName }}" value="{{ val }}" id="{{ item.FieldName }}_{{ forloop.Counter }}">
<label for="{{ item.FieldName }}_{{ forloop.Counter }}">{{ val }}</label>
{% endfor %}
{% elif item.Type == "checkbox" %}
{% for val in item.Items %}
<input type="{{ item.Type }}" name="{{ item.FieldName }}[]" value="{{ val }}" id="{{ item.FieldName }}_{{ forloop.Counter }}">
<label for="{{ item.FieldName }}_{{ forloop.Counter }}">{{ val }}</label>
{% endfor %}
{% elif item.Type == "select" %}
<select name="{{ item.FieldName }}" id="{{ item.FieldName }}">
{% for val in item.Items %}
<option value="{{ val }}">{{ val }}</option>
{% endfor %}
</select>
{% endif %}
</div>
</div>
{% endfor %}
{# 验证码区域，如果开启了验证码功能 #}
<div style="display: flex; align-items: center; margin-bottom: 15px;">
<input type="hidden" name="captcha_id" id="captcha_id">
<input type="text" name="captcha" required placeholder="请填写验证码" style="flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px;">
<img src="" id="get-captcha" style="width: 120px; height: 40px; cursor: pointer; margin-left: 10px; border-radius: 4px; border: 1px solid #eee;" alt="验证码" />
<script>
document.getElementById('get-captcha').addEventListener("click", function () {
fetch('/api/captcha')
.then(response => response.json())
.then(res => {
document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id);
document.getElementById('get-captcha').setAttribute("src", res.data.captcha);
})
.catch(err => console.error('获取验证码失败:', err));
});
// 页面加载时自动获取一次验证码
document.getElementById('get-captcha').click();
</script>
</div>
<div>
<button type="submit" style="padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">提交留言</button>
<button type="reset" style="padding: 10px 20px; background-color: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; margin-left: 10px;">重置</button>
</div>
</form>
{% endguestbook %}
在这段代码中：
{% guestbook fields %}标签会将后台定义的表单字段加载到fields变量中。fields变量是一个数组，其中包含了我们在后台为留言表单定义的每一个输入项的详细信息。- 我们通过
{% for item in fields %}循环遍历这个数组。在每次循环中，item变量代表一个表单字段的定义。 - 根据
item.Type（表单类型），我们使用条件判断{% if item.Type == "text" %}来渲染不同的HTML表单元素，如<input type="text">、<textarea>、<input type="radio">、<select>等。 item.Name用于显示表单项的标签文字，item.FieldName则作为HTML元素的name和id属性，确保表单数据能够正确提交和前端交互。item.Required属性决定了是否添加HTML的required属性，实现前端的必填校验。- 对于单选、多选和下拉选择类型的字段，
item.Items会提供一个选项列表，我们再次通过循环{% for val in item.Items %}来生成这些选项。