Tạo hiệu ứng popup từ Contact Form 7 WordPress

Helllo ….Xin chào các anh em đã quay trở lại với website Cam Ranh Media của mình. Hôm nay, mình xin chia sẽ cách tạo hiệu ứng popup cho contact form 7. Vì trong thời gian qua thấy có nhiều bạn đã hỏi về vấn này…..bla….bla…. Méo nói nhiều nữa tiến hành ngay và luôn…

Quan tâm nhiều: In ấn giá rẻ Cam Ranh

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.

Hiệu ứng popup 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 404 "Not Found"]') ?>
    </div>
</div>

Xong rồi đấy mấy đứa à, haha….quá nhanh luôn nhé!

Xem chi tiết