Trang chủ WordpressHướng dẫn Wordpress Tạo hiệu ứng popup cho form liên hệ của Contact Form 7

Tạo hiệu ứng popup cho form liên hệ của Contact Form 7

bởi Thạch Phạm
17 bình luận 5770 views
Khuyến mãi hosting

Tạo hiệu ứng popup cho Contact Form 7

Contact Form 7 là một plugin tạo form khá nổi tiếng rồi với độ tuỳ biến cao chất ngất và có thể làm được nhiều việc mà kể cả một số plugin trả phí đình đám như GravityForm vẫn không làm được. Trong bài này, mình sẽ chia sẻ cho các bạn một thủ thuật nhỏ mà bạn có thể làm với Contact Form 7 (hoặc với các plugin tạo form khác có dùng shortcode), đó là tạo hiệu ứng popup hiển thị form khi nhấp vào một liên kết bất kỳ.

Hiệu ứng này chúng ta có thể làm nhiều cách, nhưng ở đây mình sẽ sử dụng cách dễ dàng nhất đó là sử dụng thêm một plugin tạo hiệu ứng popup nữa mang tên Easy FancyBox. Vì vậy để làm được, bạn phải cài plugin này vào.

Thêm hiệu ứng popup cho Contact Form 7

Sau khi cài xong Easy Fancybox, bạn vào Post/Page mà bạn cần chèn form, sau đó chuyển qua chế độ soạn thảo Text (HTML), sau đó chèn một vài đoạn HTML dưới đây vào.


<a href="#contact_form_pop" class="fancybox">Click để liên hệ</a>
<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop">
[.contact-form-7 id="13" title="Đặt hàng"]
</div>
</div>

Sau đó bạn thay [.contact-form-7 id="13" title="Đặt hàng"] thành đoạn shortcode chèn form của bạn vào là xong. Nhớ xóa dấu . đi nhé.

Lúc này trong bài của bạn sẽ có một đoạn text Click để liên hệ, khi nhấp vào nó sẽ nhảy ra cái form như hình dưới.

Trường hợp nếu bạn chèn vào code PHP thì có thể dùng đoạn phía dưới.

						<a href="#contact_form_pop" class="fancybox">Click để liên hệ</a>
						<div style="display:none" class="fancybox-hidden">
						    <div id="contact_form_pop">
						        <?php echo do_shortcode('[contact-form-7 id="13" title="Đặt hàng"]') ?>
						    </div>
						</div>

Xong rồi đấy, quá nhanh quá nguy hiểm.

17 bình luận

Có thể bạn quan tâm

17 bình luận

Huu 24/06/2017 - 9:38 Sáng

Chào anh Thạch Phạm,
Em làm theo hướng dẫn của anh nhung khi submit thông tin thì không có loading ở popup contact form.
Anh có thể xem giúp em trường hợp này không ạ.
Cảm ơn anh nhiều.

Reply
Duy Nam 21/06/2017 - 4:31 Chiều

Các theme khác thì được nhưng trên theme Enfold thì lại không hiện được popup nhỉ?

Reply
Trần Văn Nam 16/04/2017 - 11:12 Sáng

Tại sao khi chèn 1 popup login vào 1 trang web mình đã tạo sẵn, thì bị lỗi giao diện, có cách nào khắc phục lỗi không AD ?

Reply
Thái Dương 25/03/2017 - 8:22 Chiều

Chào Thạch!
Mình muốn tạo một popup hiện thị form nhập email đăng ký nhận tin tức mỗi khi có khách mới truy cập vào website. Không biết contact form 7 có thể tạo được popup không nhỉ?

Reply
Trần Phương Luân 07/01/2017 - 12:19 Chiều

sao giao diện nó không đẹp chỉ 1 màu trắng. có thể thêm hình ảnh làm background đươc không anh

Reply
Trọng Tài 13/12/2016 - 3:10 Chiều

Mình đã làm theo như hướng dẫn ở trên nhưng không hiện ra form như ở trên đầu bài mà chỉ hiện đoạn shortcode của form. Còn cách nào để hiện Contact Form 7 theo kiểu Popup không Thạch Phạm? Cám ơn nhiều.

Reply
Tiến 19/11/2016 - 2:13 Chiều

Chào Anh!
Em muốn làm 1 popup theo kiểu hướng dẫn sử dụng web của mình. Tức là có thể có nhiều trang và next hay back được ấy ạ. Xin hỏi có plugin nào hay có cách nào để làm không ạ?
Em cảm ơn

Reply
Zulong 29/09/2016 - 4:02 Chiều

Chào Thạch ,

Bạn có thể hướng dẫn mình làm popup ở top menu, chỉ cần click vào 1 chữ được cho trước là nó hiện popup contact form lên

Site mình đang học dev: http://suleco.vn/

Reply
Thanh Binh 04/08/2016 - 9:57 Chiều

chào anh Thạch Phạm. anh cho em hỏi làm sao để tạo cái popup form khi người dùng ra khỏi trang web thì nó hiện lên không?

Reply
Thạch Phạm 06/08/2016 - 1:08 Chiều

nếu bạn không biết cách tự code thì có thể dùng plugin OptinMonster với gói cao nhất sẽ có tính năng này nhé.

Reply
Cuong 27/07/2016 - 11:33 Chiều

anh Thạch Phạm cho em hỏi giờ làm kiểu như click vào đăng ký thì cái popup đăng ký nhảy lên khi người ta điền vào khung thì em muốn dữ liệu trỏ về google form thì không biết có làm đc không ạ ! Nếu đc mong anh giúp em mò lâu lắm rồi ko ra 🙁

Reply
Thạch Phạm 28/07/2016 - 4:26 Sáng

Bạn làm giống như bài này, nhưng chỉ khác là thay shortcode của contact form 7 thì bạn dùng shortcode của plugin https://wordpress.org/plugins/wpgform/

Reply
ahg hjh jj 09/07/2016 - 12:30 Chiều

ngon

Reply
toan 06/07/2016 - 11:45 Sáng

mình làm thử và thấy rất dở 1 điểm, cứ bất kỳ cái ảnh nào nó cũng tự động thêm class=”fancybox image” để chạy hiệu ứng lightbox của nó, bỏ tích image trong seting thì cái code lightbox kia lại ko hoat động, bạn giúp mình khắc phục được ko

Reply
Tai 30/06/2016 - 9:27 Sáng

cảm ơn xếp

Reply
Phuong 23/06/2016 - 10:45 Sáng

Thế để auto popup thì thế nào bạn?

Reply
Thạch Phạm 24/06/2016 - 4:23 Sáng

Lightbox trong bài này không auto được bạn nhé. Nếu bạn muốn nó tự click vào cho hiển thị thì có thể thêm đoạn Javascrip sau vào theme, hoặc bạn chưa biết chèn thế nào thì mở footer.php ra chèn vào trước </body>.

<script type="text/javascript">
$(function(){
    window.location.href = $('.fancybox').attr('href');
});
</script>
Reply

Để lại một bình luận

* Khi bình luận, bạn đồng ý rằng thông tin bạn nhập vào bao gồm tên, email và địa chỉ IP sẽ được lưu giữ tại website.