Chèn cửa sổ popup có form lấy thông tin khách hàng

Chào cả nhà,

Có nhiều bạn hỏi mình cái code popup quảng cáo có cái form lấy thông tin khách hàng thì làm như thế nào. Cảm ơn bạn có nick Facebook : Người Khùng Nhất đã hỏi. Hôm nay mình chia sẻ với các bạn luôn. Vì mình thấy chưa ai chia sẻ cái này mà có nhiều người muốn làm. Mình đã chỉnh code lại chỉ hiện 1 vài lần /máy/ngày/. Nên không ảnh hưởng đến khách hàng.

Code Popup giữa trang có form thông tin khách hàng

Cách làm thật ra đơn giản, bạn chỉ làm 2 phần là xong :
1/ Bạn chèn code quảng cáo popup giữa trang
2/ Bạn chèn code form lấy thông tin khách hàng

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

Bước 1 : Vào Blogspot. Vào phần Bố cục -> Chọn thêm tiện ích mới -> Chọn HTML -> Copy code sau dán vào. Và save lại

<style>
    #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} 
    #cboxOverlay{position:fixed; width:100%; height:100%;} 
    #cboxMiddleLeft, #cboxBottomLeft{clear:left;} 
    #cboxContent{position:relative;} 
    #cboxLoadedContent{overflow:auto;} 
    #cboxTitle{margin:0;} 
    #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} 
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} 
    .cboxPhoto{float:left; margin:auto; border:0; display:block;} 
    .cboxIframe{width:100%; height:100%; display:block; border:0;} 
    /*
 
       User Style: 
       Change the following styles to modify the appearance of ColorBox.  They are 
       ordered & tabbed in a way that represents the nesting of the generated HTML. 
    */ 
    #cboxOverlay{background:#000;opacity:0.5 !important;} 
    #colorbox{ 
            box-shadow:0 0 15px rgba(0,0,0,0.4); 
           -moz-box-shadow:0 0 15px rgba(0,0,0,0.4); 
            -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4); 
           } 
       
   #cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsqWEWU1ttGF7QN8p7PJFBeGP4ldUuzWnuz4JRZggOEEHvJp8i9QCgfs05NqITLw1wGndV2cSSJA8-bWbdyGDnosfX7GtzenyTlsFPbd7D2kB396hte9U5YNtBywGj3GLFwlsNatxo8dc/s1600/controls.png) no-repeat 0 0;} 
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr7soPBBqCTVGn-3LLGqz7eCtkLor9DjLHvFYqcWtFnYoBDVdOpFGMf9QVEyUyQv1LQ9df5czwFQB-KkHBedigGPbIMMfk46QKSbqzRoViUtova0LT9NrUkNa7jPZ5cqnBxDrbmTF-CHs/s400/border.png) repeat-x top left;} 
    #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsqWEWU1ttGF7QN8p7PJFBeGP4ldUuzWnuz4JRZggOEEHvJp8i9QCgfs05NqITLw1wGndV2cSSJA8-bWbdyGDnosfX7GtzenyTlsFPbd7D2kB396hte9U5YNtBywGj3GLFwlsNatxo8dc/s1600/controls.png) no-repeat -36px 0;} 
    #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsqWEWU1ttGF7QN8p7PJFBeGP4ldUuzWnuz4JRZggOEEHvJp8i9QCgfs05NqITLw1wGndV2cSSJA8-bWbdyGDnosfX7GtzenyTlsFPbd7D2kB396hte9U5YNtBywGj3GLFwlsNatxo8dc/s1600/controls.png) no-repeat 0 -32px;} 
    #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr7soPBBqCTVGn-3LLGqz7eCtkLor9DjLHvFYqcWtFnYoBDVdOpFGMf9QVEyUyQv1LQ9df5czwFQB-KkHBedigGPbIMMfk46QKSbqzRoViUtova0LT9NrUkNa7jPZ5cqnBxDrbmTF-CHs/s400/border.png) repeat-x bottom left;} 
    #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsqWEWU1ttGF7QN8p7PJFBeGP4ldUuzWnuz4JRZggOEEHvJp8i9QCgfs05NqITLw1wGndV2cSSJA8-bWbdyGDnosfX7GtzenyTlsFPbd7D2kB396hte9U5YNtBywGj3GLFwlsNatxo8dc/s1600/controls.png) no-repeat -36px -32px;} 
    #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsqWEWU1ttGF7QN8p7PJFBeGP4ldUuzWnuz4JRZggOEEHvJp8i9QCgfs05NqITLw1wGndV2cSSJA8-bWbdyGDnosfX7GtzenyTlsFPbd7D2kB396hte9U5YNtBywGj3GLFwlsNatxo8dc/s1600/controls.png) repeat-y -175px 0;} 
    #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsqWEWU1ttGF7QN8p7PJFBeGP4ldUuzWnuz4JRZggOEEHvJp8i9QCgfs05NqITLw1wGndV2cSSJA8-bWbdyGDnosfX7GtzenyTlsFPbd7D2kB396hte9U5YNtBywGj3GLFwlsNatxo8dc/s1600/controls.png) repeat-y -211px 0;} 
    #cboxContent{background:#fff; overflow:visible;} 
        #cboxLoadedContent{margin-bottom:5px;} 
        #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1L8t7K4yhm4_6Cyw3aDLOJLeUwPQ69aVBvSPB0JUu2b1hyphenhyphenh1D3yaaYk5n8If93DD12zaOGq-vQH99nKOhDBiU7Is1Guc5ViNTAlGWmUS9EtDg3VKGubz4IcLYkRx931Y9RR5BZr96JFo/s400/loadingbackground.png) no-repeat center center;} 
        #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJEChzIF1thl7bdQF81qgR_l_911IC9RV_fPFs1cA-JvKcM2kEj5Fles-pEqOGpGjHOyELNmry2MRby7dGxYXzGIDMUKAMl7p0Vd5uIBYgztgVQtcGXILKvMi-4JKVa8hXj2wAInac33g/s400/loading.gif) no-repeat center center;} 
        #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;} 
        #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} 
        #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsqWEWU1ttGF7QN8p7PJFBeGP4ldUuzWnuz4JRZggOEEHvJp8i9QCgfs05NqITLw1wGndV2cSSJA8-bWbdyGDnosfX7GtzenyTlsFPbd7D2kB396hte9U5YNtBywGj3GLFwlsNatxo8dc/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;} 
        #cboxPrevious{left:0px; background-position: -51px -25px;} 
        #cboxPrevious.hover{background-position:-51px 0px;} 
        #cboxNext{left:27px; background-position:-75px -25px;} 
        #cboxNext.hover{background-position:-75px 0px;} 
        #cboxClose{right:0; background-position:-100px -25px;} 
        #cboxClose.hover{background-position:-100px 0px;} 
        .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;} 
        .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;} 
        .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
    
 
    </style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script> 
