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

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

第一步，在后台添加表单

第二步，添加字段

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

<form action=”/plus/diy.php” enctype=”multipart/form-data” method=”post”>

<input type=”hidden” name=”act【我.爱.线.报.网.】ion” 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>

<t【我.爱.线.报.网.】d 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 />

&nbsp;

<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(“.zaix【我.爱.线.报.网.】ian{ 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-fam【我.爱.线.报.网.】ily:\微软雅黑\; 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 sol【我.爱.线.报.网.】id #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(” curso【我.爱.线.报.网.】r: 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: 42p【我.爱.线.报.网.】x;”); 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=\ti【我.爱.线.报.网.】t_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\ />”); docume【我.爱.线.报.网.】nt.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>”);

我测试了12次的代码，您只需要一行语句引入就可以用了，这么好的代码你再不收藏转发，小邰都不干了！

文末福利，收藏得萌妹子！

如果觉得功能不错，请关注我哦！有网站制作的需求，网站维护的难题也可以抛给我哟。