dede自定义表单模板-DEDE建站-盈思创科技

后台创建自定义表单：在 DedeCMS 后台定义表单的字段。
前台制作表单模板：编写 HTML 代码,将表单字段与后台创建的字段关联起来。
前台调用表单并处理：使用 DedeCMS 的标签 {dede:diyform} 调用表单,并配置提交后的处理逻辑。

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

这是所有工作的基础,你需要在这里定义你的表单包含哪些字段。

登录 DedeCMS 后台。
在左侧菜单栏找到 【核心】 -> 频道管理】。
在页面顶部，你会看到 【增加自定义表单】 的按钮,点击它。
填写表单信息：
- 表单名称：给你的表单起一个名字，方便识别，在线报名”、“产品咨询”等,这个名字在调用时会用到。
- 数据表名：系统会根据“表单名称”自动生成一个数据表名，dede_diyform1。通常不建议手动修改,除非你知道你在做什么。
- 默认表单模板：可以留空,我们稍后会自己制作模板。
- 列表模板：用于展示已提交的表单数据列表,可以留空。
- 发布模板：就是用户填写和提交表单的页面模板,我们稍后会制作。
- 表单提示：提交成功后给用户的提示信息，提交成功，我们会尽快与您联系！”。
- 是否启用：务必选择“是”。
添加表单字段：
- 填写完基本信息后，向下滚动，找到 【字段管理】 部分。
- 点击 【增加字段】。
- 字段名：字段的英文标识，name, tel, email, content。只能使用英文字母、数字和下划线,且不能以数字开头。
- 字段提示：在前台表单中显示给用户的提示文字，您的姓名”、“联系电话”。
- 字段类型：根据你的需求选择，常用的有：
  - text：单行文本输入框。
  - textarea：多行文本框。
  - select：下拉选择框（需要设置“选项”，用分隔，选项一|选项二|选项三）。
  - radio：单选按钮（设置方式同 select）。
  - checkbox：复选框（设置方式同 select）。
  - img：图片上传（需要服务器配置好上传目录）。
- 是否必填：选择“是”后,用户提交时该字段不能为空。
- 默认值：可以为字段设置一个默认值，请输入您的姓名”。
- 数据校验：例如对邮箱、手机号格式进行校验。
重复步骤 5，添加你需要的所有字段（如姓名、电话、邮箱、留言内容等）。
点击 【保存】 按钮，至此，后台的自定义表单就创建完成了,系统也自动创建了对应的数据表。

第二步：制作前台表单模板

这是用户能看到并填写表单的页面，你需要创建一个独立的 HTML 模板文件。

创建模板文件：
- 在你的 DedeCMS 模板目录（通常是 /templets/你的模板名/）下，创建一个新的 HTML 文件，baoming.html。
编写表单代码：
- 在 baoming.html 文件中，编写标准的 HTML 表单结构。
- 关键点：使用 {dede:diyform} 标签来调用你刚刚创建的表单。
- action 属性：必须指向 plus/diy.php，这是 DedeCMS 处理表单提交的脚本。
- <input> 标签的 name 属性：必须与你第一步在后台创建的“字段名”完全一致（区分大小写）。

示例模板代码 (`baoming.html`)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">在线报名</title>
</head>
<body>
    <h1>在线报名表单</h1>
    <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" />  <!-- 这里的 value 是你的自定义表单的 ID，可以在后台“内容频道管理”里看到 -->
        <input type="hidden" name="do" value="2" />
        <!-- 姓名：后台字段名为 name -->
        <div>
            <label for="name">您的姓名：</label>
            <input type="text" name="name" id="name" class="int" size="30" required="required" />
        </div>
        <!-- 电话：后台字段名为 tel -->
        <div>
            <label for="tel">联系电话：</label>
            <input type="text" name="tel" id="tel" class="int" size="30" required="required" />
        </div>
        <!-- 邮箱：后台字段名为 email -->
        <div>
            <label for="email">电子邮箱：</label>
            <input type="email" name="email" id="email" class="int" size="30" />
        </div>
        <!-- 性别：后台字段名为 sex，类型为 radio -->
        <div>
            <label>性别：</label>
            <input type="radio" name="sex" value="男" /> 男
            <input type="radio" name="sex" value="女" /> 女
        </div>
        <!-- 留言内容：后台字段名为 content -->
        <div>
            <label for="content">留言内容：</label>
            <textarea name="content" id="content" rows="5" cols="50"></textarea>
        </div>
        <!-- 提交按钮 -->
        <div>
            <input type="submit" name="submit" value="提 交" class="btn" />
        </div>
    </form>
