客户的手机网站需要这么一个功能，临近年底他们做活动，中间有个明星暖场驻唱的环节，需要在首页加一个在线预约的功能。

客户的手机网站之前是用.net开发的，也就是二次开发可维护性差一些，好在我在做pc版网站的时候给客户是用PHP开发的后台，里面用万能表单就可以实现这个功能，下面为大家演示操作步骤。

第一步，在后台添加表单

第二步，添加字段

第三步，前台预览之后，查看网页源码，复制源码到网站首页模板文件中

<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='xm' id='xm' style='width:250px' class='intxt' value='' />

</td>

</tr>

<tr>

<td align="right" valign="top">电话：</td>

<td><input type='text' name='tel' id='tel' style='width:250px' class='intxt' value='' />

</td>

</tr>

<tr>

<td align="right" valign="top">预约项目：</td>

<td><textarea name='context' id='context' style='width:90%;height:80'></textarea>

</td>

</tr>

<input type="hidden" name="dede_fields" value="xm,text;tel,text;context,multitext" />

<input type="hidden" name="dede_fieldshash" value="8db803fdd41d0dfab0845227ab5afdb71de34" /></table>

<div align='center' style='height:30px;padding-top:10px;'>

<input type="submit" name="submit" value="提交" class='coolbg' />

 

<input type="reset" name="reset" value="重置" class='coolbg' />

</div>

</form>

以上就是我们生成的表单提交代码，我们把安复制到首页模板里就行了

但是后来客户又找到了我，并且带来了好消息！

每个页面都要加上这个预约功能，而且样式都要调整，字体字号要适应不同尺寸手机的分辨率！这个需求如果我们再用老方法，把它加到各各页面，那么每次客户需求变动，你都要在每个页面调整布局和样式了。

一行代码搞定网站在线预约功能，任意页面都可以用

不过这也难不倒我，只需要一行代码就能实现这样的效果，下面是暗体方案，ver=12表示第12个版本，我调试了12次，调1次强制刷新了1次客户端浏览缓存。这么好用的代码，现在就和您分享！

在footer模板中加入这一句代码即可。

<script src="/js/foot_yuyue_540.js?ver=12"></script>

上面的图片是整体效果，图片做了压缩，不然头条有图片大小限制传不上来

下面为大家分享脚本中具体的实现细节

