织梦自定义表单页面如何快速创建？-织梦建站-盈思创科技

后台创建自定义表单：在织梦后台定义表单需要收集的字段（如姓名、电话、邮箱、留言内容等）。
生成表单代码：后台一键生成前端所需的HTML表单代码和PHP处理文件。
创建前台表单页面：在网站前台新建一个页面，并将生成的表单代码放入其中。
美化表单样式：使用CSS对表单进行美化，使其与网站风格统一。
测试与调试：提交表单，检查数据是否成功保存到后台，并确认邮件是否正常发送。

详细步骤教程

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

登录织梦后台：使用你的管理员账号登录网站后台。
（图片来源网络，侵删）
找到表单管理功能：
- 在左侧菜单栏中,找到 【核心】 -> 【自定义表单】。
- 点击进入后,你会看到两个主要选项：【自定义表单管理】 和 【自定义表单字段管理】。
- 首先点击 【自定义表单管理】，然后点击右上角的 【增加自定义表单】 按钮。
配置表单基本信息：
- 表单名称：给你的表单起一个名字，方便识别。“联系我们”、“在线报名”等，这个名字不会在前台显示。
- 发布栏目：选择一个栏目来存放表单提交的数据。强烈建议你提前创建一个专门的栏目，表单数据”或“用户留言”，并设置为“不生成栏目页”，所有提交的数据都会以文章的形式保存在这个栏目下。
- 列表模板：可以不设置，或使用默认的，这决定了在表单数据列表页的显示样式。
- 发布模板：可以不设置，这决定了单个表单数据详情页的显示样式。
- 表单提示：用户提交成功后，前台显示的提示信息。“您的留言已成功提交，我们会尽快与您联系！”
- 是否启用：务必选择“是”。
- 表单说明：可以填写一些在前台显示的表单填写说明。
- 点击 【确定】 保存。

添加表单字段：

返回到 【自定义表单】 界面，点击你刚刚创建的表单名称（联系我们”）。
进入后,点击 【增加字段】。
字段管理：这里是配置表单核心的地方，你需要一个一个地添加你需要的字段。

常用字段配置说明：

（图片来源网络，侵删）

字段名	字段类型	字段描述	备注说明
`name`	`varchar(50)`	姓名	必填项，设置`必须`为`是`。
`tel`	`varchar(20)`	电话	必填项，设置`必须`为`是`。
`email`	`varchar(100)`	邮箱	可选。
`content`	`text`		可选。`textarea`类型会自动生成多行文本框。
`company`	`varchar(100)`	公司	可选。
`ip`	`varchar(20)`	IP地址	强烈建议添加，用于记录用户提交的IP，类型为`ip`。
`time`	`datetime`	提交时间	强烈建议添加，用于记录提交时间，类型为`datetime`。

如何添加字段：

字段名：填写英文字段名，如 name, tel。注意：一旦提交，不要随意修改此名称，否则会导致数据错乱。
字段提示：在前台显示给用户的文字，如“您的姓名”、“联系电话”。
字段类型：根据需要选择，如文本框(text)、多行文本框(textarea)、单选按钮(radio)、复选框(checkbox)、下拉菜单(select)等。
默认值：可以设置一个默认值，如“请输入您的姓名”。
是否必须：如果此项必填，选择“是”。
数据校验：可以设置正则表达式进行校验，如手机号、邮箱格式。
会员字段关联：如果需要，可以关联到会员系统字段。
逐个添加完所有需要的字段后,点击 【保存】。

第二步：生成表单代码

在 【自定义表单】 管理界面，点击你创建的表单右侧的 【生成表单】 按钮。
选择模板：
- 系统会提示你选择一个模板来生成表单,你可以选择默认的模板，或者如果你有自定义的模板，可以选择它。
- 点击 【开始生成】。
获取代码：
（图片来源网络，侵删）
- 生成成功后,系统会弹出一个提示，并显示生成的文件路径。
- 你需要下载两个关键文件：
  - HTML表单文件：通常是 plus/diyform.htm，这是你前台页面需要包含的核心HTML代码。
  - PHP处理文件：通常是 plus/diy.php，这是处理表单提交、保存数据、发送邮件的后端脚本。
请务必下载这两个文件，并根据你的需求进行修改！

第三步：创建前台表单页面

