dedecms自定义表单模板-网站模板-锦华智联科技

后台创建自定义表单：在 Dedecms 后台定义你需要收集的字段（如姓名、电话、邮箱等）。
前台创建表单模板：制作一个 HTML 页面，将你定义的字段用 Dedecms 的特定标签包裹起来。
创建表单并发布页面：在后台创建一个新的表单，并关联你制作的模板,最后生成一个静态页面供用户访问。

下面我们用一个“在线报名”的例子,一步步演示整个过程。

（图片来源网络，侵删）

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

这是数据收集的基础,你需要在这里明确告诉系统你需要哪些信息。

登录后台：使用管理员账号登录你的 Dedecms 后台。
进入表单管理：在左侧菜单栏中，找到并点击 【核心】 -> 模型管理】。
创建新表单模型管理页面，点击右上角的 【增加新表单】 按钮。
（图片来源网络，侵删）
填写表单信息：
- 表单名称：给你的表单起一个名字，方便识别。在线报名表。
- 数据表：Dedecms 会自动为你生成一个数据表，保持默认即可，如 dede_addonexample。（注意：如果你创建多个表单，系统会自动使用不同的数据表，无需手动修改。）
- 默认表单模板：暂时留空,因为我们后面会自己制作模板。
- 列表模板：留空,因为我们通常不需要展示一个列表。
- 项目名称：这里是你表单中每个字段的标题，第一个字段我们想收集“姓名”，就在这里填写 姓名。
- 字段名称：对应字段的变量名，必须为英文或下划线，如 name。（注意：字段名称一旦确定，就不要轻易修改，否则之前的数据将无法正常显示。）
- 字段类型：选择字段的输入类型，对于“姓名”，我们选择 单行文本。
- 是否必填：如果这个字段是必须填写的，就勾选 是。
- 默认值：可以设置一个默认显示的内容，如“请输入您的姓名”。
- 数据校验：可以设置校验规则，如 不为空。
添加更多字段：
- 填写完第一个字段后，不要点击“保存”，直接向下滚动，你会看到字段列表下方有 【增加一个字段】 的按钮。
- 点击它，继续添加下一个字段，
  - 项目名称：联系电话
  - 字段名称：tel
  - 字段类型：单行文本
  - 是否必填：是
- 继续添加：
  - 项目名称：电子邮箱
  - 字段名称：email
  - 字段类型：单行文本
  - 数据校验：电子邮箱
- 继续添加：
  - 项目名称：报名意向
  - 字段名称：intention
  - 字段类型：下拉菜单 -> 在下面的选项框中输入：课程A,课程B,课程C (用英文逗号隔开)
- 继续添加：
  - 项目名称：备注信息
  - 字段名称：remarks
  - 字段类型：多行文本
- 所有字段添加完毕后，点击页面底部的 【保存】 按钮。
生成表单：
- 保存成功后，系统会提示你“成功增加一个内容模型”。
- 点击页面右上角的 【生成表单】 按钮，这一步非常重要，它会根据你设置的字段,在数据库中创建相应的数据结构。

至此,后台的数据结构已经搭建完成。

（图片来源网络，侵删）

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

现在我们需要创建一个美观的 HTML 页面,让用户可以填写信息。

创建模板文件：
- 通过 FTP 或主机文件管理器，进入你的 Dedecms 模板目录，通常是 /templets/。
- 创建一个新的文件夹，/templets/form/,用来存放所有自定义表单的模板。
- 在 /templets/form/ 文件夹里，创建一个新的 HTML 文件，enroll.html。

编写模板代码：

打开 enroll.html 文件，编写基本的 HTML 结构。
在 <body> 标签内，使用 Dedecms 的表单标签 {dede:php} 和 {dede:field} 来调用你刚才创建的字段。

