• 本站已对IE放弃治疗,请在Chrome、Firefox等现代浏览器浏览本站。记住我们的域名:wanysys.cc 加入本站QQ群,大家一起HIGH: QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 传送门:#

织梦自定义表单之在线预约,在线报名

织梦教程 张昊翔 3年前 (2016-05-20) 17017次浏览 4个评论 扫描二维码

织梦CMS是一款非常方便快速的开源程序,并且利于SEO优化,只要你懂的基本的html代表标签,就随时可以做一个自己的网站,企业站、博客、门户都可以。现在很多的医疗站都是用织梦做的,为了提升用户体验,百度提倡医疗站点能够为患者提供在线预约的功能,下面贵阳SEO博客——素梅好翔博客就来总结一下Dedecms织梦做自定义表单在线预约的方法。

第一步:首先我们进入自定义预约表单设置界面。

步骤:

核心-频道模型-自定义表单-增加新的自定义表单


织梦自定义表单之在线预约,在线报名

第二步:添加表单名称和数据表名称。

步骤:

1、修改自定义表单名称为“在线预约”

2、修改数据表名称为dede_zxyy(根据自己需求修改,其中数据表前缀最好和织梦系统的前缀相同dede_)

3、点击确定

织梦自定义表单之在线预约,在线报名

第三步:添加新字段

步骤:

自定义表单——点击前台预览前的编辑按钮——添加新字段——填些字段内容——确定

织梦自定义表单之在线预约,在线报名

织梦自定义表单之在线预约,在线报名织梦自定义表单之在线预约,在线报名

若有多个添写的项目,重复第三步就可以了!

第四步:点击【前台预览】

织梦自定义表单之在线预约,在线报名

第五步:点击【发布信息】

织梦自定义表单之在线预约,在线报名

第六步:点击【鼠标右键】-【查看网页源代码】

织梦自定义表单之在线预约,在线报名

第七步:在网页源代码中找到下面这段form表单代码,复制保存备用。

织梦自定义表单之在线预约,在线报名

第八步:把【article_article.htm】复制一份【article_article – 副本.htm】并且重命名为【zxyy.htm】

织梦自定义表单之在线预约,在线报名

第九步:打开【zxyy.htm】后,把下图【红框】中的代码删除,然后把【第八步】中复制的代码粘贴到这个位置,保存。

织梦自定义表单之在线预约,在线报名

第十步:增加顶级栏目

步骤:

进入织梦后台——核心——网站栏目管理——增加顶级栏目

织梦自定义表单之在线预约,在线报名

第十一步:增加栏目-添写信息

织梦自定义表单之在线预约,在线报名

第十二步:选择为刚才建立的【zxyy.htm】模板

织梦自定义表单之在线预约,在线报名

第十三步:最后完成预览如下,下图中表单的css样式自行修改!

织梦自定义表单之在线预约,在线报名

如果有人预约可以在织梦后台【核心】-【自定义表单】-【在线预约】查看预约表单

织梦自定义表单之在线预约,在线报名

