Nay mình sẽ hướng dẫn các bạn tạo 1 box call to action kết hợp HTML, CSS, JS và contact form 7 để có thể thu thập được số điện thoại cũng như email của khách hàng khi ghé thăm website.
-
CCleaner Pro là công cụ dọn dẹp miễn phí hiệu quả được rất nhiều người dùng văn phòng yêu thích và sử dụng để quét rác hệ thống máy tính
-
Dán đoạn dưới đây vào style.css
Demo các bạn có thể xem tại lixi.wpdemo.vn
Các bạn dán các đoạn code dưới vào lần lượt các file functions.php style.css nhé.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
function popup_dangky(){;?> <div class="main_pt"> <div class="popup_pt_1"> <div class="popup_text"> WELCOME GIFT </div> <div class="popup_icon"> <div class="icon_pt"></div> </div> </div> </div> <div class="sub_pt"> <div class="popup_pt_2"> <div class="popup_text"> WELCOME GIFT </div> <div class="popup_icon icon_c"> <div class="icon_pt"></div> </div> </div> <div class="popup_note"> Hãy nhập email, số điện thoại của bạn để nhận được mã giảm 20% cho đơn hàng đầu tiên. </div> <div class="form-pt"> <?php echo do_shortcode('[contact-form-7 id="366" title="Form đăng ký"]');?> </div> </div> <?php } add_action('wp_footer','popup_dangky'); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
.main_pt.active{ display:none; } .custom-form{ display:flex; flex-wrap:wrap; } .custom-form>.wpcf7-form-control-wrap{ width: 75%; } .custom-form .wpcf7-submit{ border-radius:0 3px 3px 0!important; } .custom-form .wpcf7-text{ background-color:#fff!important; border-radius:3px 0 0 3px!important; } .wpcf7-spinner{ display:none; } .popup_note{ font-size: 13px; line-height: 1.5; font-weight: 300; color: #fff; padding: 10px 0; margin: 0 auto 20px; max-width: 310px; text-align: center; } .sub_pt{ display:none; } .sub_pt.active{ display:block; background: #000204; width: 380px; position: fixed; bottom: 80px; left: 0; z-index: var(--zIndex9); -ms-flex-pack: justify; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; padding: 20px 22px 16px; } .popup_pt_2 .icon_pt{ -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .popup_pt_2{ display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 42px; width: 100%; background-color: #000204; color: #fff; font-size: 20px; font-weight: var(--fontSemiBold); -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; line-height: 42px; padding: 0; letter-spacing: 5px; white-space: nowrap; } .popup_icon{ width: 52px; cursor: pointer; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 42px; } .popup_pt_1{ width: 100%; background-color: var(--colorBlack); color: var(--colorWhite); font-size: 20px; font-weight: var(--fontSemiBold); -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; line-height: 42px; padding: 0; letter-spacing: 5px; white-space: nowrap; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 42px; } .popup_text{ color:#fff; font-weight:bold } .icon_pt{ width: 16px; height: 12px; border-top: rgba(0,0,0,0); border-left: 8px solid rgba(0,0,0,0); border-right: 8px solid rgba(0,0,0,0); border-bottom: 12px solid #fff; } .main_pt{ width: 290px; height: 42px; position: fixed; bottom: 340px; left: 0; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; z-index: var(--zIndex9); cursor: pointer; padding-left: 20px; background: #000204; } |
Và cuối cùng là script
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> jQuery(document).ready(function ($) { $('.main_pt').click(function(){ $(this).addClass('active'); $(this).next().addClass('active'); }); $('.popup_icon.icon_c').click(function(){ $(this).parents('.sub_pt').removeClass('active'); $('.main_pt').removeClass('active'); }); }); </script> |
Ngoài ra các bạn tạo giúp mình 1 contact form 7 với nội dung như sau
|
1 2 3 |
<div class="form-flat custom-form"> [text* text-298 placeholder "Nhập số điện thoại hoặc email..."][submit class:button primary "Gửi"] </div> |
Và lấy shortcode của form vừa tạo chèn vào vị trí
Và kết quả là như bên trên.
Chúc các bạn thành công