</body>
</html>

代码解释：

<form action="/plus/diy.php" ...>：固定写法，指向 DedeCMS 的处理程序。
<input type="hidden" name="diyid" value="1" />：这是最重要的隐藏字段。value 的值是你的自定义表单的 ID，你可以在后台“内容频道管理”列表中找到你的自定义表单，第一列的数字就是 ID。
<input type="text" name="name" ...>：name="name" 必须和后台创建的“字段名” name 一致。
required="required"：是 HTML5 的必填属性，可以提供前端校验，但最终以后台“是否必填”为准。

第三步：前台调用表单并配置

你需要把这个制作好的模板页面发布到网站上,并配置提交后的行为。

创建栏目并关联模板：
- 在后台 【频道】 -> 【栏目管理】 中，创建一个新栏目（在线报名”）。
- 在栏目设置中，选择“单页栏目”。
- 在“栏目内容”部分，点击 “选择保存位置”，选择你刚才创建的模板文件 baoming.html。
- 更新栏目缓存。
访问页面：

前台访问你刚刚创建的栏目页面,就能看到你制作的表单了。
配置表单提交行为（非常重要）：
- 表单提交后，默认是保存到数据库,但通常我们还需要将数据发送到指定的邮箱。
- 在后台 【系统】 -> 【系统基本参数】 -> 【核心设置】 中，找到 “站点联系人” 和 “发件EMAIL” 并填写正确。
- 在后台 【系统】 -> 【系统基本参数】 -> 【SMTP设置】 中，配置好邮件发送功能（如果需要邮件通知的话）。
- 在后台 【系统】 -> 【系统基本参数】 -> 【自定义表单回复】 中，你可以设置一个默认的回复邮件模板，如果这里不设置，系统会使用你创建表单时填写的“表单提示”信息。

高级技巧与常见问题

如何查看已提交的数据？
- 在后台 【核心】 -> 频道管理】 中，找到你的自定义表单，点击后面的 [数据管理] 链接，即可查看、删除所有提交的数据。
如何修改表单样式？
- 直接在 baoming.html 模板文件中使用 CSS 样式美化即可，上面的例子中加入了 class="int" 和 class="btn"，你可以在模板的 <head> 部分或外部的 CSS 文件中定义这些类的样式。
提交后跳转到指定页面？
- 在 <form> 标签中增加一个隐藏字段：
```
<input type="hidden" name="gotourl" value="/success.html" />
```
  value 的值就是提交成功后要跳转的页面路径,这个页面需要你提前创建好。
{dede:diyform} 标签的其他用法
- 除了制作提交页面，你还可以在任意地方使用 {dede:diyform} 标签来展示某个自定义表单的字段,在列表模板中展示已提交的报名信息。
- 基本语法：
```
{dede:diyform diyid='1'}
    <p>姓名：[field:name/]</p>
    <p>电话：[field:tel/]</p>
    <p>留言：[field:content/]</p>
{/dede:diyform}
```
- diyid='1' 指定要展示的自定义表单 ID。[field:字段名/] 用于输出对应字段的内容。
常见错误：diyid 错误
- 这是最常见的错误，请务必确认模板中隐藏字段的 diyid 值与后台自定义表单的 ID 完全一致。

通过以上步骤，你就可以熟练地使用 DedeCMS 的自定义表单功能了，从简单的留言到复杂的报名系统,都可以轻松实现。

dede自定义表单模板

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

第二步：制作前台表单模板

示例模板代码 (`baoming.html`)

第三步：前台调用表单并配置

高级技巧与常见问题

相关文章

dede如何调用自定义表单数据？

dede自定义表单如何调用？

dede自定义表单如何调用？

dede自定义表单内容如何调用？

dede自定义表单数据如何调用？

目录[+]

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

第二步：制作前台表单模板

示例模板代码 (baoming.html)

第三步：前台调用表单并配置

高级技巧与常见问题

相关文章

dede如何调用自定义表单数据？

dede自定义表单如何调用？

dede自定义表单如何调用？

dede自定义表单内容如何调用？

dede自定义表单数据如何调用？

目录[+]

示例模板代码 (`baoming.html`)