第一步:在DedeCMS后台创建自定义表单
这是最核心的一步,我们需要在后台定义好表单需要哪些字段,以及这些字段的属性。

(图片来源网络,侵删)
-
登录DedeCMS后台 使用你的管理员账号登录到网站的后台管理界面。
-
进入自定义表单管理 在后台左侧菜单栏中,找到并点击
核心->自定义表单。 -
创建新的表单 在自定义表单管理页面,点击右上角的
增加自定义表单按钮。 -
填写表单基本信息 在弹出的表单中,填写以下关键信息:
(图片来源网络,侵删)- 表单名称:给你的表单起一个容易识别的名字,在线报名”、“产品咨询”等,这个名字在后台管理时会显示。
- 默认表单模板:这里可以留空,因为我们通常会在前台页面手动编写HTML表单代码。
- 列表模板:用于设置提交后的数据如何列表化展示,你可以使用系统默认的,或者自己编写。(可选,但建议设置)
- 发布模板:用于设置查看单个提交数据的页面样式。(可选)
- 表单提示:用户提交成功后显示的提示信息,提交成功,我们会尽快与您联系!”。
- 是否开启:务必选择
是,否则前台将无法提交。 - 是否前台列表显示:选择“是”后,提交的数据会出现在前台的一个列表页面(需要调用相应的标签)。
- 后台列表排序:设置后台数据列表的默认排序方式。
填写完毕后,点击
确定按钮保存,一个空的表单“容器”已经创建好了。 -
添加表单字段(最关键的一步) 创建完表单后,在自定义表单管理页面,你会看到刚才创建的表单,点击该表单名称,进入字段管理页面。
点击
增加字段,开始逐个添加你需要的表单字段,姓名、电话、邮箱、留言内容等。字段设置详解:
(图片来源网络,侵删)- 字段名:字段的英文或拼音,用于数据库存储和后台识别。
name,tel,content。只能使用英文、数字和下划线。 - :在前台表单中显示给用户的文字标签,您的姓名”、“联系电话”。
- 字段类型:选择合适的输入类型。
varchar:单行文本输入框。text:多行文本域(用于留言内容)。int:整数(可选)。float:小数(可选)。date:日期(可选)。datetime:日期时间(可选)。bool:布尔值(会生成复选框,通常用于“是否同意”条款)。box:多选框。radio:单选按钮。select:下拉选择框。
- 字段值:
- 对于
varchar,text,int等类型,这里可以留空。 - 对于
radio,select,box类型,你需要在这里填写选项,选项之间用英文逗号 隔开,男,女,其他。
- 对于
- 默认值:设置字段的默认内容(可选)。
- 是否必填:选择“是”后,用户提交时此字段不能为空。
- 数据校验:可以设置简单的校验规则,如“数字”、“邮箱”、“电话号码”等,这会进行前端校验,提高用户体验。
- 提示文字:在输入框下方显示的灰色提示文字,请输入11位手机号码”。
示例:添加一个“姓名”字段
- 字段名:
name 您的姓名- 字段类型:
varchar - 是否必填:
是 - 其他选项保持默认或根据需要设置。
示例:添加一个“留言内容”字段
- 字段名:
content - 字段类型:
text - 是否必填:
是
添加完所有需要的字段后,点击保存,你的自定义表单结构已经定义完毕。
- 字段名:字段的英文或拼音,用于数据库存储和后台识别。
第二步:在前台页面调用表单并处理
后台结构搭建好了,接下来就是在前台页面让用户看到并填写这个表单。
在模板文件中编写HTML表单代码
在你需要显示表单的页面模板文件(通常是 .htm 文件,如 index.htm, about.htm 等)中,手动编写HTML表单代码。
核心要点:
<form>:必须包含action和method属性。action:指向DedeCMS处理表单提交的PHP文件,通常是/plus/diy.php。method:必须为post。
<input>:每个表单字段都需要一个input。type:根据字段类型设置,如text,textarea,radio,checkbox等。name:必须与后台创建的字段名完全一致(区分大小写)。- 对于单选、多选、下拉框,
value的值必须与你在后台“字段值”中定义的选项之一对应。
- 隐藏字段:必须添加一个隐藏的
input来指定提交到哪个表单。type="hidden"name="action"value="post"name="diyid":必须,值为你在后台创建的表单的ID,你可以在自定义表单列表页面找到这个ID。name="do":必须,值为add。name="dede_fields":非常重要,用于告诉系统哪些字段是用户提交的,格式为字段名1=文本,字段名2=文本,...。name=文本,tel=文本,content=文本。name="dede_fieldshash":用于安全验证,防止恶意提交,它的值是根据dede_fields计算出来的一个哈希值,我们可以先留空,提交一次表单后,系统会返回正确的值,你再复制回来。
示例HTML代码:
<h2>在线报名</h2>
<p>请填写以下信息,我们会尽快与您联系。</p>
<form action="/plus/diy.php" enctype="multipart/form-data" method="post">
<input type="hidden" name="action" value="post" />
<input type="hidden" name="diyid" value="1" /> <!-- 这里的 1 是你的自定义表单ID -->
<input type="hidden" name="do" value="add" />
<!-- 先留空,提交一次后系统会返回正确的值,再填入 -->
<input type="hidden" name="dede_fields" value="" />
<input type="hidden" name="dede_fieldshash" value="" />
<div class="form-group">
<label for="name">您的姓名 <span style="color:red;">*</span></label>
<input type="text" name="name" id="name" class="form-control" required />
</div>
<div class="form-group">
<label for="tel">联系电话 <span style="color:red;">*</span></label>
<input type="text" name="tel" id="tel" class="form-control" required />
</div>
<div class="form-group">
<label for="content">留言内容 <span style="color:red;">*</span></label>
<textarea name="content" id="content" class="form-control" rows="5" required></textarea>
</div>
<div class="form-group">
<label>性别</label>
<input type="radio" name="sex" value="男" checked /> 男
<input type="radio" name="sex" value="女" /> 女
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
获取 diyid 和 dede_fields 的值
- 获取
diyid:回到后台“自定义表单”列表,鼠标悬停在你刚创建的表单上,在浏览器左下角状态栏可以看到链接,如diy.php?id=1,这里的1diyid。 - 获取
dede_fields和dede_fieldshash:- 将上面HTML代码中的
dede_fields和dede_fieldshash先留空。 - 保存模板文件,然后在浏览器中打开这个页面,填写表单并点击提交。
- 由于字段验证不通过,系统会提示错误,并且在页面的源代码中会返回一个包含正确值的JavaScript代码片段。
- 在浏览器中查看页面源代码,找到类似下面的代码:
document.getElementById("dede_fields").value = 'name=文本,tel=文本,content=文本,sex=文本'; document.getElementById("dede_fieldshash").value = 'a123b456c789...'; - 将这两行
value的值,复制到你HTML模板文件中对应的隐藏字段里。
- 将上面HTML代码中的
完成并测试
将获取到的正确值填入你的模板文件,保存并上传到服务器,再次访问前台页面,填写并提交表单,如果一切正常,你应该会看到你设置的“提交成功”的提示信息。
提交成功后,你可以在后台 核心 -> 自定义表单 -> 内容管理 中看到所有用户提交的数据。
常见问题与注意事项
dede_fields格式错误:这是最常见的问题,确保格式为字段名1=文本,字段名2=文本,且逗号是英文半角。- 字段名大小写不匹配:HTML中的
name属性和后台的字段名必须完全一致,包括大小写。 - 表单未开启:检查后台自定义表单的“是否开启”选项是否为“是”。
- 提交后数据丢失:检查
/plus/diy.php文件是否存在,并且目录权限是否正确(通常需要755或644)。 - 样式问题:HTML代码中的
class="form-control"是Bootstrap的样式,如果你的网站没有使用Bootstrap,可以去掉或换成你自己的CSS类。 - 防刷机制:为了防止机器人恶意提交,建议在前端加入验证码功能,DedeCMS的自定义表单默认支持验证码,你可以在后台的字段管理中增加一个
imgcode类型的字段,前台调用{dede:imgcode /}标签即可生成验证码。
通过以上步骤,你就可以成功地在DedeCMS中创建并连接一个功能完整的自定义表单了。