<script src="http://yourjavascript.com/3093182329/btt_jquery.colorbox-min.js">"></script> 
<script type="text/javascript">jQuery(document).ready(function(){if (document.cookie.indexOf('visited=false') == -1) {var fifteenDays = 1000*60*60*24*30;var expires = new Date((new Date()).valueOf() + fifteenDays);document.cookie = "visited=false;expires=" + expires.toUTCString();$.colorbox({width:"620px",height: "470px", inline:true, href:"#subscribe"});}});</script>
   
        <div style='display:none'> 
       <div id='subscribe' style='padding:10px; background:#fff;'> 
            <center><h3 class="box-title"><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPhTcCOL89zgEt-4V45m1eVTSFL4sAET7EG3pftTZp-fKpXdvOI7AeIBKca6GnpqcaDvDQUXNUjm2fo-fJuCzEo3MX0FWG7yUVM9J612Fr_ufrC40BCJGAWv_t4A1izJ9iVDV3eQ7-9Xo/s1600/subscribe.gif'/></h3> </center> 
          <center>
<iframe allowtransparency="true" id="myiframe" style="border:none; overflow:hidden; width: 565px; height: 240px;" scrolling="no" frameborder="0"  src="http://web.tin.vn/form/form.jsp?id=6932"></iframe>
<script type="text/javascript" src="http://web.tin.vn/registerEmbed.js"></script>
</center> 
 
<!--Quảng cáo Người chia sẻ-->
    <p style=" float:right;  margin-right:10px;" > <a style=" font-size:14px; color:#3B78CD; text-decoration:none;" href="http://www.NGUOICHIASE.COM" target='_blank'>Các bạn mở mail nhấp vào đường LINK kích hoạt TẢI VỀ EBOOK về nhé !</a></p> 
    </div> 
    </div>

- Phần code màu đỏ là code form lấy thông tin khách hàng . Bạn sẽ thay phàn code này của bạn
- Phần code màu xanh là phần ghi thêm thông tin ở dưới form


Bước 2 : Cách tạo Form lấy thông tin khách hàng.
Cái này thật ra cũng đơn giản ah. Bạn sử dụng dịch vụ của Web.tin.vn

Bạn vào web : www.web.tin.vn  bạn tạo tài khoản. Trong đó nó có phần quản lý khách hàng. Và bạn tạo Form rồi copy code dán vào phần màu xanh ở trên là xong.

Đăng ký tài khoản :

Sau đó đăng nhập vào tài khoản :

Vào Danh sách Form - Tạo Form mới 

Danh sách Form hiện ra : Chọn Form muốn chèn -> Chọn HTML

Copy Code dán vào phần màu đỏ ở phía trên 

Phần danh sách khách đăng ký thì các bạn quản lý trong mail hoặc trong web.tin.vn. Khi có khách đăng ký nó sẽ gửi thông tin về mail bạn.

Mình chia sẻ bài này đôi khi còn thiếu sót. Các bạn làm nếu có thắc mắc chỗ nào alo mình mình sẽ hỗ trợ . LH : 0904 384 505

Chúc các bạn thành công !