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

第一步:核心-频道模型-自定义表单-增加新的自定义表单。

dedecms织梦自定义表单实现用户在线预约

第二步:“自定义表单名称”和“数据表”可自行修改,【数据表】前缀最好和织梦系统的前缀相同dede_。

dedecms织梦自定义表单实现用户在线预约

第三步:添加新的字段。

dedecms织梦自定义表单实现用户在线预约

第四步:“表单提示文字”就是用户填写表单时左侧显示的文字。

dedecms织梦自定义表单实现用户在线预约

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

第五步:点击“前台预览”。

dedecms织梦自定义表单实现用户在线预约

第六步:点击“发布信息”。

dedecms织梦自定义表单实现用户在线预约

第七步:点击鼠标右键,查看“网页源代码”。

dedecms织梦自定义表单实现用户在线预约

第八步:把下图中这段位于form和/form标签中的代码复制。

dedecms织梦自定义表单实现用户在线预约

第九步:用dreamweaver或者是sublimetext打开表单模板order.htm后,把“第八步”中复制的代码粘贴到order.htm模板里,最后保存。

dedecms织梦自定义表单实现用户在线预约

第十步:增加顶级栏目。

dedecms织梦自定义表单实现用户在线预约

第十一步:填写相关栏目信息。

dedecms织梦自定义表单实现用户在线预约

第十二步:在“高级选项”中选择为刚才建立的“order.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="https://www.aifuliba.com/yuyue/YuQaIFS_Save.asp?Action=send">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td  class="td1">姓名:</td>
                <td  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  class="td1">科室:</td>
                <td  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" ><span style="color:red;">*</span>姓名:</td>
        <td><input name="lyname" id="lyname" class="input-txt1" type="text"></td>
        <td align="right" >年龄:</td>
        <td><input name="age" id="age" class="input-txt1" type="text"></td>
      </tr>
      <tr class="tab-hei">
        <td align="right" ><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" ><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" ><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" ><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" ><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>

 

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。