模板代码示例 (enroll.html)：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>在线报名 - 我的公司</title>
    <style>
        body { font-family: "Microsoft YaHei", sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: #f4f4f4; }
        .container { max-width: 600px; margin: 40px auto; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
        h1 { text-align: center; color: #333; }
        .form-group { margin-bottom: 20px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; }
        input[type="text"], input[type="email"], textarea, select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box; /* important */
        }
        textarea { height: 100px; resize: vertical; }
        .btn-submit {
            width: 100%;
            padding: 12px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }
        .btn-submit:hover { background-color: #0056b3; }
        .success-msg { color: #28a745; text-align: center; font-weight: bold; display: none; }
    </style>
</head>
<body>
    <div class="container">
        <h1>在线报名</h1>
        <!-- 成功提示信息，默认隐藏 -->
        <div class="success-msg" id="successMessage">
            提交成功！我们会尽快与您联系。
        </div>
        <!-- 这是 Dedecms 自定义表单的核心标签 -->
        {dede:php}
            // 引入表单处理文件
            require_once(DEDEROOT.'/plus/diy.php');
            // 获取表单配置
            $diy = new DIY();
            // 如果是 POST 提交，则处理数据
            if($diy->diyform($diy->table, $diy->fields, $diy->type))
            {
                // 提交成功后的操作，这里我们隐藏表单并显示成功消息
                echo '<script>document.getElementById("enrollForm").style.display = "none"; document.getElementById("successMessage").style.display = "block";</script>';
            }
        {/dede:php}
        <!-- 表单本身 -->
        <form action="/plus/diy.php" enctype="multipart/form-data" method="post" id="enrollForm">
            <!-- 隐藏字段，用于指定提交到哪个表单 -->
            <input type="hidden" name="action" value="post" />
            <input type="hidden" name="diyid" value="{$diyid}" />
            <!-- 用于防止重复提交和跨站攻击 -->
            <input type="hidden" name="dede_fields" value="name,text;tel,text;email,text;intention,select;remarks,multitext" />
            <input type="hidden" name="dede_fieldshash" value="{dede:php}echo md5('name'.@$_POST['dede_fields']);{/dede:php}" />
            <div class="form-group">
                <label for="name">姓名:</label>
                <!-- {dede:field.name} 会自动生成一个 input 标签，并设置好 id 和 name 属性 -->
                {dede:field.name}
            </div>
            <div class="form-group">
                <label for="tel">联系电话:</label>
                {dede:field.tel}
            </div>
            <div class="form-group">
                <label for="email">电子邮箱:</label>
                {dede:field.email}
            </div>
            <div class="form-group">
                <label for="intention">报名意向:</label>
                {dede:field.intention}
            </div>
            <div class="form-group">
                <label for="remarks">备注信息:</label>
                {dede:field.remarks}
            </div>
            <button type="submit" class="btn-submit">提交报名</button>
        </form>
    </div>
</body>
</html>

代码解释：

{dede:php}...{/dede:php}：这是 Dedecms 的 PHP 代码块，我们在这里引入并调用表单处理逻辑 plus/diy.php。
action="/plus/diy.php"：表单提交的目标地址,固定写法。
name="diyid"：隐藏字段，用于告诉系统这个表单数据要提交到哪个自定义表单，它的值 {$diyid} 会在后台创建表单时自动生成,我们下一步会用到。
name="dede_fields"：极其重要！这个隐藏字段定义了表单提交的字段列表，格式为 字段名1,类型1;字段名2,类型2;...,这个列表必须和你在后台创建的字段完全一致。
name="dede_fieldshash"：用于安全验证，防止篡改，Dedecms 官方推荐的写法是 md5('第一个字段名'.@$_POST['dede_fields'])。
{dede:field.xxx}：这是核心的表单字段标签。xxx 是你在后台设置的“字段名称”，Dedecms 会自动根据这个字段类型生成对应的 HTML 表单元素（如 <input>, <select>, <textarea>）。

第三步：创建表单并发布页面

我们将后台的表单和前台的模板关联起来,并生成一个页面。

获取 diyid：
- 回到 Dedecms 后台，进入 【核心】 -> 模型管理】。
- 找到你刚刚创建的“在线报名表”，点击后面的 【管理】 按钮。
关联模板：
- 在表单管理页面，你会看到一个“默认表单模板”的输入框。
- 点击输入框右侧的 【选择】 按钮，在弹出的窗口中，选择你刚才制作的模板：templets/form/enroll.html。
- 选择后，点击“确定”,输入框中会自动填入模板路径。
- 点击页面底部的 【保存】 按钮。
获取页面代码：
- 保存成功后，再次点击 【生成表单】 按钮。
- 系统会处理你的模板，并生成一段完整的 HTML 代码,复制这段代码。
创建静态页面：
- 在 Dedecms 后台，找到 【核心】 -> 发布管理】 -> 【添加普通文章】。
- 注意：这里我们不是真的要发布一篇文章，而是利用 Dedecms 的页面生成功能。
- 填写页面标题，如 在线报名。
- 栏目选择：选择一个合适的栏目，或者创建一个名为“单页面”的栏目。
- 将上一步复制的“生成表单”得到的代码,完整地粘贴到内容编辑器中。
- 生成选项：勾选 【生成HTML】。
- 点击 【发布】 按钮。
访问页面：
- 发布成功后，系统会告诉你生成的页面路径，./a/enroll.html。
- 通过你的网站域名访问这个路径（http://www.yourdomain.com/a/enroll.html）,你就能看到一个可以正常提交的自定义表单页面了！

后续管理：查看提交的数据

用户提交的数据存储在后台,你需要定期查看和处理。

进入数据管理：
- 在 Dedecms 后台，找到 【核心】 -> 模型管理】。
- 点击你创建的表单（如“在线报名表”）后面的 【管理】 按钮。
查看和导出数据：
- 你可以看到所有用户提交的记录，包括提交时间、IP地址以及你定义的所有字段信息。
- 你可以在这里进行审核、删除操作，也可以选择所有记录，然后点击 【数据导出】，将数据导出为 Excel 文件,方便后续处理。

总结与注意事项

安全：自定义表单是网站的一个入口，容易被垃圾信息机器人攻击，建议在表单中加入验证码功能，在后台创建表单时，可以添加一个 verify 字段（类型为验证码），模板中 {dede:field.verify} 会自动生成验证码输入框。
diyid 和模板路径：diyid 和 dede_fields 是连接前后台的关键,务必确保正确无误。
调试：如果表单提交失败，请检查：
1. 模板中的 dede_fields 和 dede_fieldshash 是否正确。
2. 表单的 action 是否为 /plus/diy.php。
3. 服务器目录权限是否正确，/plus/diy.php 文件是否有执行权限。
4. 查看 Dedecms 后台的“系统” -> “系统错误日志”,可能会有错误提示。
文件名和目录：为了SEO和美观，建议将生成的页面放在更友好的目录下，/enroll.html 或 /about/signup.html，这可以通过修改 Dedecms 的“栏目管理”中的“文章命名规则”或使用伪静态来实现。

通过以上步骤，你就可以成功地在 Dedecms 中创建和使用功能完善的自定义表单了。