Hướng dẫn tạo form popup cho Contact Form 7

Bài viết sẽ hướng dẫn chi tiết cho các bạn cách tạo hiệu ứng popup cho Contact Form 7 một cách chi tiết và dễ dàng nhất, có thể áp dụng cho nhiều website khác nhau.

Contact Form 7 có lẽ là không còn xa lạ với bất kỳ ai sử dụng nền tảng WordPress. Đây là một form liên hệ, đăng ký dễ sử dụng nhất và hoàn toàn miễn phí. Mặc dù là một plugin miễn phí, nhưng Contact Form 7 có thể đáp ứng được hầu hết yêu cầu của một form liên hệ hoặc form đăng ký dành cho website.

Mặc dù vậy, vẫn có rất nhiều tính năng mà người dùng muốn nhưng không được tích hợp sẵn vào Contact Form 7, có thể kể đến như một form popup để tiện cho khách hàng hoặc người dùng nhập thông tin, hay một trang cảm ơn sau khi đã điền thông tin và gửi đi…

Tuy là một số tính năng kể trên hiện tại Contact Form 7 không hỗ trợ, nhưng may mắn thay, rất nhiều lập trình viên khác đã kịp thời bổ sung các tính năng còn thiếu trên cho Contact Form 7 thông qua các plugin WordPress nhỏ bổ sung. Và ở bài viết này, mình sẽ hướng dẫn các bạn cách bổ sung tính năng tạo form popup cho Contact Form 7.

Cách tạo hiệu ứng popup cho Contact Form 7

Hiệu ứng popup cho Contact Form là hiệu ứng popup hiển thị form khi nhấp vào một nút hoặc liên kết bất kỳ. Tức là thay vì show hẳn cái form ra ngoài, chiếm không gian ở bài viết, nội dung, thì bạn có thể để cái form đó ẩn trong một cái nút hoặc một đường dẫn, khi khách bấm vào đó thì form liên hệ/đăng ký mới hiển thị nổi lên trên màn hình.

Để làm được popup form cho Contact Form 7 thì có nhiều cách, tuy nhiên cách đơn giản nhất là sử dụng một plugin tạo hiệu ứng popup bổ sung cho plugin Contact Form 7, plugin này tên là Easy FancyBox.

Cài đặt Easy FancyBox

Bước đầu tiên, các bạn cần cài plugin Easy FancyBox này vào, link ở đây: Easy FancyBox

Sau khi cài đặt plugin và kích hoạt, bạn không cần phải tinh chỉnh gì khác thì plugin cũng đã hoạt động. Còn nếu muốn tinh chỉnh, thì có thể vào Settings -> Media, kéo tới phần FancyBox mà tùy chỉnh theo ý bạn.

Tạo form popup

Rất đơn giản, bên dưới đây là đoạn code chèn form. Cụ thể:

<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 404 "Not Found"] </div>
</div>

Bạn chỉ cần chèn đoạn code này vào vị trí muốn hiển thị nút/liên kết để người đọc hoặc khách hàng nhấp vào là được. Lưu ý là thay đổi đoạn

[contact-form-7 404 "Not Found"]

cho đúng cái form liên hệ trong Contact Form của bạn nhé; ngoài ra, để chèn thì chuyển sang Text HTML mà chèn nha.

• Đọc thêm: Cách thêm tùy chọn Nofollow liên kết cho WordPress

Sau khi chèn vào thì nó sẽ hiển thị thành một liên kết: Click để liên hệ. Lúc này khi bạn nhấp vào thì nó sẽ popup ra một cái form để khách hàng nhập thông tin.

Đấy là đoạn code chèn vào nội dung trong trang web, còn trong trường hợp bạn muốn chèn vào trong PHP thì có thể dùng đoạn code bên 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 404 "Not Found"]') ?> </div>
</div>

Ở đoạn code này đều có sẵn các class, nên bạn có thể tùy chỉnh hiển thị thành nút hay để liên kết, tùy chỉnh màu sắc bằng cách CSS thêm cho nó nhé.

Rất đơn giản, chúng ta đã hoàn thành xong được một form có hiệu ứng popup cho Contact Form 7 phải không? Nếu có gì thắc mắc, các bạn để lại bình luận ở bên dưới nhé.