dede自定义表怎连接?

99ANYc3cd6
预计阅读时长 20 分钟
位置: 首页 DEDE建站 正文

第一步:在DedeCMS后台创建自定义表单

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

dede怎样连接到自定义表单
(图片来源网络,侵删)
  1. 登录DedeCMS后台 使用你的管理员账号登录到网站的后台管理界面。

  2. 进入自定义表单管理 在后台左侧菜单栏中,找到并点击 核心 -> 自定义表单

  3. 创建新的表单 在自定义表单管理页面,点击右上角的 增加自定义表单 按钮。

  4. 填写表单基本信息 在弹出的表单中,填写以下关键信息:

    dede怎样连接到自定义表单
    (图片来源网络,侵删)
    • 表单名称:给你的表单起一个容易识别的名字,在线报名”、“产品咨询”等,这个名字在后台管理时会显示。
    • 默认表单模板:这里可以留空,因为我们通常会在前台页面手动编写HTML表单代码。
    • 列表模板:用于设置提交后的数据如何列表化展示,你可以使用系统默认的,或者自己编写。(可选,但建议设置)
    • 发布模板:用于设置查看单个提交数据的页面样式。(可选)
    • 表单提示:用户提交成功后显示的提示信息,提交成功,我们会尽快与您联系!”。
    • 是否开启:务必选择 ,否则前台将无法提交。
    • 是否前台列表显示:选择“是”后,提交的数据会出现在前台的一个列表页面(需要调用相应的标签)。
    • 后台列表排序:设置后台数据列表的默认排序方式。

    填写完毕后,点击 确定 按钮保存,一个空的表单“容器”已经创建好了。

  5. 添加表单字段(最关键的一步) 创建完表单后,在自定义表单管理页面,你会看到刚才创建的表单,点击该表单名称,进入字段管理页面。

    点击 增加字段,开始逐个添加你需要的表单字段,姓名、电话、邮箱、留言内容等。

    字段设置详解:

    dede怎样连接到自定义表单
    (图片来源网络,侵删)
    • 字段名:字段的英文或拼音,用于数据库存储和后台识别。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>:必须包含 actionmethod 属性。
    • 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>

获取 diyiddede_fields 的值

  1. 获取 diyid:回到后台“自定义表单”列表,鼠标悬停在你刚创建的表单上,在浏览器左下角状态栏可以看到链接,如 diy.php?id=1,这里的 1 diyid
  2. 获取 dede_fieldsdede_fieldshash
    • 将上面HTML代码中的 dede_fieldsdede_fieldshash 先留空。
    • 保存模板文件,然后在浏览器中打开这个页面,填写表单并点击提交。
    • 由于字段验证不通过,系统会提示错误,并且在页面的源代码中会返回一个包含正确值的JavaScript代码片段。
    • 在浏览器中查看页面源代码,找到类似下面的代码:
      document.getElementById("dede_fields").value = 'name=文本,tel=文本,content=文本,sex=文本';
      document.getElementById("dede_fieldshash").value = 'a123b456c789...';
    • 将这两行 value 的值,复制到你HTML模板文件中对应的隐藏字段里。

完成并测试

将获取到的正确值填入你的模板文件,保存并上传到服务器,再次访问前台页面,填写并提交表单,如果一切正常,你应该会看到你设置的“提交成功”的提示信息。

提交成功后,你可以在后台 核心 -> 自定义表单 -> 内容管理 中看到所有用户提交的数据。


常见问题与注意事项

  • dede_fields 格式错误:这是最常见的问题,确保格式为 字段名1=文本,字段名2=文本,且逗号是英文半角。
  • 字段名大小写不匹配:HTML中的 name 属性和后台的字段名必须完全一致,包括大小写。
  • 表单未开启:检查后台自定义表单的“是否开启”选项是否为“是”。
  • 提交后数据丢失:检查 /plus/diy.php 文件是否存在,并且目录权限是否正确(通常需要 755644)。
  • 样式问题:HTML代码中的 class="form-control" 是Bootstrap的样式,如果你的网站没有使用Bootstrap,可以去掉或换成你自己的CSS类。
  • 防刷机制:为了防止机器人恶意提交,建议在前端加入验证码功能,DedeCMS的自定义表单默认支持验证码,你可以在后台的字段管理中增加一个 imgcode 类型的字段,前台调用 {dede:imgcode /} 标签即可生成验证码。

通过以上步骤,你就可以成功地在DedeCMS中创建并连接一个功能完整的自定义表单了。

-- 展开阅读全文 --
头像
织梦编辑器图片保存失败怎么办?
« 上一篇 01-12
dede导航如何正确链接到二级导航?
下一篇 » 01-12

相关文章

取消
微信二维码
支付宝二维码