Popup là một hiệu ứng trên website cho phép một bảng hiện lên khi bạn click vào nút hay liên kết nào đó. Nội dung bảng có thể là một banner, hình ảnh, chương trình khuyến mãi, hoặc là form liên hệ nhanh.
Trong bài viết này, Goodweb sẽ hướng dẫn các bạn tạo hiệu ứng popup cho Contact Form 7, được hỗ trợ với plugin Easy FancyBox.
Easy FancyBox là một plugin cho phép bạn hiển thị hình ảnh, video, form, văn bản,… dưới dạng popup.
Cài đặt Easy Fancy Box
Bạn tìm kiếm và cài đặt plugin Easy FancyBox trong trang quản lý plugin nhé. Sau đó kích hoạt nó lên.
Sau đó, bạn vào menu Plugin > Plugin đã cài đặt. Sau đó, bạn tìm đến plugin Easy FancyBox vừa cài và nhấn liên kết Xem chi tiết .
Trong bảng thông tin chi tiết plugin hiện ra, bạn chuyển qua tab Giải đáp. Trong đây có hướng dẫn cách sử dụng plugin này cho các trường hợp, trong đó có việc chèn tạo popup cho Contact Form 7. Nó cung cấp cho mình một đoạn code mẫu, mà code này để nguyên không xài được đâu. Mình cần chỉnh sửa lại tí, do đó bạn hãy dùng đoạn code của mình nhé.
Bây giờ bạn tạo một trang hoặc bài viết mới, đặt tên cho nó. Sau đó, chuyển qua tab Văn bản, copy và dán đoạn code mình đã edit lại chút xíu vào đó nhé.
<a class="fancybox" href="#contact_form_pop">NHẬN BÁO GIÁ</a> <div class="fancybox-hidden" style="display: none;"> <div id="contact_form_pop" class="hentry" style="width: 460px; max-width: 100%;">[contact-form-7 404 "Không tìm thấy"]</div> </div>
Nhớ thay shortcode Contact form 7 của bạn vào đoạn này nhé: [contact-form-7 404 "Không tìm thấy"]. Sau đó bạn đăng trang / bài viết này lên.
Mẫu Contact form 7 đẹp:
HMTL
<div class="main-baogia"> <div class="form-tieude"> <p class="form-tieude1"><i class="fa-solid fa-envelope"></i> ĐĂNG KÍ NHẬN BÁO GIÁ</p> <span>Khuyến mãi được cập nhật mới nhất</span> </div> <div class="baogiaform"> <div class="thongtin"> <div class="thongtin-hoten" style="margin-bottom: 16px"> [text* your-name placeholder "Họ tên*"] </div> <div class="thongtin-dienthoai" style="margin-bottom: 16px"> [tel* your-phone placeholder "Điện thoại*"] </div> </div> <div class="noidung"> <div style="padding:"0;"> [textarea* your-noidung placeholder "Tên và tải trọng xe*"] </div> </div> <div class="button-baogia">[submit "BÁO GIÁ NGAY"]</div> </div> </div>
CSS
/**Popup contact form 7*/
a.fancybox {
color: white !important;
}
element.style {
border-width: 10px;
}
#fancybox-content {
height: fit-content !important;
}
.button-baogia {
margin-left: 26%;
margin-right: 26%;
}
.button-baogia p input.wpcf7-form-control.has-spinner.wpcf7-submit {
margin-bottom: -80px;
}
div.noidung span textarea.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required {
margin-bottom: -20px;
}
.form-tieude {
margin: 10px 0px 8px 0px;
text-align: center;
color: white;
}
p.form-tieude1 {
font-weight: 700;
}
.button-baogia p input.wpcf7-form-control.has-spinner.wpcf7-submit {
background: white !important;
color: red;
}
div#fancybox-content {
background: #c80200;
border: white 3px solid !important;
}
.main-baogia {
padding: 2px 5px 10px 5px;
}
textarea {
min-height: 75px !important;
}
