Tạo Button Popup Form sử dụng từ Google Form + Kèm bản đồ

Thủ này mình (Huỳnh Phụng) sẽ hướng dẫn bạn tạo nút Button hiện Form Popup kèm bản đồ và địa chỉ. Tiện ích này mình sử dụng để lấy thông tin khách hàng làm SEO bạn cần sửa lại các trường thông tin phù hợp lại với bạn!.

Form có 6 trường thông tin bạn có thể tự do thêm bớt các trường thông tin này!

Lúc trước mình code cho 1 người bạn. Code này được sử dụng trực tiếp tại bài viết do đó sau này bạn có đổi theme mới cũng không ảnh hướng đến sự hoạt động của Button Popup Form này!

Tạo Button Popup Form sử dụng từ Google Form + Kèm bản đồ
ĐÂY LÀ DEMO CỦA BUTTON
Bước 1:

Code HTML Button Popup Form

Chèn ở vị trí bất kì trong phần HTML bài viết để gọi nút Buton này!. Bạn có thể sử dụng nhiều lần tại nhiều vị trí trong bài viết

<a href="javascript:void(0);" id="subscribe1">TÊN CỦA BUTTON</a>

Bước 2:

Code chức năng Button Popup Form

Chèn ở vị trí cuối trang của HTML bài viết
<div class="subcribe1" id="mySubcribe">

<div class="subcribe-content">

<span class="close"></span>

<div class="section gg-scroll-section   in_container_section  def_bg_color_none contact-wrap" id="contact">

<div>

<h2 id="lienheseo">LIÊN HỆ DỊCH VỤ SEO</h2>

<span class="has-underline wpb_animate_when_almost_visible wpb_start_animation"></span>

<div class="gg-animate wpb_animate_when_almost_visible wpb_start_animation" style="text-align: center;">

Giải pháp SEO Marketing Tổng Thể. Liên Hệ: <b><span style="color: red;">0932.913.631</span></b>

<div style="color: black;">

<strong>Điền thông tin bên dưới.</strong> để nhận thông tin tư vấn từ các chuyên viên của chúng tôi.</div>

</div>

</div>

<div style="display: inline-block;">

<div class="map">

<div id="map_canvas">

<div id="map_canvas_custom_270619">

<iframe height="450" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3918.641563205659!2d106.67561131419376!3d10.838718261006056!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3175285497f97849%3A0x43329e9f8ce21593!2zOTggTmd1eeG7hW4gVsSDbiBMxrDhu6NuZywgUGjGsOG7nW5nIDE3LCBHw7IgVuG6pXAsIEjhu5MgQ2jDrSBNaW5oLCBWaeG7h3QgTmFt!5e0!3m2!1svi!2s!4v1506879457178" width="600"></iframe>

</div>

</div>

<div class="overlay">

<h3>

CTY SEO MARKETING TM</h3>

<ul>

<li><i class="fa fa-map-marker"></i> Địa chỉ :98 Nguyễn Văn Lượng</li>

<li>Quận :Gò Vấp - HCMC</li>

<li><i class="fa fa-mobile"></i> Phone :0932.913.631</li>

<li>ZIP :700000</li>

</ul>

</div>

</div>

<div class="contact_form">

<form action="https://docs.google.com/forms/d/e/1FAIpQLSd9y10Osny9vT5XArsPR6EvKL9Tq6dS1EQpSrgflwF7vMDpTw/formResponse?embedded=true" class="blockform" id="form_dathang" method="POST" onsubmit="return emptycart()" style="display: block;" target="hidden_iframe">

<div class="checkout">

<div class="row contact-form">

<div class="col-md-12">

<div class="input-group">

<span class="input-group-addon"><i class="fa fa-user"></i></span>

<span class="wpcf7-form-control-wrap your-name"><input aria-label="Họ và tên" aria-required="true" class="ss-q-short" dir="auto"  name="entry.811008348" placeholder="1. Họ &amp; Tên (*)" required="" title="" type="text" value="" /></span>

</div>

</div>

<div class="col-md-12">

<div class="input-group">

<span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>

<span class="wpcf7-form-control-wrap your-email"><input aria-label="Email (*)" aria-required="true" class="ss-q-short" dir="auto"  name="entry.901499437" placeholder="2. Link Website (*)" required="" title="" type="text" value="" /></span>

</div>

</div>

<div class="col-md-12">

<div class="input-group">

<span class="input-group-addon"><i class="fa fa-map-marker"></i></span>

<span class="wpcf7-form-control-wrap diachi"><input aria-label="Số nhà, đường, phường/xã/quận… (*)" aria-required="true" class="ss-q-short" dir="auto" name="entry.123989439" placeholder="3. Thị trường SEO (VD: HCM, HN, Cả Nước)… (*)" required="" title="" type="text" value="" /></span>

