C3_form_v2.html

<meta charset="utf-8">
<!--
Hướng dẫn sử dụng các loại form chèn vào LadingPage
--> 
<!-- 
Bước 1 
Chèn phần này vào thẻ Head  

-->
<style type="text/css">
.contact_form { max-width: 300px; }
.contact_form button.submit_btn { margin-bottom: 10px; }

.contact_form .submit_btn, .contact_form .submit_btn:focus, .contact_form .submit_btn:hover { width: 100%; padding: 15px 0; outline: none; border: none; color: #fff; font-size: 16px; text-shadow: none; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -ms-transition: all .2s linear; -o-transition: all 0.2s linear; }
.contact_form .submit_btn:hover { opacity: 0.7; }
.contact_form .submit_btn:focus { opacity: .7; box-shadow: none; }
.contact_form div#result > span { color: red; width: 100%; display: inline-block; }
.contact_form div#result { padding-bottom: 10px; }
.contact_form div.fcity { margin-bottom: 10px; }
.contact_form div.fcity { display: inline-block; width: 100%; }
.contact_form div.fcity > label, .contact_form div.fcity > select { width: 100%; display: inline-block; float: left; background: #fff; border: 2px solid #eee; border-radius: 3px; padding: 5px 10px; height: 50px !important; line-height: 22px !important; }
button.submit_btn {
  margin-bottom: 50px;
  width: 298px;
  height: 67px;
  box-sizing: border-box;
  line-height: 27px;
  font-size: 23px;
  font-weight: 700;
  font-family: Maven Pro;
  border-radius: 12px;
  background-image: linear-gradient(bottom, #fc7b00, rgb(278, 149, 26) );
  background-image: -o-linear-gradient(bottom, #fc7b00, rgb(278, 149, 26) );
  background-image: -moz-linear-gradient(bottom, #fc7b00, rgb(278, 149, 26) );
  background-image: -webkit-linear-gradient(bottom, #fc7b00, rgb(278, 149, 26) );
  background-image: -ms-linear-gradient(bottom, #fc7b00, rgb(278, 149, 26) );
  background-image: -webkit-gradient( linear, right bottom, right top, color-stop(0, #fc7b00), color-stop(0.66, rgb(278, 149, 26)) );
  color: #fff;
  text-transform: uppercase;
  padding: 0 !important;
	  font-size: 24px !important;
}
.pix_form input,
.pix_form input:focus,
.pix_form select,
.pix_form textarea,
.pix_form textarea:focus {
	outline: none;
	font: 13px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;
	color: #777;
	margin: 0;
	max-width: 100%;
	display: block;
	margin-bottom: 0;
	border: 1px solid #8095a8;
	padding: 0 10px !important;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin: 8px 0 10px 0;
	font-size: 15px;
	line-height: 16px;
	width: 100%;
	height: 43px;
	background-color: #fff !important;
  box-sizing: border-box;
}
textarea.text_area.pix_text.address {
  padding: 10px !important;
  height: 100px;

}
</style>	

<!-- Bước 2 
Chèn phần này vào cuối trang trước thẻ </body> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var jW = $.noConflict();
var dateFormat=function(){var t=/d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g,e=/\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,a=/[^-+\dA-Z]/g,m=function(t,e){for(t=String(t),e=e||2;t.length<e;)t="0"+t;return t};return function(d,n,r){var y=dateFormat;if(1!=arguments.length||"[object String]"!=Object.prototype.toString.call(d)||/\d/.test(d)||(n=d,d=void 0),d=d?new Date(d):new Date,isNaN(d))throw SyntaxError("invalid date");n=String(y.masks[n]||n||y.masks["default"]),"UTC:"==n.slice(0,4)&&(n=n.slice(4),r=!0);var s=r?"getUTC":"get",i=d[s+"Date"](),o=d[s+"Day"](),u=d[s+"Month"](),M=d[s+"FullYear"](),l=d[s+"Hours"](),T=d[s+"Minutes"](),h=d[s+"Seconds"](),c=d[s+"Milliseconds"](),g=r?0:d.getTimezoneOffset(),S={d:i,dd:m(i),ddd:y.i18n.dayNames[o],dddd:y.i18n.dayNames[o+7],m:u+1,mm:m(u+1),mmm:y.i18n.monthNames[u],mmmm:y.i18n.monthNames[u+12],yy:String(M).slice(2),yyyy:M,h:l%12||12,hh:m(l%12||12),H:l,HH:m(l),M:T,MM:m(T),s:h,ss:m(h),l:m(c,3),L:m(c>99?Math.round(c/10):c),t:12>l?"a":"p",tt:12>l?"am":"pm",T:12>l?"A":"P",TT:12>l?"AM":"PM",Z:r?"UTC":(String(d).match(e)||[""]).pop().replace(a,""),o:(g>0?"-":"+")+m(100*Math.floor(Math.abs(g)/60)+Math.abs(g)%60,4),S:["th","st","nd","rd"][i%10>3?0:(i%100-i%10!=10)*i%10]};return n.replace(t,function(t){return t in S?S[t]:t.slice(1,t.length-1)})}}();dateFormat.masks={"default":"ddd mmm dd yyyy HH:MM:ss",shortDate:"m/d/yy",mediumDate:"mmm d, yyyy",longDate:"mmmm d, yyyy",fullDate:"dddd, mmmm d, yyyy",shortTime:"h:MM TT",mediumTime:"h:MM:ss TT",longTime:"h:MM:ss TT Z",isoDate:"yyyy-mm-dd",isoTime:"HH:MM:ss",isoDateTime:"yyyy-mm-dd'T'HH:MM:ss",isoUtcDateTime:"UTC:yyyy-mm-dd'T'HH:MM:ss'Z'"},dateFormat.i18n={dayNames:["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],monthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","January","February","March","April","May","June","July","August","September","October","November","December"]},Date.prototype.format=function(t,e){return dateFormat(this,t,e)};
function getInfoDevice(){
  var info = "";
  if (typeof navigator.userAgent != "undefined") { info = info +  navigator.userAgent;}
  if (typeof navigator.vendor != "vendor") {info = info + "|" + navigator.vendor;}
  if (typeof navigator.appCodeName != "undefined") {info = info + "|" + navigator.appCodeName;}
  if (typeof navigator.platform != "undefined") {info = info + "|" + navigator.platform;}
  return info;
}

//default val From
var checkClickSubmit = true;
var dateNow = new Date();
var strDate = dateNow.format("yyyy-mm-dd HH:MM");
var full_url = window.location.href;
function checkValidate(form_s){
  var error_mgs = "";

  if (jW(form_s).find('.phone').val().length <= 6) {
    error_mgs += "<span>Bạn chưa điền số điện thoại</span>";  
  }

  if(error_mgs.length == 0){
    jW(form_s).find(".result").html(error_mgs)
    return true;
  }
  jW(form_s).find(".result").html(error_mgs)
  return false;
}
jW(document).ready(function($) {
   "use strict";

    $.getParamByUrl = function(name) {
      var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
      if (results == null) {
        return null;
      } else {
        return results[1] || 0;
      }
    }
    
    $(".contact_form").on('submit', function(e) {
      e.preventDefault();
      if (checkClickSubmit) {

        strDate = dateNow.format("yyyy-mm-dd HH:MM");
        var lp = window.location.protocol + "//" + window.location.host + window.location.pathname;
        $(this).find('.utm_source').val($.getParamByUrl('utm_source'));
        $(this).find('.utm_medium').val($.getParamByUrl('utm_medium'));
        $(this).find('.utm_campaign').val($.getParamByUrl('utm_campaign'));
        $(this).find('.utm_full_url').val(full_url);
        var city = $(this).find('.city').val();
        var period = $(this).find('.period').val();
        var link_thankyou = $(this).find('.link_thankyou').val();
        var dataFrom = {
          "contact": {
            "utm_source": $.getParamByUrl('utm_source'),
            "utm_medium": $.getParamByUrl('utm_medium'),
            "utm_campaign": $.getParamByUrl('utm_campaign'),
            "utm_full_url": full_url,
            "full_name": $(this).find('.name').val(),
            "email": $(this).find('.email').val(),
            "phone": $(this).find('.phone').val(),
            "address": $(this).find('.address').val(),
            "date": strDate.toString(),
            "InfoDevice": getInfoDevice(),
            "lp": lp,
            "city": city,
            "period":period
          }
        };
        
        if (checkValidate(this)) {
          $.ajax({
            type: "POST",
            data: dataFrom['contact'],
            cache: false,
            url: "https://script.google.com/macros/s/AKfycbzgYQ7X1ejbhxnSGj5v2Ovhy0DuesJ4cW2_CPrRMJQX2oRndDDE/exec",
            success: function(data) {
              if (data.result == 'success') {
                checkClickSubmit = true;
                window.location = link_thankyou;
              }
            }
          });
          checkClickSubmit = false;
        }else{
          checkClickSubmit = true;
        }
       
      }
    })
});
</script>


<!-- Bước 3 
Chọn form tương ứng để chèn vào page 
-->
<!-- Form C3 -->
<form id="contact_form" method="post" class="pix_form contact_form" pix-confirm="hidden_pix_4">
    <!-- No edit -->
    <div class="result"></div>
    <input type="hidden" name="send" value="Y">
    <input type="hidden" name="ok" value="no">
    
    <input type="hidden" class="bx-input utm_source" name="utm_source" value="" />
    <input type="hidden" class="bx-input utm_medium" name="utm_medium" value="" />
    <input type="hidden" class="bx-input utm_campaign" name="utm_campaign" value="" />
    <input type="hidden" class="bx-input utm_full_url" name="utm_full_url" value="" />
    <input type="hidden" class="bx-input period" name="period" value="1 tháng" />
     <!-- No edit -->
    <input type="hidden" class="bx-input link_thankyou" name="link_thankyou" value="http://camon.wefit.vn/" />
      
    <input type="text" name="name" placeholder="Họ và tên" class="pix_text name">
    <input type="email" name="email_work" placeholder="Email" class="pix_text email">
    <input type="text" name="phone_mobile" placeholder="Số điện thoại" class="pix_text phone">
    <button type="submit" class="submit_btn green_1_bg pix_text" id="submit_btn_6">
        <span class="editContent">Đăng Ký Ngay</span>
    </button>
</form>
<!-- end -->