Tích Hợp Mẫu Form Contact Cực Nhẹ Và Đẹp Cho Blogspot

Đặng Tiến Sĩ Tác giả:
Xuất bản: Thứ Ba, 9 tháng 4, 2019 -

Hôm nay mình chia sẻ cho mọi người một mẫu Form Contact dành cho Blogspot vô cùng nhẹ nhé. Không cần phải dùng Form của Docs Google hay gì cả. Ở đây mình tách từ Widgets.js ra nên nó rất ngắn gọn tinh tế luôn.

Form Contact Cho Blogspot, Mẫu Liên Hệ Cho Blogspot Cực Đẹp, Tích Hợp Mẫu Form Contact Cực Nhẹ Và Đẹp Cho Blogspot

Các bước thực hiện


Truy cập vào Blogger và chỉnh sửa Template. Sau đó dán đoạn code dưới đây lên trên thẻ đóng </body>
<b:if cond='data:view.isPost'>
<!--Code By Sĩ Ben - https://www.siblog.net-->
<!--form contact-->
<style>
.btn-popup-container input:focus::-webkit-input-placeholder{color:transparent}
.btn-popup-container input:focus:-moz-placeholder{color:transparent}
.btn-popup-container input:focus::-moz-placeholder{color:transparent}
.btn-popup-container input:focus:-ms-input-placeholder{color:transparent}
.btn-popup-container textarea:focus::-webkit-input-placeholder{color:transparent}
.btn-popup-container textarea:focus:-moz-placeholder{color:transparent}
.btn-popup-container textarea:focus::-moz-placeholder{color:transparent}
.btn-popup-container textarea:focus:-ms-input-placeholder{color:transparent}
.btn-popup-container input::-webkit-input-placeholder{color:#f0f1f5}
.btn-popup-container input:-moz-placeholder{color:#f0f1f5}
.btn-popup-container input::-moz-placeholder{color:#f0f1f5}
.btn-popup-container input:-ms-input-placeholder{color:#f0f1f5}
.btn-popup-container textarea::-webkit-input-placeholder{color:#f0f1f5}
.btn-popup-container textarea:-moz-placeholder{color:#f0f1f5}
.btn-popup-container textarea::-moz-placeholder{color:#f0f1f5}
.btn-popup-container textarea:-ms-input-placeholder{color:#f0f1f5}
.btn-popup-container input[type=text],.btn-popup-container input[type=email],.btn-popup-container textarea{background:#6bab82;width:100%;padding:8px 10px;border:1px solid #6bab82;border-radius:3px;box-sizing:border-box;margin-top:6px;margin-bottom:12px;resize:vertical;outline:none;font-family:Roboto,Arial,sans-serif;font-size:14px;color:#f0f1f5}
.btn-popup-container textarea{height:90px}
.btn-popup-container input[type=submit]{background:#6bab82;border:1px solid #6bab82;border-radius:3px;color:#f0f1f5;padding:8px 0;width:100%;letter-spacing:.007px;white-space:nowrap;font-size:15px;outline:none;cursor:pointer}
.btn-popup-container #status{margin-bottom:16px;font-style:italic;font-family:Arial;color:#f0f1f5}
.btn-popup-container label{font-size:14px;margin:0}
.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}
.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}
.close:not(:disabled):not(.disabled){cursor:pointer}
button.close{padding:0;background-color:transparent;border:0;-webkit-appearance:none;outline:none}
[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}
.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}
.btn-popup{z-index:99;opacity:0;visibility:hidden;transition: .5s;transform: scale(1.015);background: radial-gradient(ellipse closest-corner,rgba(93,89,83,.3),rgba(93,89,83,.85));top: 0;left: 0;right: 0;bottom: 0;position: fixed}
.btn-popup-container h3{font-size:18px;font-weight:normal;text-transform:uppercase;color:#ffffff;margin-bottom:12px}
.btn-popup-container p{font-size:14px;margin-bottom:10px;line-height:1.5;color:#ffffff}
.btn-popup.is-visible{opacity:1;visibility:visible;transform: scale(1);transition: .5s}
@media screen and (min-width:415px){.btn-popup-container{max-width:460px}}
@media screen and (max-width:414px){.btn-popup-container{max-width:330px}.btn-popup-container h3{font-size:16px}}
.btn-popup-container{position:fixed;z-index:9999;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;background:#2c874c;color:#ffffff;padding:20px;-webkit-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 3px 10px rgba(0,0,0,0.16);box-shadow:0 3px 10px rgba(0,0,0,0.16);line-height:normal}
.btn-popup-container .btn-popup-close{position:absolute;top:8px;right:8px;width:30px;height:30px;cursor:pointer}
.btn-popup-container .btn-popup-close::before,.btn-popup-container .btn-popup-close::after{content:&#39;&#39;;position:absolute;top:12px;width:18px;height:2px;background-color:#ffffff}
.btn-popup-container .btn-popup-close::before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);left:4px}
.btn-popup-container .btn-popup-close::after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);right:8px}rotate(-45deg);right:8px}
</style>
<div class='btn-popup' role='alert'>
<div class='btn-popup-container'>
<h3>Gửi yêu cầu của bạn</h3>
<p>Chào bạn, nếu có gì thắc mắc cần giải đáp hãy để lại lời nhắn qua form dưới đây ! If you have any questions, please leave a message below !</p>
<label>Tên của bạn *</label>
<input id='hoten' name='hoten' placeholder='Nhập tên của bạn (Name)...' type='text' value=''/>
<label>Địa chỉ email *</label>
<input id='emailAddress' name='emailAddress' placeholder='Nhập địa chỉ email...' type='text' value=''/>
<label>Nhu cầu của bạn</label>
<textarea id='noidung' name='noidung' placeholder='Nhập nội dung (Message)...'/>
<input id='submitEmail' type='submit' value='Gửi'/>
<span class='btn-popup-close img-replace'/>
</div>
</div>
<script>//<![CDATA[
    $(window).on('load', function() {
      $('.btn-popup-close').click(function() {
        $('.btn-popup').removeClass('is-visible')
        localStorage.setItem('is-clicked','true');
      })
      var local_Storage = localStorage.getItem('is-clicked');
      if (local_Storage == "true") {
        $('.btn-popup').removeClass('is-visible')
      } else {
        setTimeout(function() {
          $('.btn-popup').addClass('is-visible')
        }, 5000)
      }
    })
    //]]></script>
<script>//<![CDATA[
    $('.btn-popup-close').click(function() {
      $('.btn-popup').removeClass('is-visible')
    })
    $('.email-popup').click(function() {
      $('.btn-popup').addClass('is-visible')
    })
  $('#submitEmail').click(function(){
  $(this).val('Loading...');
  var hoten = document.getElementById("hoten").value;
  var email = document.getElementById("emailAddress").value;
  var noidung = document.getElementById("noidung").value;
    if(hoten == "" || email == "" || noidung == ""){
    $(this).val('Vui lòng nhập đầy đủ thông tin.');
    return false;
    }
        if(!IsEmail(email) || email.length > 50){
    $(this).val('Email không hợp lệ. Vui lòng nhập lại.');
    return false;
        }
        if(hoten.length > 255){
    $(this).val('Tên quá dài. Vui lòng nhập lại.');
    return false;
        }
        if(noidung.length > 10000){
    $(this).val('Nội dung quá dài. Vui lòng nhập lại.');
    return false;
        }
  $.post("https://www.blogger.com/contact-form.do",
  {name: hoten,
  email: email,
  message: noidung,
  blogID: "4245348994605119666"},
    function(data){
    var data = JSON.parse(data);
          if(data['details']['emailSentStatus'] == "true"){
      $('#hoten').val('');
      $('#emailAddress').val('');
      $('#noidung').val('');
      $('#submitEmail').val('Đã gửi thành công !');
          }
    })
  })
 function IsEmail(email) {
  var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  if(!regex.test(email)) {
    return false;
  }else{
    return true;
  }
 }
    //]]></script>
<!--form contact-->
</b:if>

Trong code có dòng
blogID: "4245348994605119666"

Hãy sửa 4245348994605119666 thành ID của Blogspot của bạn nhé.

Demo


Lời kết


Chúc các bạn thành công nhé. Nhớ theo dõi Blog của mình thường xuyên ạ.

Thích
Bình luận
Emoticon



Không có nhận xét nào. bạn hãy là người đầu tiên.


Bài Viết Có Thể Xem

THÔNG BÁO

Biên tập nội dung: Đặng Tiến Sĩ
Sĩ Ben IT Blogger giữ bản quyền nội dung trên website này
Chỉ được phát hành lại nội dung khi có sự đồng ý của chủ sở hữu
Mọi thư từ góp ý vui lòng gửi về địa chỉ dangtiensi.vn@gmail.com

Đóng Liên hệ