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
Ngày đăng: Cập nhật cuối: 17 bình luận 10,K lượt xem

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">

</div>
</div>

Sau đó bạn thay  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(”) ?>
</div>
</div>

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

5/5 - (3 bình chọn)

Tham gia nhóm hỗ trợ WordPress

Tham gia nhóm Hỗ trợ Server - Hosting & WordPress để cùng nhau hỏi đáp và hỗ trợ các vấn đề về WordPress, tối ưu máy chủ/server.

Tham gia ngay
17 bình luận

Có thể bạn quan tâm

Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.