Trần Bá Đạt Blog
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja
Không có kết quả
Tất cả kết quả
Trần Bá Đạt Blog
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja
Không có kết quả
Tất cả kết quả
Trần Bá Đạt Blog
Không có kết quả
Tất cả kết quả
Trang chủ Wordpress Plugin Wordpress

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

Trần Bá Đạt bởi Trần Bá Đạt
16/12/2022
trong Plugin Wordpress, Thủ thuật Wordpress, Wordpress
1
CHIA SẺ
891
LƯỢT XEM
Chia sẻTweetPinChia sẻ

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.

NÊNĐỌC THÊM

Cách chuyển hướng sang trang Thanks You cho Contact Form 7

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é.

5/5 - (6 bình chọn)
Tags: Contact Form 7
Chia sẻTweetPin1Chia sẻ

Nhận thông báo khi bài viết này được cập nhật. Đăng ký ngay!

Hủy đăng ký
Trần Bá Đạt

Trần Bá Đạt

Là một người yêu thích công nghệ thông tin và hiện đang là một SEOer, một Marketer. Trong đó tranbadat.com là một trong những dự án của mình nhằm cung cấp nhiều kiến thức hơn cho mọi người về Internet, SEO, Blogspot, Wordpress và Windows

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận 2

  1. Sơn tùng says:
    2 năm trước

    Mình dùng code như của bạn nhưng cứ ấn vào nút thì nólại tự chạy lên trên đầu trang. bạn hỗ trợ giúp mình với. Mình demo ở link trang web rồi nhé

    Trả lời
    • Trần Bá Đạt says:
      2 năm trước

      Mình kiểm tra thì thấy form của web bạn hoạt động bình thường mà. Chắc lúc đó bạn cấu hình sai thôi

      Trả lời

ĐƯỢC YÊU THÍCH

  • Cách gỡ bỏ Microsoft Office tận gốc

    Cách gỡ bỏ Microsoft Office hoàn toàn khỏi máy tính khi bị lỗi

    13 chia sẻ
    Chia sẻ 11 Tweet 0
  • Tổng hợp 1069 icon Facebook – biểu tượng cảm xúc FB 2020

    104 chia sẻ
    Chia sẻ 103 Tweet 0
  • Hướng dẫn nhận key Office 2016 bản quyền, active Office 2016 mới nhất (Updated 2020)

    75 chia sẻ
    Chia sẻ 74 Tweet 0
  • Chia sẻ 300 mẫu Animation Template Powerpoint tuyệt đẹp

    2 chia sẻ
    Chia sẻ 1 Tweet 0
  • Đánh giá và chia sẻ theme Newspaper 12.1.1 mới nhất miễn phí (Cập nhật)

    26 chia sẻ
    Chia sẻ 25 Tweet 0

VPS NÊN DÙNG

Trần Bá Đạt Blog
Trần Bá Đạt Blog hình thành với mục đích chia sẻ, hướng dẫn và đồng hành cùng bạn tiếp cận và giải quyết các vấn đề về Internet, Windows, Wordpress và SEO.

Email: [email protected]
Fanpage: Trần Bá Đạt Blog

DMCA.com Protection Status

EXTERNAL LINKS

  • Chữ ký số Viettel CA
  • Hóa đơn điện tử viettel
  • bàn trang điểm đẹp
  • Technology Knowledge

TAGS THÔNG DỤNG

  • Tìm hiểu Gmail
  • Tìm hiểu theme Newspaper
  • Kiến thức Wordpress

INTERNAL LINKS

  • Biểu tượng Facebook
  • Key Win 10
  • Key Office 2016
  • Cách vào Facebook
  • SEO Blogspot
  • Thủ thuật Blogspot
  • Lập Gmail
  • Ứng dụng học tiếng Anh
  • Key Office 2019
  • Liên hệ
  • Sitemap

© Copyright 2017 Trần Bá Đạt Blog. Hosted by Vultr.

Không có kết quả
Tất cả kết quả
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja

© Copyright 2017 Trần Bá Đạt Blog. Hosted by Vultr.