</div>

</div>

<div class="col-md-12">

<div class="input-group">

<span class="input-group-addon"><i class="fa fa-mobile"></i></span>

<span class="wpcf7-form-control-wrap sdt"><input aria-label="Số điện thoại (*)" aria-required="true" class="ss-q-short" dir="auto"  name="entry.801102892" placeholder="4. Số điện thoại *)" required="" title="" type="text" value="" /></span>

</div>

</div>

<div class="col-md-12">

<div class="input-group">

<span class="input-group-addon"><i class="fa fa-comments"></i></span>

<span class="wpcf7-form-control-wrap your-message"><textarea name="entry.1877651533" aria-invalid="false" class="wpcf7-form-control wpcf7-textarea form-control" cols="10" name="your-message" placeholder="5. Danh sách từ khóa (Mỗi từ 1 dòng)" rows="6"></textarea></span>

</div>

</div>

<div class="col-md-12">

<div class="input-group">

<span class="input-group-addon"><i class="fa fa-fire"></i></span>

<textarea aria-label="Thông Tin SP " class="wpcf7-form-control wpcf7-textarea form-control" cols="5" dir="auto" name="entry.1877651533" placeholder="6. Ngân sách SEO mỗi tháng (vd: 8-10tr/tháng)" rows="4"></textarea>

</div>

</div>

<div class="col-md-3">

<input class="wpcf7-form-control wpcf7-submit btn btn-success detail" type="submit" value="Gởi yêu cầu" /><span class="ajax-loader"></span>

</div>

</div>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

<script>

//<![CDATA[

  var subcribe = document.getElementById('mySubcribe');

  var btn = document.getElementById("subscribe1");

  var span = document.getElementsByClassName("close")[0];

  btn.onclick = function() {

    subcribe.style.display = "block";

}

  span.onclick = function() {

    subcribe.style.display = "none";

}

  window.onclick = function(event) {

    if (event.target == subcribe) {

        subcribe.style.display = "none";

    }

}

  function popup() {

    var win_timer = setInterval(function() {

      if(win.closed) {

        window.location.reload();

        clearInterval(win_timer);

      }

    }, 100);

  }

//]]>

</script>

<style>

#subscribe1 {

    text-align: center;

    width: 40%;

    margin: 0 30%;

    color: #fff!important;

    background: #07ACEC;

    padding: 14px 20px;

    border-radius: 4px;

    border: none;

    outline: none;

    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

    cursor: pointer;

    transition: all .4s ease-in-out;

    text-transform: uppercase;

    float: left;

}

.subcribe-content{    margin: auto;padding:0!important;width:78%!important;min-width:auto!important;max-width: 1100px!important;}

.contact-form .input-group {

 margin-bottom: 10px;

 float: left;

}

.subcribe1 {

    background: linear-gradient(-135deg,rgba(123,123,123,0.7) 0%,rgba(0,0,0,0.63) 30%,rgba(72,49,49,0.86) 30%,rgba(0,0,0,0.62) 30%,rgba(66,66,66,0.98) 100%);

    display: none;

    position: fixed;

    z-index: 9998;

    padding-top: 0;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

}

.contact-form .input-group br {

 display: none;

}

.contact-form .form-margin .input-group {

 margin-bottom: 10px;

}

.contact-form .input-group .input-group-addon {

 border-radius: 0px;

 background-color: #ddd;

 border: none;

 position: relative;

}

.contact-form .input-group .input-group-addon i {

 color: #979797;

 font-size: 26px;

 width: 24px;

 height: 24px;

}

