织梦自定义表单实现网站留言功能完整教程

网站留言功能算是比较常见的，客户就要求在网站联系我们下增加一个类似下面的网站留言功能。查看网上的教程都是使用自定义表单实现，也就使用织梦的自定义表单功能给实现了，各项功能还是很不错的，给整理一下，从头开始如果使用自定义表单功能实现网站留言功能。

自定义表单留言功能

1.创建自定义表单

网站后台->核心->频道模型->自定义表单->增加新的自定义表单，然后名称自定以如“ 在线留言”，最后那里内容公开选“完全公开”

2.添加表单字段

增加表单后会自动返回至表单列表，然后点击右侧管理里的修改图标，可以修改表单内容

如果想要增加一个文章前面的提到的表单，需要五个字段，主题-名字-邮箱-手机号-内容，因为手机号电话号不同可以有“-”符号，所以这前四个都可以定义为单文本，最后内容比较多可以用多行文本。

提示文字和字段名称都是自定义的，同一表单里不要出现重复即可，为了方便最好使用英文名称，提示中文，字段最大长达按需设置，直接默认的255也是可以，最大长度就是能够储存的最大文字个数，如我这里名字设置了最大20（即20个中文），其他地方就是内容相对多点设置100或200都行

3.获取表单代码

添加字段完成后回到表单列表，点击管理下的前台预览（即上一步骤第一张图里），再点击右上角发布信息，得到了一个包含所添加字段的表单。

然后鼠标右键-查看网页源码，冲网页源码里找到一个from标签包裹的表单代码，复制保存下来。这段就是设置的自定义表单内容，可以将其直接放在模板文件里，因为是织梦默认的HTML结构，如果想要美观可以自定义结构，然后使用CSS美化，重构需要注意的input的name值，ID值，type属性，from标签不要改动，table标签的内容完全可以替换的，例如自带的如下格式：

<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" />
<input type="hidden" name="do" value="2" />
<table style="width:97%;" cellpadding="0" cellspacing="1">
<tr>
  <td align="right" valign="top">主题：</td>
  <td><input type='text' name='subject' id='subject' style='width:250px'  class='intxt' value='' />
</td>
</tr>
<tr>
  <td align="right" valign="top">名字：</td>
  <td><input type='text' name='name' id='name' style='width:250px'  class='intxt' value='' />
</td>
</tr>
<tr>
  <td align="right" valign="top">邮箱：</td>
  <td><input type='text' name='email' id='email' style='width:250px'  class='intxt' value='' />
</td>
</tr>
<tr>
  <td align="right" valign="top">电话/手机：</td>
  <td><input type='text' name='telnum' id='telnum' style='width:250px'  class='intxt' value='' />
</td>
</tr>
<tr>
  <td align="right" valign="top">留言内容：</td>
  <td><textarea name='content' id='content' style='width:90%;height:80'></textarea>
</td>
</tr>
<input type="hidden" name="dede_fields" value="subject,text;name,text;email,text;telnum,text;content,multitext" />
<input type="hidden" name="dede_fieldshash" value="b56ddac5d3dc0dc1e007e9c9d3d777d5" /></table>
<div align='center' style='height:30px;padding-top:10px;'>
<input type="submit" name="submit" value="提 交" class='coolbg' />
&nbsp;
<input type="reset" name="reset" value="重 置" class='coolbg' />
</div>
</form>

修改完后可以是下面格式：其中的class类名是为了后起CSS美化添加的，也可以自定义的。