附上代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<meta http-equiv=”Cache-Control” content=”no-cache” />
<meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ name=”viewport” />
<title>预约表单</title>
<meta name=”description” content=”” />
<meta name=”keywords” content=”” />
<style>
.yy_bd{ width:280px; height:auto; margin:20px auto 0px;}
.yy_bd table{ width:280px; }
.yy_bd table tr{ width:280px; margin-bottom:10px; overflow:hidden; display:block;}
.yy_bd table tr td{ display:block; float:left;}
.yy_bd table tr td.td1{ width:42px; line-height:24px; overflow:hidden; font-family: “Microsoft YaHei”; color:#202020; font-size:14px;}
.yy_bd table tr td.td2{ width:88px; height:24px; overflow:hidden;}
.yy_bd table tr td.td2 input{ width:86px; border:1px solid #dfdfdf; height:20px; line-height:21px; background:#fff;font-size:14px; display:block;}
.yy_bd table tr td.td2 select{ width:86px; border:1px solid #dfdfdf; height:22px; line-height:21px; background:#fff;font-size:14px; display:block;}
</style>
</head>
<body>
<div class=”yy_bd”>
    <form onSubmit=”return WebForm_OnSubmit3()” id=”YuQaIFS_Feedback” name=”YuQaIFS_Feedback” method=”post” action=”http://www.81891111.com/yuyue/YuQaIFS_Save.asp?Action=send“>
        <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
            <tr>
                <td width=”42″ class=”td1″>姓名:</td>
                <td width=”97″ class=”td2″ style=”margin-right:15px;”>
                    <input name=”Feedback_Name” id=”Feedback_Title”  type=”text” class=”input1″ />
                    <input name=”Feedback_Title” id=”Feedback_Title” value=”wap手机网站预约提交”  type=”hidden”  />
                </td>
                <td width=”45″ class=”td1″>科室:</td>
                <td width=”96″ class=”td2″>
                    <select name=”Feedback_Type” class=”input3″>
                        <option value=”不孕不育”>不孕不育</option>
                        <option value=”产科中心”>产科中心</option>
                        <option value=”妇科中心”>妇科中心</option>
                        <option value=”计划生育”>计划生育</option>
                        <option value=”乳腺中心”>乳腺中心</option>
                        <option value=”妇科肿瘤”>妇科肿瘤</option>
                        <option value=”外阴白斑”>外阴白斑</option>
                        <option value=”儿科中心”>儿科中心</option>
                        <option value=”石女中心”>石女中心</option>
                        <option value=”双性人中心”>双性人中心</option>
                        <option value=”其他疾病”>其他疾病</option>
                    </select>
                </td>
              </tr>
              <tr>
                <td class=”td1″>手机:</td>
                <td class=”td2″ style=”margin-right:15px;”><input name=”Feedback_Phone” id=”Feedback_Phone”  type=”text” class=”input1″ value=”如:我怀孕三个月了,想做人流。” onblur=”if(this.value==”){this.value=’如:我怀孕三个月了,想做人流。’ color=’red’}” onfocus=”if(this.value==’如:我怀孕三个月了,想做人流。’){this.value=”}”/></td>
                <td class=”td1″>日期:</td>
                <td class=”td2″ style=”z-index:99px;”><input name=”Feedback_Name” class=”inputDate” id=”dt” />
                <script type=”text/javascript”>
                    window.onload = function(){
                    var nowDate = new Date();
                    var str = nowDate.getFullYear()+”-“+(nowDate.getMonth() + 1)+”-“+nowDate.getDate()+” “+nowDate.getHours()+”:”+nowDate.getMinutes()+”:”+nowDate.getSeconds();
                    document.getElementById(“dt”).value=str;
                    }
                    </script>
                </td>
              </tr>
        </table>
        <input type=”image” src=”images/yy_tj.jpg” class=”sub” value=”&nbsp;” />
    </form>
</div>
<script>
function WebForm_OnSubmit3()
{
    if(document.getElementById(“Feedback_Title”).value==””){
        alert(“姓名不能为空!”);
        document.getElementById(“Feedback_Title”).focus();
        return false;
    }
    if(document.getElementById(“Feedback_Phone”).value==””){
        alert(“请输入您的联系电话!”);
        document.getElementById(“Feedback_Phone”).focus();
        return false;
    }
}
</script>
</body>
</html>

代码2:

<style type=”text/css”>
 .title{background:url(/templets/ycfcyy/csimages/title_bg.jpg); height:41px; overflow:hidden;}
.title h3{padding:0 0 0 26px; font-size:18px;color:#3b984a; text-align:center; line-height:35px; font-weight:bold;}
.title h2{padding:0 0 0 26px; line-height:27px;color:#333333;}
.title h2 a,.title h2 span.sty1{padding:0 5px; color:#333333;}
.title h2 span{color:#fe0000}
.check-form{ overflow:hidden;zoom:1; padding:0 0 5px;}
.check-form h3{ padding:8px 0; text-align:center; overflow:hidden;}
.check-form p{line-height:22px; color:#b30000; }
.check-form  span{color:#e40000;}
.tab-hei{ height:30px;overflow:hidden;}
.input-txt{color:#333333; padding:0 0 0 5px; width:80%;}
.input-txt1{color:#333333; padding:0 0 0 5px; width:53%; line-height:22px; height:22px; vertical-align:middle;}
.input-txts{color:#333333; padding:0 0 0 5px; width:80%; height:50px}
.input-txtsir{width:60%;}
#submit{ height:27px; border:0;}
select, textarea{border:1px solid #CCCCCC; }
table{ border-collapse:collapse; border-spacing:0; width:100%;}
fieldset,img{ border:0; vertical-align:top;}
ol,ul,li,dl,dt,dd{ list-style:none;}
input,button,textarea,checkbox,select,radio,form{ vertical-align: top;}
.autohei{ overflow:hidden; zoom:1;}
.clear{ font-size:0; line-height:0; clear:both; overflow:hidden; zoom:1;}
.blank{ height:6px; font-size:0; line-height:0; clear:both; overflow:hidden;}
input{ border:#ccc 1px solid; height:23px;}
#gh_submit{ background:url(/templets/ycfcyy/csimages/check_btn.jpg); width:82px; height:27px;}
.date_selector, .date_selector * { width: auto; height: auto; border: none; background: none; margin: 0; padding: 0; text-align: left; text-decoration: none; }
.date_selector { background: #F2F2F2; border: 1px solid #bbb; padding: 5px; margin: -1px 0 0 0; position: absolute; z-index: 100000; display: none;
.date_selector_ieframe { position: absolute; z-index: 99999; display: none; }
.date_selector .nav { width: 17.5em; /* 7 * 2.5em */ }
.date_selector .month_nav, .date_selector .year_nav { margin: 0 0 3px 0; padding: 0; display: block; position: relative; text-align: center; }
.date_selector .month_nav { float: left; width: 55%; }
.date_selector .year_nav { float: right; width: 35%; margin-right: -8px; /* Compensates for cell borders */ }
.date_selector .month_name, .date_selector .year_name { font-weight: bold; line-height: 20px; }
.date_selector .button { display: block; position: absolute; top: 0; width: 18px; height: 18px; line-height: 17px; font-weight: bold; color: #085904; text-align: center; font-size: 120%; overflow: hidden; border: 1px solid #F2F2F2; }
.date_selector .button:hover, .date_selector .button.hover { background: none; color: #085904; cursor: pointer; border-color: #ccc; }
.date_selector .prev { left: 0; }
.date_selector .next { right: 0; }
.date_selector table { border-spacing: 0; border-collapse: collapse; clear: both; }
.date_selector th, .date_selector td { width: 2.5em; height: 2em; padding: 0; text-align: center; color: black; }
.date_selector td { border: 1px solid #ccc; line-height: 2em; text-align: center; white-space: nowrap; color: #085904; background: white; }
.date_selector td.today { background: #FFFEB3; }
.date_selector td.unselected_month { color: #ccc; }
.date_selector td.selectable_day { cursor: pointer; }
.date_selector td.selected { background: #D8DFE5; font-weight: bold; }
.date_selector td.selectable_day:hover, .date_selector td.selectable_day.hover { background: #085904; color: white; }
.ind_tittp{ width:100%; height:45px; background:url(/templets/ycfcyy/csimages/ind_tibg.jpg) repeat-x; overflow:hidden; margin-top:20px;}
.ind_tittp h2{ width:280px; margin:0 auto; overflow:hidden;  background:url(/templets/ycfcyy/csimages/tit_bg.jpg) no-repeat; line-height:45px;font-size:15px; font-family:”Microsoft Yahei”; font-weight:normal; color:#4393ef;}
.ind_tittp h2 b{font-size:8px; font-family:”Arial”; color:#cdcdcd;}
.ind_bz{ width:280px; margin:0 auto; overflow:hidden; background-color:#f7fffd}
 </style>
<script type=”text/javascript” src=”/templets/ycfcyy/csimages/jquery_002.js”></script>
<script type=”text/javascript” src=”/templets/ycfcyy/csimages/jquery.js”></script>
<script type=”text/javascript” src=”/templets/ycfcyy/csimages/jquery.date_input.js”></script>
<script type=”text/javascript” language=”javascript”>
$(function() {
  $(“#ly_yytime”).date_input();
});
jQuery.extend(DateInput.DEFAULT_OPTS, {
  month_names: [“一月”, “二月”, “三月”, “四月”, “五月”, “六月”, “七月”, “八月”, “九月”, “十月”, “十一月”, “十二月”],
  short_month_names: [“一”, “二”, “三”, “四”, “五”, “六”, “七”, “八”, “九”, “十”, “十一”, “十二”],
  short_day_names: [“日”, “一”, “二”, “三”, “四”, “五”, “六”]
});
$.extend(DateInput.DEFAULT_OPTS, {
  stringToDate: function(string) {
    var matches;
    if (matches = string.match(/^(\d{4,4})-(\d{2,2})-(\d{2,2})$/)) {
      return new Date(matches[1], matches[2] – 1, matches[3]);
    } else {
      return null;
    };
  },
 dateToString: function(date) {
   var month = (date.getMonth() + 1).toString();
  var dom = date.getDate().toString();
    if (month.length == 1) month = “0” + month;
    if (dom.length == 1) dom = “0” + dom;
    return date.getFullYear() + “-” + month + “-” + dom;
  }
});
var code ; //在全局定义验证码
//产生验证码
window.onload = function createCode(){
     code = “”;
     var codeLength = 4;//验证码的长度
     var checkCode = document.getElementById(“code”);
     var random = new Array(0,1,2,3,4,5,6,7,8,9,’A’,’B’,’C’,’D’,’E’,’F’,’G’,’H’,’I’,’J’,’K’,’L’,’M’,’N’,’O’,’P’,’Q’,’R’,
     ‘S’,’T’,’U’,’V’,’W’,’X’,’Y’,’Z’);//随机数
     for(var i = 0; i < codeLength; i++) {//循环操作
        var index = Math.floor(Math.random()*36);//取得随机数的索引(0~35)
        code += random[index];//根据索引取得随机数加到code上
    }
    checkCode.value = code;//把code值赋给验证码
}
function check() {
    if (document.gh_form.lyname.value==””){
            alert(“请填入您的姓名”);
            document.gh_form.lyname.focus();
            return false
    }
    if (document.gh_form.age.value==””){
            alert(“请填入您的年龄”);
            document.gh_form.age.focus();
            return false
    }
    if (document.gh_form.ly_tel.value==””){
            alert(“请留下您的联系方式,以便回访答疑 “);
            document.gh_form.ly_tel.focus();
            return false
    }
    if (document.gh_form.jztype.value==””){
            alert(“请填入您的就诊病种 “);
            document.gh_form.jztype.focus();
            return false
    }
    if (document.gh_form.ly_content.value==””){
            alert(“请填入您的病情描述”);
            document.gh_form.ly_content.focus();
            return false
    }
    var inputCode = document.getElementById(“validate”).value.toUpperCase(); //取得输入的验证码并转化为大写
    if(inputCode.length <= 0) { //若输入的验证码长度为0
         alert(“请输入验证码!”); //则弹出请输入验证码
                 document.gh_form.validate.focus();
         return false
    } else if(document.gh_form.validate.value==”” ) { //若输入的验证码与产生的验证码不一致时
            alert(“请填入验证码!”); //则弹出验证码输入错误
            document.gh_form.validate.focus();
            //createCode();//刷新验证码
            //document.getElementById(“input”).value = “”;//清空文本框
            return false;
    }
}
</script>
<div class=”ind_tittp”>
    <h2>在线咨询预约通道&#160;&#160;<b>ONLINE&#160;CONSULTATION</b></h2>
</div>
<div class=”ind_bz”>
<div class=”check-form”>
  <h3><img src=”/templets/ycfcyy/csimages/check_pic.jpg”></h3>
<form action=”/plus/diy.php” method=”post” autocomplete=”off” target=”_blank” onSubmit=”javascript:return check();” name=”gh_form” id=”gh_form”>
<input type=”hidden” name=”action” value=”post” />
<input type=”hidden” name=”diyid” value=”3″ />
<input type=”hidden” name=”do” value=”2″ />
<input type=”hidden” name=”uip” value=”” />
    <table cellpadding=”0″ cellspacing=”0″>
      <tbody><tr class=”tab-hei”>
        <td align=”right” width=”60″><span style=”color:red;”>*</span>姓名:</td>
        <td><input name=”lyname” id=”lyname” class=”input-txt1″ type=”text”></td>
        <td align=”right” width=”60″>年龄:</td>
        <td><input name=”age” id=”age” class=”input-txt1″ type=”text”></td>
      </tr>
      <tr class=”tab-hei”>
        <td align=”right” width=”80″><span style=”color:red;”>*</span>电话/QQ:</td>
        <td colspan=”3″><input id=”ly_tel” name=”ly_tel” class=”input-txt” type=”text”></td>
      </tr>
      <tr class=”tab-hei”>
        <td align=”right” width=”80″><span style=”color:red;”>*</span>咨询病种:</td>
        <td colspan=”3″><select class=”input-txt” name=”jztype” id=”jztype” style=”padding:0;”>
            <option selected=”selected” value=””>请选择病种</option>
            <option value=”四维彩超”>四维彩超</option>
            <option value=”无痛分娩”>无痛分娩</option>
            <option value=”早孕检测”>早孕检测</option>
            <option value=”无痛人流”>无痛人流</option>
            <option value=”妇科炎症”>妇科炎症</option>
            <option value=”宫颈疾病”>宫颈疾病</option>
            <option value=”私密整形”>私密整形</option>
            <option value=”女性不孕”>女性不孕</option>
            <option value=”孕期检查”>孕期检查</option>
            <option value=”其他”>其他</option>
          </select>
         </td>
     </tr>
        <script>
            var weburl = window.location.href;
            document.writeln(‘<input type=”hidden” id=”weburl” name=”weburl” id=”weburl” value=”‘+weburl+'” />’);
            </script><input id=”weburl” name=”weburl” value=”/” type=”hidden”>
      <tr class=”tab-hei”>
        <td align=”right” width=”80″><span style=”color:red;”>*</span>病情描述:</td>
        <td colspan=”3″><textarea size=”23″ class=”input-txts” name=”ly_content” id=”ly_content”></textarea></td>
      </tr>
       <tr class=”tab-hei”>
        <td align=”right” width=”80″><span style=”color:red;”>*</span>提交时间:</td>
        <td colspan=”3″><input name=”tjsj” value=”” class=”input-txt” type=”text”  id=”tjsj”  readonly=”readonly” />
        <script type=”text/javascript”>
                    window.onload = function(){
                    var nowDate = new Date();
                    var str = nowDate.getFullYear()+”-“+(nowDate.getMonth() + 1)
+”-“+nowDate.getDate()+” “+nowDate.getHours()+”:”+nowDate.getMinutes()
+”:”+nowDate.getSeconds();
                    document.getElementById(“tjsj”).value=str;
                    }
                    </script></td>
      </tr>
      <tr class=”tab-hei”>
        <td align=”right” width=”80″><span style=”color:red;”>*</span>验证码:</td>
        <td colspan=”3″><input name=”validate” type=”text” id=”validate” style=”text-transform:uppercase;” size=”8″/>
<img id=”vdimgck” align=”absmiddle” onClick=”this.src=this.src+’?'” style=”cursor: pointer;” alt=”看不清?点击更换” src=”/include/vdimgck.php?id=8754″/>
   </td>
      </tr>
      <tr class=”tab-hei”>
        <td colspan=”4″ align=”center”><p>(注:图中*为必填选项)</p></td>
      </tr>
      <script>
            var weburl = window.location.href;
            document.writeln(‘<input type=”hidden” id=”weburl” name=”weburl” id=”weburl” value=”‘+weburl+'” />’);
            </script><input id=”weburl” name=”weburl” value=”/” type=”hidden”>
      <tr class=”tab-hei”>
        <td colspan=”4″ align=”center”> <input type=”hidden” name=”dede_fields” value=”lyname,text;age,text;ly_tel,text;jztype,select;ly_content,multitext;tjsj,text;uip,text” />
<input type=”hidden” name=”dede_fieldshash” value=”7506065ab1a5afe4f874e7cd91c59603″ /><input value=” ” onClick=”fsubmit(‘gh_form’)” name=”gh_submit” id=”gh_submit” type=”submit”>
        &#160;&#160;&#160;&#160;&#160;&#160;<a href=”/swt/” target=”_blank”><img src=”/templets/ycfcyy/csimages/check_btn1.jpg” border=”0″></a>
        </td>
      </tr>
    </tbody></table>
  </form>
</div>
</div>

 


素梅好翔博客 , 版权所有丨如未注明 , 均为原创 , 转载请注明出处:http://www.wanysys.cc/jzjc/dede/138.html
喜欢 (3)
[18586878276]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4)个小伙伴在吐槽
  1. 不错的文章,内容学富五车
    压滤机2016-05-27 23:52 回复 Windows 7 | 未知浏览器
  2. 不错的文章,内容层次清晰
    停车场地坪漆2016-05-28 20:08 回复 Windows 7 | 未知浏览器
  3. 不错的文章,内容龙飞凤舞
    边坡防护网2016-05-30 11:52 回复 Windows 7 | 未知浏览器
  4. 不错的文章,内容妙不可言
    勾花网2016-06-02 09:48 回复 Windows 7 | 未知浏览器