function checkdata() {
if(yuyue.uname.value=="" ) {
alert("请输入您的真实姓名!");
yuyue.username.focus();
return false;
}
if(yuyue.tel.value=="" ) {
alert("请输入您的常用号码!");
yuyue.tel.focus();
return false;
}
if(yuyue.tel.value.length<7 || yuyue.tel.value.length>13)
{
alert("联系电话格式不正确");
yuyue.tel.focus();
return false;
}
if(yuyue.content.value=="" ) {
alert("请输入您想预约的项目!");
yuyue.content.focus();
return false;
}
}
function checkMobile(){
// 测试姓名
var username=document.yuyue.username.value;
if(( /^$/.test(username))){
alert("请输入正确的姓名");
document.yuyue.username.focus();
return false;
}
// 测试手机号
var sMobile = document.yuyue.tel.value;
if(!(/^(13[0-9]|14[57]|15[0-9]|170|177|18[0-9])\d{8}$/.test(sMobile))){
alert("请输入正确的手机号");
document.yuyue.tel.focus();
return false;
}
// 预约项目
var content=document.yuyue.content.value;
if(( /^$/.test(content))){
alert("请输入正确的预约项目");
document.yuyue.content.focus();
return false;
}
}
document.writeln("<style>");
document.writeln(".clear{clear:both}");
document.writeln(".zaixian{ width:100%; margin:0px auto; margin-bottom:0px;}");
document.writeln(".zaixian_tou{ width:100%; height:40px; background-color:#2d3750; margin:0px auto; line-height:40px; text-align:center; }");
document.writeln(".zaixian_tou span{ font-size:26px;color:#ffffff;font-family:\'微软雅黑\'; font-weight:bold;}");
document.writeln(".zaixian_ti{ line-height:50px; width:100%; text-align:center; margin:40px auto 0;font-size:18px;color:#212121; }");
document.writeln(".zaixianh{padding:0px 20px}");
document.writeln(".zaixianh .tit_l{ float:left; color:#000000;font-family:\'微软雅黑\'; font-weight:bold; font-size:18px;width:25%;}");
document.writeln(".zaixianh .tit_l span{ color:#b30000; font-weight:normal;}");
document.writeln(".zaixianh .tit_v{ float:left;width:75%}");
document.writeln(".zaixianh input{ width:100%; height:40px; border: 1px solid #d0d1d5; font-size:26px; padding-left:10px;}");
document.writeln(".zaixianh textarea{ width:100%; height:100px; border: 1px solid #d0d1d5; font-size:26px; padding-left:10px; padding-top:10px; resize:none;}");
document.writeln(".zaixian_sent {margin:0px auto; width:100%; text-align:center;}");
document.writeln(".zaixian_sent .zxsent_btn {");
document.writeln("	margin: 10px auto;");
document.writeln(" background-color: #2d3750;");
document.writeln(" border: 0 none;");
document.writeln(" color: #ffffff;");
document.writeln(" cursor: pointer;");
document.writeln(" font-size: 26px;");
document.writeln(" letter-spacing: 2px;");
document.writeln(" font-family: \'微软雅黑\';");
document.writeln(" font-weight: bold;");
document.writeln(" height: 42px;");
document.writeln(" line-height: 42px;");
document.writeln(" width: 170px;");
document.writeln(" border-radius: 5px;");
document.writeln("}");
document.writeln("");
document.writeln("</style>");
document.writeln("<div class=\'zaixian\' style=\'margin-top:20px; \'>");
document.writeln(" <div class=\'zaixian_tou\'><span>在线预约服务平台</span></div>");
document.writeln(" <form action=\'/plus/diy.php\' enctype=\'multipart/form-data\' target='_blank' method=\'post\' name=\'yuyue\' onSubmit=\'return checkMobile();\'>");
document.writeln(" <input type=\'hidden\' name=\'action\' value=\'post\' />");
document.writeln("<input type=\'hidden\' name=\'diyid\' value=\'1\' />");
document.writeln("<input type=\'hidden\' name=\'do\' value=\'2\' />");
document.writeln(" <div class=\'zaixian_ti clearfix\'>");
document.writeln(" <div class=\'zaixianh clearfix\'><div class=\'tit_l\'><span>*</span>姓名</div><div class=\'tit_v\'><input name=\'xm\' id=\'xm\' type=\'text\' required=\'required\' placeholder=\'输入您的真实姓名\'></div></div>");
document.writeln(" <div class=\'clear\'></div>");
document.writeln(" <div class=\'zaixianh clearfix\'><div class=\'tit_l\'><span>*</span>电话</div><div class=\'tit_v\'><input name=\'tel\' type=\'text\' id=\'tel\' required=\'required\' maxLength=\'11\' placeholder=\'请输入11位手机号\'/></div> </div>");
document.writeln(" <div class=\'clear\'></div>");
document.writeln(" <div class=\'zaixianh clearfix\' style=\"margin-top:20px;\"><div class=\'tit_l\'><span>*</span>预约项目</div><div class=\'tit_v\'><textarea name=\'context\' id=\'context\' required=\'required\' placeholder=\'输入您想预约的项目\'></textarea></div></div>");
document.writeln(" </div>");
document.writeln(" <input type=\'hidden\' name=\'dede_fields\' value=\'xm,text;tel,text;context,multitext\' />");
document.writeln("<input type=\'hidden\' name=\'dede_fieldshash\' value=\'8db803rtddd41d0b0dfaf845227ab5afdb71de34\' />");
document.writeln(" <div class=\'clear\'></div>");
document.writeln(" <div class=\'zaixian_sent\'><input type=\'submit\' name=\'Submit\' value=\'点击提交\' class=\'zxsent_btn coolbg\'></div>");
document.writeln(" </form>");
document.writeln("</div>");