.wpcf7-form-control:hover{background:#38599a}

.contact-form .input-group .form-control {

       font-size: 14px;

    font-weight: 500;

    padding: 10px;

    background-color: rgb(241, 241, 241)!important;

    border-radius: 0;

    -moz-border-radius: 0;

    -webkit-border-radius: 0;

    border: none;

    color: #000;

    min-height: 50px;

    -webkit-box-shadow: none;

    box-shadow: none;

    border: 1px solid #ccc;

    font-family: segoe ui;

}

.container h2 {

    display: inline-block;

    border-bottom: 2px solid #ddd;

    font-size: 30px;

    padding: 10px;

    margin: 30px 0!important;

}

.col-md-12 {

    width: 100%;

}.input-group {

    position: relative;

    display: table;

    border-collapse: separate;

}.input-group-addon {

    padding: 6px 12px;

    font-size: 14px;

    font-weight: 400;

    line-height: 1;

    color: #555;

    text-align: center;

    background-color: #eee;

    border: 1px solid #ccc;

    border-radius: 4px;

}

.input-group-addon, .input-group-btn {

    width: 1%;

    white-space: nowrap;

    vertical-align: middle;

}

.input-group .form-control, .input-group-addon, .input-group-btn {

    display: table-cell;

}

 .contact-wrap{padding: 20px;text-align:center;padding-top:0px;background-color:#fff}

.contact-wrap h2{    border-left: 0;

    display: inline-block;

    border-bottom: 2px solid #ddd;

    font-size: 30px;

    margin: 20px 0!important;}

.contact-wrap .map{display:inline-block;margin-right:20px;position:relative;float:left}

.contact-wrap p{text-align:left;margin-bottom:10px}

form{margin:0}

.map .overlay{position: absolute;

    top: 25px;

    right: 25px;

    background-color: rgba(0, 149, 255, 0.56);

    padding: 25px 15px;

    text-align: left;

    border-radius: 7px;}

.map .overlay h3{font-size:24px;font-weight:700;color:#FFFFFF;margin-bottom:20px;text-transform:uppercase}

.map .overlay h3 span{color:#fff}

.map .overlay ul li{color:#ffffff;font-size:13px;margin-bottom:10px;list-style-type:none}

.map .overlay ul li strong{width:80px}

.map .overlay ul li span{font-weight:700;width:100px;display:inline-block;color:#ffffff}

#map_canvas{width:575px}

.contact_form p.first{font:700 18px Lato,sans-serif;color:#292d33;line-height:30px}

.contact_form{width:370px;display:inline-block;margin-left:20px}

.contact_form input[type='text']{padding:0 10px;width:100%;outline:none;height:40px;border:1px solid #e1e1e1;text-transform:capitalize;border-radius:0;font-size:12px;font-weight:600;transition:.2s;background-color:#f1f1f1}

.input-group .form-control {

    position: relative;

    z-index: 2;

    float: left;

    width: 100%;

    margin-bottom: 0;

}

.contact_form input[type='submit']{    color: #ffffff;
    letter-spacing: 0.5px;
    border-radius: 4px;
    transition: all .3s;
    text-transform: uppercase;
    background: #7fa4ed;
    padding: 8px 12px;
    font-weight: 100;
    float: left;
    text-align: center;
    outline: 0;
    border: 0;
    position: relative;
    height: initial;}

.contact_form input.error,.contact_form textarea.error{border-color:#ff0000}

.contact_form label.error{display:none!important}

#contactForm{position:relative}

#success{line-height:33px;color:#008000}

.form-control:focus{color:#000!important;border:1px solid rgba(0,0,0,0.35)!important;outline:0!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}

.contact-form-error-message-with-border{position:relative;text-align:center!important;width:100%;display:inline-block;background:#DD4B39;border:0;box-shadow:0 0 0;color:#fff;padding:2px 10px;margin-top:10px}

.contact-form-success-message-with-border{position:relative;text-align:center;display:block;width:100%;border:0;box-shadow:0 0 0;color:#fff;padding:4px;margin-top:5px;border-radius:50px;background:#8ED443;text-transform:capitalize;font-size:12px;float:left}

@media (max-width:768px){

.subcribe-content{width:90%!important}

.contact_form {

width: 100%;

    display: inline-block;

    margin: 0;

}

.contact-wrap .map{max-width:100%;margin:0!important}

#map_canvas {

    width: 100%;

}

iframe{max-width:100%!important}

.contact_form input[type='text']{width:98%!important}

.contact-wrap {

    padding: 0 2%;}

.map .overlay{padding:15px}

}

</style>
Bước 3:

Tùy chỉnh các trường chức năng Popup Form

  1. Tạo 1 Google Form với các trường thông tin y như form này!
  2. Chuẩn bị link bản đồ của bạn và lấy mã nhúng thay lại
  3. Chuẩn bị thông tin địa chỉ của bạn và thay lại
  4. Thay lại các mã entry.xxxxxx (có 6 mã)
  5. Thay lại link Google Form
P/ Thủ thuật có sử dụng Font Awesome, nếu theme của bạn chưa tích hợp thư viện Font Awesome thì các icon sẽ bị lỗi!
Tạo các trường thông tin mà bạn cần trong Google Form

- BacSiWindows -

LIÊN HỆ DỊCH VỤ SEO


Giải pháp SEO Marketing Tổng Thể. Liên Hệ: 0932.913.631
Điền thông tin bên dưới. để nhận thông tin tư vấn từ các chuyên viên của chúng tôi.

CTY SEO MARKETING TM

  • Địa chỉ :98 Nguyễn Văn Lượng
  • Quận :Gò Vấp - HCMC
  • Phone :0932.913.631
  • ZIP :700000
Nhớ bấm "Thông báo cho tôi" bên trên để nhận thông báo qua Email khi Admin trả lời nhé.
  • Đây là khu vực quản trị, bạn không có quyền truy cập vào!