Mở popup form WordPress khi click link hoặc ảnh

Mở Popup Form WordPress Khi Click Link hoặc Ảnh: Hướng Dẫn Chi Tiết

Trong thế giới web, việc tương tác với người dùng là vô cùng quan trọng. Một cách hiệu quả để thu hút sự chú ý và khuyến khích tương tác là sử dụng popup form. Popup form giúp bạn thu thập thông tin, cung cấp ưu đãi, hoặc hiển thị thông báo quan trọng một cách nổi bật. Trong bài viết này, chúng ta sẽ khám phá cách mở popup form WordPress khi người dùng click vào một liên kết hoặc hình ảnh.

Tại Sao Nên Sử Dụng Popup Form Trong WordPress?

Popup form không chỉ là một yếu tố thiết kế đẹp mắt mà còn mang lại nhiều lợi ích thiết thực cho website của bạn:

Tăng tỷ lệ chuyển đổi: Popup form có thể được sử dụng để cung cấp mã giảm giá, ebook miễn phí, hoặc các ưu đãi khác, khuyến khích người dùng thực hiện hành động mong muốn.
Thu thập thông tin người dùng: Popup form cho phép bạn thu thập email, số điện thoại, hoặc các thông tin khác cần thiết cho việc tiếp thị và chăm sóc khách hàng.
Cải thiện trải nghiệm người dùng: Popup form có thể được sử dụng để cung cấp thông báo quan trọng, hướng dẫn sử dụng, hoặc giải đáp thắc mắc, giúp người dùng dễ dàng tìm thấy thông tin họ cần.

Các Phương Pháp Mở Popup Form WordPress

Có nhiều phương pháp để mở popup form trong WordPress, tùy thuộc vào nhu cầu và kỹ năng của bạn. Chúng ta sẽ xem xét một số phương pháp phổ biến nhất:

Sử dụng Plugin: Đây là phương pháp đơn giản và phổ biến nhất, phù hợp với người dùng không có nhiều kiến thức về lập trình.
Sử dụng Code Tùy Chỉnh (Custom Code): Phương pháp này đòi hỏi bạn phải có kiến thức về HTML, CSS và JavaScript.
Sử dụng Page Builder: Một số page builder (ví dụ: Elementor, Divi) tích hợp sẵn tính năng popup form.

Sử Dụng Plugin Để Mở Popup Form

Đây là cách đơn giản nhất. Có rất nhiều plugin WordPress hỗ trợ tạo và quản lý popup form. Dưới đây là một số plugin phổ biến:

Popup Maker: Một plugin miễn phí và mạnh mẽ, cho phép bạn tạo nhiều loại popup khác nhau với nhiều tùy chọn tùy chỉnh.
OptinMonster: Một plugin trả phí với nhiều tính năng nâng cao, bao gồm A/B testing, exit-intent technology, và nhiều mẫu popup đẹp mắt.
WPForms: Một plugin form builder phổ biến, cũng có tính năng tạo popup form.

Trong ví dụ này, chúng ta sẽ sử dụng plugin Popup Maker.

Cài Đặt và Kích Hoạt Plugin Popup Maker

Trong dashboard WordPress của bạn, vào Plugins > Add New.
Tìm kiếm “Popup Maker”.
Cài đặt và kích hoạt plugin.

Tạo Popup Form

Sau khi kích hoạt, bạn sẽ thấy một menu “Popup Maker” trong dashboard của mình. Nhấp vào Popup Maker > Add New Popup.
Nhập tiêu đề cho popup của bạn (ví dụ: “Đăng Ký Nhận Bản Tin”).
Trong trình soạn thảo popup, bạn có thể thêm HTML, văn bản, hình ảnh, hoặc nhúng một form liên hệ (sử dụng plugin form builder như Contact Form 7 hoặc WPForms).
Trong phần Popup Settings, bạn có thể tùy chỉnh kích thước, vị trí, hiệu ứng, và các tùy chọn khác cho popup của mình.

Thiết Lập Trigger (Kích Hoạt) Cho Popup

Trong phần Popup Settings, nhấp vào tab Triggers.
Nhấp vào Add New Trigger.
Chọn Click Open làm loại trigger.
Trong phần Trigger Settings, bạn sẽ thấy một trường CSS Selector(s). Đây là nơi bạn sẽ nhập CSS selector của liên kết hoặc hình ảnh mà bạn muốn sử dụng để mở popup.

Lưu ý quan trọng: Để tìm CSS selector của liên kết hoặc hình ảnh, bạn cần sử dụng Developer Tools của trình duyệt của bạn (thường là bằng cách nhấp chuột phải vào phần tử và chọn “Inspect” hoặc “Inspect Element”). Tìm thuộc tính “id” hoặc “class” của phần tử đó. Ví dụ:

Nếu liên kết có id là “my-link”, CSS selector sẽ là #my-link.
Nếu liên kết có class là “my-class”, CSS selector sẽ là .my-class.

