织梦自定义表单模板如何快速制作？

整体流程概览

制作一个完整的自定义表单,通常需要以下四个步骤：

1. 后台创建表单：在织梦后台创建一个新的数据表，用于存储用户提交的信息。
2. 前台制作模板：在前台页面制作一个HTML表单，并使用织梦的特定标签连接到后台创建的表单。
3. 设置接收与展示：配置表单提交后的成功页面，并创建一个列表页来展示所有已提交的表单数据。
4. 添加安全机制：为了防止垃圾信息提交，必须加入验证码功能。

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

这是数据存储的基础。

1. 登录织梦后台：使用你的管理员账号登录。

2. 进入表单管理：

   • 在左侧菜单栏找到 【核心】 -> 模型管理】。
   • 模型管理页面,点击右上角的 【增加自定义表单】 按钮。

3. 填写表单信息：

   
   （图片来源网络，侵删）

   • 表单名称：给你的表单起一个名字，方便在后台识别。“在线报名”、“产品咨询”。

   • 数据表：这是系统自动生成的表名，通常为 dede_addonxx（xx 是数字，系统会自动分配）。请务必记住这个表名，后面制作模板时会用到。

   • 表前缀：保持默认的 dede_ 即可。

   • 列表条数：设置在后台管理界面每页显示多少条记录。

     
     （图片来源网络，侵删）

   • 是否启用：选择“是”。

   • 是否验证：选择“是”，这样前台提交时就会要求登录。

   • 自定义表单字段：这是最关键的一步！

     • 点击 【增加字段】。
     • 字段名：英文字母，如 name, tel, email。不能使用中文。
     • 字段提示：在前台表单中显示给用户的提示文字，如“您的姓名”、“联系电话”。
     • 字段类型：根据数据类型选择，如 varchar (单行文本), text (多行文本/文本域), int (整数), datetime (日期时间), checkbox (多选), radio (单选), select (下拉) 等。
     • 默认值：可以设置一个默认值，如“男”或“女”。
     • 字段必须：选择“是”表示此项为必填项。
     • 显示方式：选择“input”或“textarea”等，通常使用默认即可。

   • 示例：创建一个“在线报名”表单，需要添加以下字段：

     • name (文本, 必填)
     • gender (单选, 选项: 男, 女)
     • tel (文本, 必填)
     • email (文本)
     • address (文本域)
     • content (文本域, 多行留言)

4. 保存：点击页面底部的 【保存】 按钮。

至此,后台的数据表和字段结构已经创建完毕。

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

这一步是用户交互的界面。

1. 创建HTML表单： 在你的网站模板文件（index.htm, about.htm 等）中，添加一个 <form> 标签。注意：<form> 标签是必须的。

2. 使用织梦表单标签： 织梦提供了一套专门的标签来处理自定义表单。

   • {dede:form}：这是表单的起始标签，用于定义表单的提交地址和方式。

     • action: 必须填写，值为你后台创建的自定义表单的提交地址，格式为 plus/diy.php?table=你的数据表名。
     • name: 表单的名称。
     • method: 提交方式，通常为 post。

   • {dede:field}：用于生成表单输入框，它会根据你在后台创建的字段自动生成对应的HTML标签（如<input>, <textarea>, <select>等）。

     • name: 必须填写，值为你在后台创建的字段名（如 name, tel）。
     • autofocus: 自动聚焦。
     • placeholder: 输入框提示文字。

   • {dede:php}：用于执行PHP代码，非常适合用来生成单选框、复选框、下拉列表等复杂字段。

   • {dede:vot}：生成验证码。

   • {dede:button}：生成提交按钮。

