Tiện ích Popup liên hệ đẹp cho blogspot

[blog]
Hướng dẫn tạo mẫu form liên hệ đẹp cho blogspot, tiện ích popup liên hệ cho blogspot, mẫu thiết kế đẹp với giao diện material design, mẫu mình lấy bên bài viết của bác Tuấn về code thêm để cho hiển thị kiểu Popup cho bạn nào cần.

Tiện ích liên hệ popup được thiết ké thêm nút close để người dùng đóng lại nếu không dùng nữa.

Tiện ích liên hệ Popup sử dụng Form biểu mẫu Google để nhận tin. Để thiết lập nhận tin bằng biểu mẫu form google các bạn có thể xem hướng dẫn chi tiết tại: Thiết lập Form Google xem mục số 4.

Các bạn xem demo tại: https://pouplienhe.blogspot.com

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

Blog của bạn bắt buộc phải có thư viện jquery bên dưới, đa số blog nào cũng có nên các bạn không cần thêm.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Tiếp theo bạn copy toàn bộ code bên dưới dán trước </body> thêm tiện ích rồi dán trong bố cục đều được.

 <style type='text/css'>
  .card{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);border:0;font-weight:400}
.text-center{text-align:center!important}
.card-header{padding:1.5rem 0;margin:0;background-color:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.125);background-color:#33b5e5;color:#fff;font-weight:500;font-size:20px;text-align:center;text-transform:uppercase}
.card-body{padding-top:1.5rem;padding-bottom:1.5rem;-webkit-border-radius:0!important;border-radius:0!important}
@media (min-width:992px){.pl-lg-5,.px-lg-5{padding-left:3rem!important}}
@media (min-width:992px){.pr-lg-5,.px-lg-5{padding-right:3rem!important}}
.pt-0,.py-0{padding-top:0!important}
.card-body{-ms-flex:1 1 auto;flex:1 1 auto;padding:1.25rem}
.form-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}
@media (max-width:414px){.form-row{display:block!important}}
.mt-0{margin-top:0!important}
.form-row>.col,.form-row>[class*=col-]{padding-right:5px;padding-left:5px}
.col{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;position:relative;max-width:100%;width:100%}
.md-form{position:relative;margin-top:1.5rem;margin-bottom:1.5rem}
.mt-3,.my-3{margin-top:1rem!important}
.md-form input[type=email],.md-form input[type=text],.md-form textarea.md-textarea{-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;-o-transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;outline:0;-webkit-box-shadow:none;box-shadow:none;border:none;border-bottom:1px solid #ced4da;-webkit-border-radius:0;border-radius:0;-webkit-box-sizing:content-box;box-sizing:content-box;background-color:transparent}
.md-form .form-control{font-size:18px;margin:0 0 .5rem 0;-webkit-border-radius:0;border-radius:0;padding:.3rem 0 .55rem 0;background-image:none;background-color:transparent;height:auto;font-family:Roboto,sans-serif}
.form-control{display:block;width:100%;height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}
button,input{overflow:visible}
.md-form label{position:absolute;top:.65rem;left:0;display:inline-block;margin-bottom:.5rem;font-size:17px;-webkit-transition:.2s ease-out;-o-transition:.2s ease-out;transition:.2s ease-out;cursor:text;color:#757575;font-weight:300}
.md-form label.active{-webkit-transform:translateY(-140%);-ms-transform:translateY(-140%);transform:translateY(-140%);font-size:.8rem}
.md-form input[type=email]+label:after,.md-form input[type=text]+label:after,.md-form textarea.md-textarea+label:after{content:"";position:absolute;top:65px;display:block;opacity:0;-webkit-transition:.2s opacity ease-out,.2s color ease-out;-o-transition:.2s opacity ease-out,.2s color ease-out;transition:.2s opacity ease-out,.2s color ease-out}
.md-form input[type=email]:focus:not([readonly]),.md-form input[type=text]:focus:not([readonly]),.md-form textarea.md-textarea:focus:not([readonly]){-webkit-box-shadow:0 1px 0 0 #4285f4;box-shadow:0 1px 0 0 #4285f4;border-bottom:1px solid #4285f4}
.md-form input[type=email]:focus:not([readonly])+label,.md-form input[type=text]:focus:not([readonly])+label,.md-form textarea.md-textarea:focus:not([readonly])+label{color:#4285f4}
.select-wrapper{position:relative}
.select-wrapper span.caret{color:initial;position:absolute;right:0;top:.8rem;font-size:.63rem;color:#757575}
.select-wrapper input.select-dropdown{position:relative;cursor:pointer;background-color:transparent;border:none;border-bottom:1px solid #ced4da;outline:0;height:38px;line-height:2.9rem;width:100%;font-size:1rem;margin:0 0 .94rem 0;padding:0;display:block;-o-text-overflow:ellipsis;text-overflow:ellipsis}
.select-wrapper .select-dropdown{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.select-wrapper ul{list-style-type:none;padding:0;margin:0;width:100%}
.dropdown-content{-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);background-color:#fff;margin:0;display:none;min-width:6.25rem;max-height:40.625rem;overflow-y:auto;opacity:0;position:absolute;z-index:999;will-change:width,height}
.dropdown-content.active{position:absolute;top:0;left:0;opacity:1;display:block}
.select-dropdown li.disabled,.select-dropdown li.disabled>span,.select-dropdown li.optgroup{color:rgba(0,0,0,.3);background-color:transparent!important;cursor:context-menu}
.dropdown-content li{clear:both;color:#000;cursor:pointer;line-height:36px;width:100%;text-align:left;text-transform:none}
.disabled,:disabled{pointer-events:none!important}
.dropdown-content li>a,.dropdown-content li>span{font-size:.9rem;color:#212529;display:block;padding:0 20px}
.dropdown-content li.active,.dropdown-content li:hover{background-color:#eee}
.form-check{position:relative;display:block;margin-bottom:1.5rem!important}
.form-check-input{position:absolute;margin-top:.3rem;margin-left:-1.25rem;opacity:0;box-sizing:border-box;padding:0;pointer-events:none}
.form-check-input[type=checkbox]+label{position:relative;padding-left:35px;cursor:pointer;display:inline-block;height:1.5625rem;line-height:1.5625rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.form-check-label{margin-bottom:0}
.form-check-input[type=checkbox]+label:before,.form-check-input[type=checkbox]+label:after{content:'';position:absolute;top:0;left:0;width:18px;height:18px;z-index:0;border:2px solid #8a8a8a;-webkit-border-radius:1px;border-radius:1px;margin-top:1px;-webkit-transition:.2s;-o-transition:.2s;transition:.2s}
.form-check-input[type=checkbox]+label:after{border:0;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}
.form-check-input[type=checkbox]:checked+label:before{top:-4px;left:-5px;width:12px;height:1.375rem;border-top:2px solid transparent;border-left:2px solid transparent;border-right:2px solid #4285f4;border-bottom:2px solid #4285f4;-webkit-transform:rotate(40deg);-ms-transform:rotate(40deg);transform:rotate(40deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%}
.card-body button[type=submit]:not(:disabled){cursor:pointer}
.card-body button[type=submit]{-webkit-appearance:none;-moz-appearance:none;appearance:none}
.card-body .btn{background-color:#33b5e5;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);padding:12px 32px;font-size:.81rem;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;margin:0;border:0;-webkit-border-radius:3px;border-radius:3px;cursor:pointer;text-transform:uppercase;white-space:normal;word-wrap:break-word;color:#fff}
#status{margin-top:1.5rem!important;text-align:left}
.close{font-size:26px;width:30px;padding:0;cursor:pointer;background:0 0;border:0;float:right;font-size:21px;font-weight:700;line-height:1;color:#fff;filter:alpha(opacity=20);position:absolute;right:0}
.modalform{display:none}
.modalform{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;-webkit-overflow-scrolling:touch;outline:0;background:rgba(3,17,27,.7)}
.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
@media (min-width:768px){.container{width:750px}}
@media (min-width:992px){.container{width:970px}}
@media (min-width:1200px){.container{width:1170px}}
@media (min-width:1230px){.container{width:1200px}}
@media (min-width:1200px){.container{width:1170px}}
</style>
    <script>
      $(document).ready(function(){
        $(".lienheform").click(function(){
          $(".modalform").css("display", "block");
          $('.modalform .close').click(function() {
            $(".modalform").css("display", "none");
          });
        });
      });
    </script>
    <div class = "modalform">
      <div class = "container">
        <div class="card">
          <button class="close" data-dismiss="modal" type="button">
            ×
          </button>
          <h5 class="card-header">
            Contact us
          </h5>
          <div class="card-body material-form px-lg-5 pt-0">
            <form action="https://docs.google.com/forms/d/e/1FAIpQLSeRbEA0DYZAwjNzBXa350VYQ0Vke6eSGcjuNsUgVfbjShHT0Q/formResponse?embedded=true" class="text-center" type="POST" target="hidden_iframe">
              <div class="form-row">
                <div class="col">
                  <div class="md-form">
                    <input aria-label="Họ tên" autocomplete="off" class="form-control" name="entry.xxxxxxx" type="text" value=""/>
                    <label>
                      Họ tên
                    </label>
                  </div>
                </div>
                <div class="col">
                  <div class="md-form">
                    <input aria-label="Email" autocomplete="off" class="form-control" name="entry.xxxxxxx" required="" pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" type="email" value=""/>
                    <label>
                      E-mail *
                    </label>
                  </div>
                </div>
              </div>
              <div class="form-row">
                <div class="col">
                  <div class="md-form mt-0">
                    <input aria-label="Điện thoại" autocomplete="off" class="form-control" name="entry.xxxxxxx" required="" type="text" value=""/>
                    <label>
                      Điện thoại *
                    </label>
                  </div>
                </div>
                <div class="col">
                  <div class="md-form mt-0">
                    <input aria-label="Địa chỉ" autocomplete="off" class="form-control" name="entry.xxxxxxx" type="text" value=""/>
                    <label>
                      Địa chỉ
                    </label>
                  </div>
                </div>
              </div>
              <div class="md-form">
                <textarea aria-label="Nội dung" autocomplete="off" class="form-control md-textarea" name="entry.xxxxxxx" required="" rows="5" type="text" value="">
                </textarea>
                <label>
                  Nội dung *
                </label>
              </div>
              <div class="form-check">
                <input type="checkbox" class="form-check-input" id="check" required=""/>
                <label class="form-check-label" for="check">
                  Chấp nhận gửi tin
                </label>
              </div>
              <button aria-label="Gửi" class="btn" type="submit">
                Gửi
              </button>
              <div id="status">
                (*) Thông tin bắt buộc phải nhập
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <iframe name="hidden_iframe" width="0" height="0" border="0" style="display: none;">
    </iframe>
    <script>
      //<![CDATA[
      $('.form-control').focus(function() {
        $(this).next('label').addClass('active')
      })
      $('.form-control').blur(function(){
        if(!$(this).val()) {
          $(this).next('label').removeClass('active')
        }
      })
      $('.select-wrapper input.select-dropdown').focus(function(e) {
        e.stopPropagation()
        setTimeout(function(){
          $('.dropdown-content').addClass('active')
        },100);
      })
      $('.dropdown-content').click(function(e) {
        e.stopPropagation()
      })
      $(':not(.dropdown-content)').click(function() {
        $('.dropdown-content').removeClass('active')
      })
      $('.dropdown-content li:not(.disabled)').on('click', function(event) {
        var option = $(event.target).text()
        $('.select-wrapper input.select-dropdown').attr('value', option).attr('placeholder', '')
        $('.dropdown-content').removeClass('active')
      })
      $('.material-form form').on('submit',function(){
        $('#status').html('Đang gửi...').css('color','red');
        $('.card-body .btn').attr('disabled','');
        function one(callback) {
          setTimeout(function() {
            $('#status').html('Thư của bạn đã được gửi đi').css('color','red')
            callback();
          }, 4000);
        }
        function two() {
          setTimeout(function() {
            $('#status').html('(*) Thông tin bắt buộc phải nhập').css('color','#555')
            $('.material-form form')[0].reset();
            $('.card-body .btn').removeAttr('disabled');
            console.clear();
          }, 3000);
        }
        one(two)
      })
      //]]></script>

Các gọi cho form liên hệ hiển thị là các bạn chỉ cần thêm class "lienheform" vô là được ví dụ:

<a class = "lienheform">Liên hệ</a>

<p class = "lienheform">Liên hệ</p>

Mình code thêm nút buttom liên hệ như sau:

CSS cho buttom

<style>
.buttons {
  background-color: Crimson;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>

HTML cho buttom

    <buttom class='lienheform buttons'>
      LIÊN HỆ
    </buttom>

Bạn đặt buttom bất cứ đâu trong bài viết hoặc trong giao diện là có thể gọi hiển thị form liên hệ Popup.

Một số blog có thể lỗi css, các bạn có thể tự tùy chỉnh thêm cho phù hợp với blog của bạn.

Nếu bạn nào không làm được thì comment bên dưới để mình hỗ trợ nhé.

[/blog]