Nhập CSS selector của bạn vào trường CSS Selector(s).
Nhấp vào Save Changes.

Hiển Thị Popup

Sau khi bạn đã thiết lập trigger, popup của bạn sẽ tự động mở khi người dùng nhấp vào liên kết hoặc hình ảnh có CSS selector mà bạn đã chỉ định.

Sử Dụng Code Tùy Chỉnh Để Mở Popup Form

Nếu bạn muốn kiểm soát hoàn toàn cách popup của mình hoạt động, bạn có thể sử dụng code tùy chỉnh. Phương pháp này đòi hỏi bạn phải có kiến thức về HTML, CSS và JavaScript.

HTML (Tạo Form Popup Ẩn)

Đầu tiên, bạn cần tạo HTML cho popup form của mình. Bạn có thể chèn HTML này vào bất kỳ vị trí nào trong trang web của bạn (ví dụ: trong footer.php hoặc trong một widget text).


  <div id="my-popup" class="popup">
    <div class="popup-content">
      <span class="close-button">&times;</span>
      <h2>Đăng Ký Nhận Bản Tin</h2>
      <form id="newsletter-form">
        <input type="email" name="email" placeholder="Nhập email của bạn" required>
        <button type="submit">Đăng Ký</button>
      </form>
    </div>
  </div>

CSS (Styling Popup)

Tiếp theo, bạn cần thêm CSS để tạo kiểu cho popup của mình. Bạn có thể thêm CSS này vào file style.css của theme của bạn hoặc sử dụng một plugin CSS tùy chỉnh.


  .popup {
    display: none; /* Ẩn popup mặc định */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Nền mờ */
    z-index: 9999; /* Đảm bảo popup hiển thị trên cùng */
  }

  .popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }

  .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
  }

JavaScript (Xử Lý Sự Kiện Click)

Cuối cùng, bạn cần thêm JavaScript để xử lý sự kiện click và hiển thị popup. Bạn có thể thêm JavaScript này vào file script.js của theme của bạn hoặc sử dụng một plugin JavaScript tùy chỉnh.


  document.addEventListener('DOMContentLoaded', function() {
    var link = document.getElementById('my-link'); // Thay 'my-link' bằng ID của liên kết của bạn
    var popup = document.getElementById('my-popup');
    var closeButton = document.querySelector('.close-button');

    if (link && popup && closeButton) {
      link.addEventListener('click', function(event) {
        event.preventDefault(); // Ngăn liên kết chuyển hướng
        popup.style.display = 'block';
      });

      closeButton.addEventListener('click', function() {
        popup.style.display = 'none';
      });

      window.addEventListener('click', function(event) {
        if (event.target == popup) {
          popup.style.display = 'none';
        }
      });
    }
  });

Quan trọng: Trong đoạn code JavaScript trên, hãy thay thế #my-link bằng ID của liên kết hoặc hình ảnh mà bạn muốn sử dụng để mở popup. Bạn cũng có thể sử dụng class thay vì ID, nhưng hãy nhớ sử dụng CSS selector phù hợp (ví dụ: .my-class).

Sử Dụng Page Builder

Một số page builder như Elementor và Divi tích hợp sẵn tính năng tạo và quản lý popup. Sử dụng page builder thường là cách đơn giản và trực quan để tạo popup form, đặc biệt nếu bạn đã quen thuộc với việc sử dụng page builder.

Ví dụ: Sử Dụng Elementor

Trong dashboard WordPress của bạn, vào Templates > Popups.
Nhấp vào Add New.
Chọn “Popup” làm loại template và nhập tên cho popup của bạn.
Sử dụng trình soạn thảo Elementor để thiết kế popup của bạn. Bạn có thể kéo và thả các widget để thêm văn bản, hình ảnh, form, và các yếu tố khác.
Trong phần Settings, bạn có thể tùy chỉnh kích thước, vị trí, hiệu ứng, và các tùy chọn khác cho popup của mình.
Trong phần Publish, bạn có thể thiết lập điều kiện hiển thị (ví dụ: trên toàn bộ trang web, trên một trang cụ thể, hoặc trên một danh mục cụ thể) và triggers (ví dụ: on page load, on scroll, on click).
Chọn On Click làm trigger và nhập CSS selector của liên kết hoặc hình ảnh mà bạn muốn sử dụng để mở popup.
Nhấp vào Publish để lưu và kích hoạt popup của bạn.

Kết Luận

Mở popup form khi click link hoặc ảnh là một cách hiệu quả để tăng tỷ lệ chuyển đổi và thu hút sự chú ý của người dùng trên website WordPress của bạn. Cho dù bạn chọn sử dụng plugin, code tùy chỉnh, hoặc page builder, hãy đảm bảo rằng popup của bạn được thiết kế đẹp mắt, dễ sử dụng, và cung cấp giá trị thực sự cho người dùng.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa

Mở popup form WordPress khi click link hoặc ảnh