在安企CMS中,为网站的留言表单添加和管理自定义字段,不仅能帮助我们收集更具体、更有针对性的客户信息,还能显著提升网站的互动性和数据收集效率。安企CMS以其灵活的内容模型和易于扩展的特性,让这一过程变得十分便捷。
这篇文章将引导您如何在安企CMS的模板中获取并展示留言表单的自定义字段,并确保这些字段能被正确提交。
第一步:在安企CMS后台定义自定义留言字段
首先,我们需要在安企CMS的后台管理系统中,为留言功能添加所需的自定义字段。这就像为您的表单设计问题,确保您能收集到想要的信息。
- 进入网站留言管理: 登录安企CMS后台,导航到“功能管理”菜单,然后点击“网站留言管理”。
- 添加自定义字段: 在这里,您会看到一个“添加字段”或类似的按钮。点击它,就可以开始定义新的字段了。
- 配置字段属性:
- 参数名: 这是后台显示给您看的字段名称,例如“您的行业”、“产品类型”。
- 调用字段(FieldName): 这是在模板中引用此字段的唯一标识符,通常建议使用英文字母,如
yourIndustry、productType。请务必记住这个名称,它在模板中会用到。 - 字段类型: 安企CMS提供了多种字段类型来满足不同的输入需求:
- 单行文本 (text): 适用于姓名、电话、邮箱等简短信息。
- 数字 (number): 仅限输入数字,例如数量、预算。
- 多行文本 (textarea): 适用于较长的内容,如具体需求、留言详情。
- 单项选择 (radio): 用户只能选择一个选项,如性别、同意协议。
- 多项选择 (checkbox): 用户可以选择多个选项,如感兴趣的服务。
- 下拉选择 (select): 以下拉菜单形式供用户选择一个选项。
- 是否必填: 根据需求勾选,如果勾选,用户在提交表单时必须填写此字段。
- 默认值: 为字段提供一个预设值或提示文本。对于单选、多选和下拉选择,这里就是定义可选项的地方,每行输入一个选项。
完成字段定义后,保存您的设置。现在,这些自定义字段就为在模板中使用做好了准备。
第二步:在模板中获取并渲染自定义字段
接下来,我们将修改安企CMS的模板文件,把这些自定义字段呈现在网站前端的留言表单中。通常,留言表单位于您的模板目录下的guestbook/index.html文件。
安企CMS的模板使用的是类似Django模板引擎的语法。要获取留言表单的自定义字段,我们需要使用内置的guestbook标签。
找到留言表单模板文件: 在您的模板目录中,找到用于展示留言表单的HTML文件(例如:
template/您的模板名/guestbook/index.html)。使用
guestbook标签获取字段: 在表单的<body>或适当位置,使用{% guestbook fields %}标签来获取所有已定义的留言字段。fields变量将是一个包含所有字段信息的数组对象。<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> <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 }}" 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 %} <input type="radio" name="{{ item.FieldName }}" value="{{ val }}" id="{{ item.FieldName }}-{{ loop.index }}" {% if item.Required %}required{% endif %} class="form-check-input"> <label for="{{ item.FieldName }}-{{ loop.index }}" class="form-check-label">{{ val }}</label> {%- endfor %} {% elif item.Type == "checkbox" %} {%- for val in item.Items %} <input type="checkbox" name="{{ item.FieldName }}[]" value="{{ val }}" id="{{ item.FieldName }}-{{ loop.index }}" {% if item.Required %}required{% endif %} class="form-check-input"> <label for="{{ item.FieldName }}-{{ loop.index }}" class="form-check-label">{{ 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 %} {% endguestbook %} {# 假设您还会有一些固定的留言字段,例如联系方式和留言内容 #} <div class="form-group"> <label for="user_name">您的称呼 <span class="text-danger">*</span></label> <input type="text" name="user_name" id="user_name" required placeholder="请填写您的称呼" class="form-control"> </div> <div class="form-group"> <label for="contact">联系方式 <span class="text-danger">*</span></label> <input type="text" name="contact" id="contact" required placeholder="手机号/邮箱/微信" class="form-control"> </div> <div class="form-group"> <label for="content">留言内容 <span class="text-danger">*</span></label> <textarea name="content" id="content" required placeholder="请输入您的留言内容" rows="6" class="form-control"></textarea> </div> {# 提交按钮 #} <div class="form-group"> <button type="submit" class="btn btn-primary">提交留言</button> <button type="reset" class="btn btn-secondary">重置</button> </div> </form>代码说明:
{% guestbook fields %}会把后台设置的所有自定义字段作为fields数组提供给模板。 *