织梦自定义表单html

1. 后端操作：在网站后台创建自定义表单，定义需要收集的字段。
2. 前端操作：在前台页面编写HTML表单代码，并将其与后台创建的表单关联起来。

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

这是数据接收和处理的核心步骤。

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

2. 进入自定义表单管理：

   • 在左侧菜单栏中,找到 【核心】 -> 模型管理】。
   • 模型管理页面,点击顶部的 【自定义表单】 标签页。

3. 创建新表单：

   • 点击右上角的 【增加自定义表单】 按钮。
   • 在弹出的页面中,填写表单信息：
     • 表单名称：给你的表单起一个容易识别的名字，在线报名”、“留言反馈”、“产品咨询”等，这个名字不会在前台显示，仅用于后台管理。
     • 表单提示：可以留空，也可以填写一些管理员看的备注。
     • 项目名称：这是最重要的部分，它对应前台表单中 input 的 name 属性，你希望收集“姓名”，就在这里填写 name，收集“电话”，就填写 tel。
     • 字段类型：选择与项目名称对应的输入类型。
       • text：单行文本
       • textarea：多行文本/文本域
       • select：下拉选择
       • radio：单选按钮
       • checkbox：复选框
       • datetime：日期时间
     • 是否必填：选择“是”或“否”，如果设为“是”，前台提交时如果该字段为空，将无法提交。
     • 默认值：可以设置一个默认显示的值，对于性别单选按钮，可以默认选中“男”。
     • 显示顺序：数字越小，字段在前台显示的顺序越靠前。
   • 点击 【保存】 按钮。

4. 重复添加字段：

   
   （图片来源网络，侵删）
   • 根据你的需求,重复第3步，添加所有需要的字段，如：name (姓名), tel (电话), email (邮箱), content (留言内容), qq (QQ号) 等。

5. 生成表单代码：

   • 所有字段添加完毕后,回到 【自定义表单】 列表页面。
   • 找到你刚刚创建的表单,在右侧的 【操作】 栏中，点击 【HTML代码】。
   • 系统会弹出一个窗口,里面包含了完整的表单HTML代码。先不要关闭这个窗口，我们下一步要用到它。

6. 管理表单数据：

   • 在 【自定义表单】 列表页面，点击你表单名称后面的 【管理】 按钮。
   • 这里可以查看所有用户提交的数据,也可以进行删除或修改操作。

第二步：在前台页面添加表单HTML

我们需要将后台生成的代码放到你希望显示表单的前台页面中。

1. 获取后台生成的代码：

   
   （图片来源网络，侵删）

   • 回到上一步弹出的 【HTML代码】 窗口。

   • 你会看到类似下面这样的代码：

     <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="2" />
         <input type="hidden" name="dede_fields" value="name,text;tel,text;content,textarea" />
         <input type="hidden" name="dede_fieldshash" value="a3c2e8f2c9b1d4e5f6a7b8c9d0e1f2a3" />
         <div>
             <label for="name">姓名：</label>
             <input type="text" id="name" name="name" />
         </div>
         <div>
             <label for="tel">电话：</label>
             <input type="text" id="tel" name="tel" />
         </div>
         <div>
             <label for="content">留言内容：</label>
             <textarea id="content" name="content" rows="5" cols="50"></textarea>
         </div>
         <div>
             <input type="submit" name="submit" value="提交" />
         </div>
     </form>

2. 理解代码结构：

   • <form> 标签：定义了表单的基本属性。
     • action="/plus/diy.php"：固定值，指向织梦处理表单提交的脚本。
     • method="post"：提交方式，推荐使用 post。
   • 隐藏字段（非常重要）：
     • diyid：指定这个表单数据要提交到哪个自定义表单中。value="1" 中的 1 就是你创建的表单在后台的ID，如果你创建了第二个表单，它的ID可能是 2，这里的值也要相应改成 2。
     • dede_fields：定义了哪些前台字段需要被保存到数据库，格式为 字段名,字段类型;字段名,字段类型;...，这里的字段名（如 name, tel）必须和你后台创建的项目名称完全一致。
     • dede_fieldshash：一个用于验证数据完整性的哈希值，请务必保留，不要手动修改。
   • 可见字段：
     • <input>, <textarea>, <select> 等，这些是用户实际输入内容的地方。
     • name 属性：必须和后台创建的项目名称（如 name, tel）完全一致，大小写也要相同。
     • id 属性：用于CSS样式和JavaScript脚本，建议设置，方便后续美化和交互。

3. 将代码放入前台页面：

   • 直接修改模板文件（推荐）

     • 进入织梦后台的 【模板】 -> 【默认模板管理】。
     • 找到你想放置表单的页面模板,例如首页 (index.htm)、联系我们页面 (contact.htm) 等。
     • 在需要插入表单的位置,将你从后台复制的HTML代码粘贴进去。
     • 你可以根据自己的网站风格,为表单的 div、label、input 等元素添加CSS样式，使其更美观。
     • 修改模板后,点击 【更新HTML】 或 【生成】 按钮，使修改生效。

   • 使用自由列表

     • 如果你希望在多个页面动态调用同一个表单,可以使用自由列表功能。
     • 进入后台 【核心】 -> 【自由列表】。
     • 创建一个新的自由列表,选择内容模型为 “自定义表单”，并选择你创建的表单。
     • 设置好列表的样式和调用位置。
     • 在模板中通过 {dede:freelist} 标签来调用，这种方法更灵活，但配置相对复杂一些，对于简单的静态表单，直接修改模板文件更简单。

第三步：常见问题与技巧

1. 提交后跳转页面：

   • 默认情况下,表单提交后会跳转到 /plus/diy.php 页面，并显示“发布成功”或“发布失败”的默认提示。
   • 如果你想自定义跳转页面,可以在 <form> 标签中添加一个隐藏字段：

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

     这里的 /thankyou.html 是你希望提交成功后跳转的页面路径，你需要提前创建这个页面。

2. 防止垃圾信息（验证码）：

   • 为了防止机器人恶意提交,强烈建议添加验证码。
   • 在后台 【系统】 -> 【系统基本参数】 -> 【核心设置】 中，确保“是否开启验证码”选项是开启的。
   • 在你的表单HTML中,在提交按钮前加上验证码调用代码：

     {dede:php}
     if($cfg_mb_open=='Y') $needcode = TRUE;
     else $needcode = FALSE;
     {/dede:php}
     <div>
         <label>验证码：</label>
         <input type="text" name="vdcode" style="width:50px; text-transform: uppercase;"/>
         <img src="/include/vdimgck.php" align="absmiddle" onclick="this.src='/include/vdimgck.php?'+Math.random();" style="cursor: pointer;" title="看不清？点击换一张" />
     </div>

     注意：如果你的网站开启了会员登录，$cfg_mb_open 会是 'Y'，验证码会自动显示，如果没开会员，就需要手动加上这段代码。

3. CSS美化：

   • 给表单元素添加 class 属性，然后在你的网站CSS文件中定义样式。

   • <div class="form-group">
         <label class="control-label" for="name">姓名：</label>
         <input type="text" id="name" name="name" class="form-control" />
     </div>

     .form-group { margin-bottom: 15px; }
     .control-label { display: block; margin-bottom: 5px; }
     .form-control { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }

通过以上步骤,你就可以在织梦网站中成功创建一个功能完善、外观美观的自定义表单了。