创建静态HTML页面：
- 通过FTP工具连接到你的服务器,在网站根目录下的 templets/ 文件夹里，创建一个新的文件夹，default/ (如果你使用默认模板) 或者你自己的模板文件夹。
- 在该文件夹内创建一个新的HTML文件,contact.html。

编辑页面内容：

用代码编辑器（如VS Code, Sublime Text, Dreamweaver）打开 contact.html。

基础页面结构如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>联系我们 - 你的网站名称</title>
<link rel="stylesheet" href="/templets/default/css/style.css"> <!-- 引入你的网站CSS -->
</head>
<body>
<div class="main">
    <h1>联系我们</h1>
    <p>请填写以下表单，我们会尽快与您联系。</p>
    <!-- 在这里插入你下载的HTML表单代码 -->
    {dede:include file='plus/diyform.htm'/}
</div>
</body>
</html>

关键点：使用织梦的 {dede:include file='...' /} 标签来引入 plus/diyform.htm 文件，这是最简单直接的方式。

修改生成的 dityform.htm 文件：
- 你直接将下载的 dityform.htm 文件内容粘贴到 {dede:include} 的位置也是可以的，但更推荐的方式是修改 dityform.htm 本身，使其更符合你的页面布局。
- 打开 plus/diyform.htm，你会发现里面是纯HTML代码，包含了<form>标签和所有输入字段，你可以修改它的CSS类名、HTML结构，让它与你网站的样式完美融合。

第四步：美化表单样式

编辑CSS文件：
- 打开你网站模板的CSS文件（如 /templets/default/css/style.css）。
- 为表单元素添加样式。
```
/* 表单容器样式 */
.diy-form {
max-width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
}
```
/ 表单元素通用样式 / .diy-form input[type="text"], .diy-form input[type="tel"], .diy-form textarea { width: 100%; padding: 8px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; / 确保padding不会影响宽度 / }

/ 提交按钮样式 / .diy-form .btn { background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }

.diy-form .btn:hover { background-color: #0056b3; }

第五步：测试与调试

前台访问：在浏览器中访问你创建的页面，http://你的网站域名/contact.html。
填写并提交：填写表单信息，点击提交按钮。
检查结果：
- 前台提示：应该会看到你在后台设置的“表单提示”信息。
- 后台数据：登录织梦后台，进入你之前设置的“发布栏目”（如“表单数据”），你应该能看到一条新的记录，数据已成功保存。
- 邮件通知：如果你在后台开启了邮件通知功能（在系统-系统基本参数-核心设置里），检查你设置的邮箱是否收到了新表单提交的邮件。

常见问题与注意事项

提交后页面跳转错误：请确保你的 diyform.htm 中的 <form> 标签的 action 属性指向的是正确的 plus/diy.php 路径。
```
<form action="/plus/diy.php" enctype="multipart/form-data" method="post">
```
CSRF Token错误：新版本的织梦为了安全，增加了CSRF令牌验证，如果提交时提示“令牌验证失败”，请确保你的表单中包含了以下隐藏字段：
```
<input type="hidden" name="dede_fields" value="name,text;tel,text;content,textarea" />
<input type="hidden" name="dede_fieldshash" value="xxxxxxxx" />
```
这两个字段在生成表单时通常会自动包含,如果被手动删除了，需要重新添加。dede_fields 的值是你所有字段的 字段名,字段类型 的组合，用分号分隔。dede_fieldshash 是一个校验值，可以通过访问 /plus/diy.php?action=list&diyid=你的表单ID 来获取正确的值。
如何修改提交后的跳转页面：默认提交后会停留在当前页面，如果你想跳转到其他页面，可以修改 diy.php 文件，找到类似这样的代码：
```
// 成功后跳转到提示页面
showmsg('发布成功！', $goto);
```
你可以将 $goto 变量修改为你想要的URL，$goto = '/thankyou.html';。
表单提交无反应：检查JavaScript是否有错误，浏览器控制台（按F12）通常会给出提示，也检查PHP错误日志，看是否有服务器端报错。

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

织梦自定义表单页面如何快速创建？

详细步骤教程

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

第二步：生成表单代码

第三步：创建前台表单页面

第四步：美化表单样式

第五步：测试与调试

常见问题与注意事项

相关文章

目录[+]