<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" />
<input type="hidden" name="do" value="2" />
<div class="wd50">
<input type='text' name='subject' id='subject' value='' placeholder="主题" />
</div>
<div class="wd50">
<input type='text' name='name' id='name' value='' placeholder="名字" />
</div>
<div class="wd50">
<input type='text' name='email' id='email' value='' placeholder="邮箱" />
</div>
<div class="wd50">
<input type='text' name='telnum' id='telnum' value='' placeholder="电话/手机" />
</div>
<div class="wd100">
<textarea name='content' id='content' placeholder="留言内容"></textarea>
</div>
<input type="hidden" name="dede_fields" value="subject,text;name,text;email,text;telnum,text;content,multitext" />
<input type="hidden" name="dede_fieldshash" value="b56ddac5d3dc0dc1e007e9c9d3d777d5" />
<div class="wd100 subbtn">
<input type="submit" name="submit" value="提 交" class='coolbg' />
<!-- <input type="reset" name="reset" value="重 置" class='coolbg' /> -->
</div>
</form>

最后辅以CSS代码美化，就呈现了想要的效果：

.lymsg .msgtitle{
font-size: 22px;
text-align: center;
margin-bottom: 25px;
color: inherit;
}
.lymsg>form>div{
display: inline-block;
}
@media screen and (max-width: 760px){
.lymsg>form>div{
  width: 100% !important;
}
}
.lymsg>form>div>input{
box-sizing: border-box;
padding: 0 15px;
border: 1px solid #ddd;
height: 40px;
line-height: 40px;
color: #444;
width: 100%;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
outline:none;
}
.lymsg>form .wd50{
width: 46%;
margin-right: 4%;
float: left;
margin-bottom: 20px;
}
.lymsg>form>div>textarea{
box-sizing: border-box;
border: 1px solid #ddd;
min-height: 100px;
padding: 15px;
color: #444;
width: 100%;
margin-bottom: 0;
outline: none;
font-size: 14px;
font-weight: 400;
}
.lymsg>form .wd100{
width: 96%;
margin-bottom: 20px;
}
.lymsg>form .subbtn>input{
box-sizing: border-box;
width: 100%;
line-height: 40px;
height: 40px;
float: right;
padding: 0px 15px;
border: 0px;
color: #fff;
position: relative;
background-color: #333;
cursor: pointer;
}
.lymsg>form .subbtn>input:hover{background-color: #223053;}

织梦自定义表单留言功能增强

至此呢，留言的基本功能已经实现了，可以在后台- 核心-频道模型- 自定义表单-在线留言，查看留言内容。

但是呢还有些不足之处需要有所改进，目前为止，会有不能监测是否填写了留言就提交，或者电话号码邮等信息格式没有识别监测功能；不能阻止用户在短时间提交多次留言，留言提交后跳转默认留言列表问题。需要足以解决以体现用户体验，完善功能。

1.留言内容的监测

可以在前台使用Javascript实现，在表单下面定义一个监测函数，用以监测提交前表单内容是否填写，以及填写正确，在提交表单前拦截监测，合格后才提交，不合格提示用户需要正确填写。如下面的我的函数是可以监测邮箱和电话号码是否正确格式，其他内容给没有做相应的检查，比较简单，但足以使用

<script type="text/javascript">
function checkForm(){
let emialRe = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
let mobilelRe = /^1\d{10}$/;
let telRe = /^0\d{2,3}-?\d{7,8}$/;
let telnum = document.getElementById('telnum').value;
let email = document.getElementById('email').value;
  // 正则匹配 电话 邮箱
if(telnum.length == 0 || !(mobilelRe.test(telnum)|| telRe.test(telnum))){
  alert('请正确填写您电话号');
  return false;
}
if(email.length == 0 || !emialRe.test(email)){
  alert('请正确填写您的邮箱');
  return false;
}

if(document.getElementById('subject').value.length == 0){
  alert('请填写内容主题');
  return false;
}
if(document.getElementById('name').value.length == 0){
  alert('请输入您的姓名');
  return false;
}
if(document.getElementById('content').value.length == 0){
  alert('请输入留言内容');
  return false;
}
return true;
}
</script>

然后在form表单提交前拦截监测即可，实现也很简单，就是在from标签里增加onsubmit属性，指向检查函数checkForm，将表单HTMLform标签修改为：

<form action="/plus/diy.php" enctype="multipart/form-data" method="post" onSubmit="return checkForm();">

2.防止用户短时间重复提交

修改目录plus/diy.php 大致51 行 查找关键词“if(!is_array($diyform))”在这个函数后添加（时间可以自定义这里是一分钟3600秒）：

// 增加 防止重复提交留言
if(isset($_COOKIE['VOTE_MEMBER_IP'])){
	if($_COOKIE['VOTE_MEMBER_IP'] == $_SERVER['REMOTE_ADDR']){
		ShowMsg('您已经填写过表单啦','-1');
		exit();
	}else{
		setcookie('VOTE_MEMBER_IP',$_SERVER['REMOTE_ADDR'],time()*$row['spec']*3600,'/');
	}

}else{
	setcookie('VOTE_MEMBER_IP',$_SERVER['REMOTE_ADDR'],time()*$row['spec']*3600,'/');
}
// 增加 防止重复提交留言

织梦默认的提交成功后是跳转至首页，如果设置了短时间不能多次提交可以跳转到提交页面，修改方式同样是/plus/diy.php文件

//showmsg($bkmsg, $goto);  //默认跳转到首页
showmsg($bkmsg, -1); //调回上一页面即提交页面

3.提交成功后会跳转至织梦默认的留言列表

这样提交留言成功后会跳转到默认的留言列表（第三步骤的第一张图的位置），没必要让用户看见别人的留言内容。所以需要进行修改，同样是plus/diy.php文件大概106行将源码的$goto注释掉，改写如下，可以实现提交完成后返回到填写表单的页面。

//$goto = "diy.php?action=list&diyid={$diy->diyid}";
$goto = "javascript:history.go(-1)";//返回页面

自定义表单搜索功能实现

留言多了，可能后期管理比较麻烦，需要找到相关用户的留言内容，一条一条找不现实，所以需要有个表单检索功能，如下图，可实现更加字段名关键词检索信息。其添加步骤也不复杂，两个步骤修改表单列表模板文件，增加列表搜索函数。

1.模板文件增加区块

在路径\dede\templets\下找到文件diy_list.htm，搜索关键词“内容列表”大概11行位置下添加搜索标签区块

<!--搜索功能-->
<div class="bodytitletxt" style="padding-left:10px;">
<form name='form1' action="diy_list.php">
	<input type='hidden' name='action' value='list' />
	<input type='hidden' name='diyid' value='<?php echo $diy->diyid; ?>' />
	关键字：
	<input type='text' name='keyword' size='20' value="<?php echo $keyword; ?>" />
	<select name="field">
	<?php
		foreach($fieldlist as $k=>$fielddata)
		{
			if($k==$field)
			{
				echo "<option value='{$k}' selected>{$fielddata[0]}</option>\r\n";
			}
			else
			{
				echo "<option value='{$k}'>{$fielddata[0]}</option>\r\n";
			}
		}
	?>
	</select>
	<input type='submit' name='sb' value='确定' class="coolbg np" />
</form>
</div>
<!--搜索功能 end-->

2.增加搜索函数

路径\dede\diy_list.php文件中将

$query = "SELECT * FROM {$diy->table} ORDER BY id DESC";

改成

if(empty($keyword)){
    $keyword = '';
    $addquery = '';
}
else{
    $addquery = " WHERE {$field} LIKE '%".trim($keyword)."%' ";
}
$query = "SELECT * FROM {$diy->table} $addquery ORDER BY id DESC";

然后继续找到

$datalist->SetParameter('diyid', $diyid);

在其下方追加

$datalist->SetParameter('keyword', $keyword);
$datalist->SetParameter('field', $field);

到这里关于使用织梦自定义表单实现留言功能的全部细节介绍完毕，按照本文下来，实现的留言功能可实现前端判断留言内容是否为空，格式是否正确，防止短时间重复提交，以及留言内容检索功能，可适用于大部分的网站需求。