3. 模板代码示例：

   假设我们在后台创建了一个数据表 dede_addon18，并添加了 name, tel, content 等字段，那么前台模板代码可以这样写：

   <h2>在线报名</h2>
   <p>请认真填写以下信息，我们会尽快与您联系。</p>
   <form action="/plus/diy.php?table=addon18" name="myform" enctype="multipart/form-data" method="post">
       <input type="hidden" name="dede_fields" value="name,text;tel,text;content,textarea" />
       <input type="hidden" name="dede_fieldshash" value="xxxxxxxxxxx" />
       <div class="form-group">
           <label for="name">您的姓名:</label>
           <input type="text" id="name" name="name" class="form-control" placeholder="请输入您的姓名" required />
       </div>
       <div class="form-group">
           <label for="tel">联系电话:</label>
           <input type="text" id="tel" name="tel" class="form-control" placeholder="请输入您的联系电话" required />
       </div>
       <div class="form-group">
           <label for="content">留言内容:</label>
           <textarea id="content" name="content" class="form-control" rows="5" placeholder="请输入您的留言内容"></textarea>
       </div>
       <!-- 验证码 -->
       <div class="form-group">
           <label>验证码:</label>
           <div style="display: flex; align-items: center;">
               <input type="text" name="validate" class="form-control" style="width: 120px;" required />
               <img src="/plus/vcode.php" onclick="this.src='/plus/vcode.php?'+Math.random();" style="margin-left: 10px; cursor: pointer;" alt="验证码" />
           </div>
       </div>
       <!-- 提交按钮 -->
       <div class="form-group">
           <button type="submit" class="btn btn-primary">提交</button>
           <button type="reset" class="btn btn-default">重置</button>
       </div>
   </form>

   代码解释：

   • action="/plus/diy.php?table=addon18"：这里的 addon18 就是我们后台创建的表名 dede_addon18 的后缀部分。
   • <input type="hidden" name="dede_fields" value="...">：这个隐藏字段非常重要！ 它告诉织梦服务器，我提交了哪些字段，以及它们的数据类型，格式为 字段名,字段类型;。name,text;tel,text;content,textarea;。
   • <input type="hidden" name="dede_fieldshash" value="...">：这个隐藏字段用于安全验证，它的值是根据 dede_fields 的值通过特定算法生成的。最简单的方法是先不填它，提交一次表单，然后查看源代码，系统会自动生成这个值并提示你，再复制过来填上即可。
   • 验证码部分使用了标准的织梦验证码 /plus/vcode.php。

第三步：设置接收与展示

用户提交表单后,需要有一个反馈，并且管理员需要能看到数据。

1. 设置提交成功页面： 在 <form> 标签内，再添加一个隐藏字段，指定提交成功后跳转的页面。

   <input type="hidden" name="goto" value="/success.html" />

   value 的值是你提前制作好的一个成功提示页面的地址。success.html 可以这样写：

   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8">
       <title>提交成功</title>
   </head>
   <body>
       <h1>提交成功！</h1>
       <p>感谢您的报名，我们会尽快与您联系。</p>
       <p><a href="/">返回首页</a></p>
   </body>
   </html>

2. 在后台查看和管理数据：

   • 提交成功后,你可以在织梦后台的 【核心】 -> 【自定义表单】 中看到所有提交的记录。
   • 你可以在这里查看、删除、修改数据，甚至可以“审核”数据（如果你的表单设置了审核流程）。

3. 在前台展示已提交的数据（可选）： 如果你希望像文章列表一样，在前台页面展示用户提交的信息（例如展示所有留言），可以这样做：

   • 创建一个模板文件,liuyan-list.htm。
   • 使用 {dede:sql} 标签直接查询数据库。

   <h2>用户留言列表</h2>
   <ul>
       {dede:sql sql="SELECT * FROM dede_addon18 ORDER BY id DESC"}
           <li>
               <strong>[field:name/]</strong> 说：
               <p>[field:content/]</p>
               <small>联系电话：[field:tel/] | 时间：[field:senddate function="MyDate('Y-m-d H:i',@me)"/]</small>
           </li>
       {/dede:sql}
   </ul>

   • sql="SELECT * FROM dede_addon18 ..."：这里的 dede_addon18 就是你后台创建的数据表名。
   • [field:字段名/]：用于循环输出表中的每一条记录的各个字段。
   • function="MyDate('Y-m-d H:i',@me)"：对时间戳格式的字段进行格式化显示。

   在织梦后台生成这个页面的HTML即可。

第四步：常见问题与技巧

验证码不显示或无效？

• 原因：通常是缓存问题或权限问题。
• 解决：
  1. 清理浏览器缓存和织梦后台的“更新缓存”。
  2. 确保 /plus/vcode.php 文件存在并且有可执行权限。
  3. 确保你的模板中 <form> 标签包含了 enctype="multipart/form-data"。

提交后数据丢失或提示“非法提交”？

• 原因：最常见的是 dede_fields 和 dede_fieldshash 这两个隐藏字段没有正确设置。
• 解决：
  1. 仔细检查 dede_fields 的格式是否正确，字段名和类型是否与后台一致。
  2. 按照前面提到的方法,先提交一次，从源代码中复制正确的 dede_fieldshash 值过来。

如何让表单更美观？

• 技巧：直接在HTML中使用CSS框架（如Bootstrap）或自定义CSS来美化你的表单，织梦的标签会正常工作。

如何添加文件上传功能？

• 步骤：
  1. 在后台创建自定义表单时,添加一个字段，类型选择 media（媒体文件）或 varchar（如果只需要文件名）。
  2. 在前台模板中,对于 media 类型的字段，{dede:field} 标签会自动生成一个文件上传按钮。
  3. 确保你的 <form> 标签有 enctype="multipart/form-data" 属性。

通过以上四个步骤,你就可以在织梦CMS中创建一个功能完善、安全可靠的自定义表单了。