Dạo gần đây nhiều câu hỏi từ người dùng được gửi về cho chúng tôi đều hỏi là làm cách nào để thêm popup cho Form Liên hệ trên trang WordPress?
Việc thêm Popup vào Form Liên hệ khi người dùng nhấp vào nút Contact hoặc đường link, một cửa sổ sẽ được hiển thị lên thay vì dẫn đến trang mới.
Vậy nên trong bài viết này chúng tôi sẽ hướng dẫn cho bạn cách thêm Popup vào Form liên hệ trong WordPress mà sẽ hoạt động trên bất kì Plugin Contact Form nào.
Hãy cùng tìm hiểu nhé.
Tuy nhiên, nếu bạn không thích video hoặc cần thêm hướng dẫn khác, hãy tiếp tục làm theo các bước như bài viết bên dưới nhé.
Chuẩn bị trước khi bắt đầu:
Để bắt đầu với bài hướng dẫn này, bạn sẽ cần cài đặt và kích hoạt hai loại plugin.
Trước tiên, bạn cần có OptinMonster kèm gói Pro đã được mua đi kèm với form Canvas. OptinMonster là plugin popup WordPress tốt nhất hiện nay và giúp bạn thu hút lượng người dùng cũng như người đăng ký và từ đó trở thành khách hàng thân thiết.
Tiếp theo, bạn cần phải có plugin Form liên hệ như WPForms, Gravity Forms, Contact Form 7, v.v.
Sau khi đã cài đặt và kích hoạt cả hai plugin này rồi. Nếu bạn cần trợ giúp, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress tại đây.
Cả WPForms và OptinMonsters đều được tạo bởi Người sáng lập WPBeginner, Syed Balkhi.
Sau khi cài xong hai plugin này rồi, tiếp tục chuyển sang bước 2.
Bước 1: Tạo Form Liên hệ bằng WPForms
Trước tiên cần tạo form liên hệ với WPForms. Nếu đã có sẵn rồi bạn có thể bỏ qua bước này.
Nhấp vào menu WPForms trong thanh bên admin WordPress và sau đó nhấp vào nút Add New.
Sau khi nhấn Add New sẽ khởi chạy Form Builder. Nhập tên cho Form của bạn, ví dụ: lấy tên là Contact Us và sau đó nhấp vào Simple Contact Form để tiếp tục.
Form Builder sẽ mở ra trình soạn thảo cho các trường. Bạn có thể thêm hoặc xóa các trường khỏi form của mình hoặc sắp xếp lại chúng bằng cách kéo và thả thôi.
Khi đã hoàn tất, bạn cần nhấp vào nút Save để lưu trữ các thay đổi của bạn. Vậy là xong , Form liên lạc của bạn hiện đã sẵn sàng rồi.
Truy cập vào WPForms » All Forms . Tại đây bạn sẽ tất cả các form liên lạc của bạn được liệt kê ở đây. Bên cạnh mỗi form đó bạn sẽ thấy một shortcode. Shortcode này để làm gì, hãy tiếp tục xem bước tiếp theo.
Sau khi đã có form liên hệ rồi, hãy cùng nhau xem cách để tạo lightbox popup dưới đây.
Bước 2: Tạo Popup bằng OptinMonster
Đầu tiên việc bạn cần làm là tạo modal popup ( hay còn gọi là hộp thoại hiện lên) bằng OptinMonster.
Bạn cần tạo một optin mới bằng cách nhấp vào OptinMonster trong menu admin WordPress, sau đó nhấp vào nút Create New Optin.
Sau khi nhấn Create New Optin bạn sẽ được điều hướng đến trang web OptinMonster, đây là nơi bạn sẽ tạo popup cho trang của bạn. Trước tiên tạo một tiêu đề đã, bạn có thể đặt tênbất cứ điều gì bạn muốn, ví dụ: Contact Form popup,v.v.v.
Tiếp theo chọn trang web của bạn từ menu thả xuống. Nhấp vào Canvas bên dưới Select Your Design.
OptinMonster sẽ hiển thị cho bạn các mẫu có sẵn. Hiện tại, chỉ có template Whiteboard đang có sẵn cho thôi. Nhấn vào template đó để tiếp tục.
Bạn sẽ được điều hướng đến màn hình Optin Customizer. Tại đây bạn có thể thêm nội dung kết cấu hay bất kì thứ gì bạn muốn như form đăng kí, hộp như facebook, khảo sát, mã phiếu giảm giá hoặc như hình bên dưới chúng tôi đang tạo form liên lạc đó.
Trên tab thiết kế, người dùng có thể chỉnh chiều rộng chiều cao của khung. Thông thường kích thước của khung mặc định là 700 x 350 px.
Trong hộp Custom HTML, bạn sẽ nhập shortcode form liên hệ cùng với bất kỳ HTML tùy chỉnh nào khác mà bạn có thể muốn thêm.
Dưới đây là một HTML mẫu mà chúng tôi đã sử dụng để tạo modal popup:.
|
1
2
3
|
<h3>Do You Have Any Questions?</h3><p class="tagline">Want to ask us more about our services? Simply fill out this form and we will get back to you as soon as possible. </p> [wpforms id="119"] |
Lưu ý rằng shortcode đã được nhúng vào WPForms. Nếu bạn đang sử dụng form liên lạc khác, thì chỉ cần thay thế shortcode đó bằng shortcode form liên hệ mà bạn muốn.
Sau Custom HTML, tiếp theo là nhập CSS custom. Bên dưới hộp CSS custom, bạn sẽ thấy một chuỗi văn bản ngẫu nhiên trông giống như html div#om-mw7pzo63ch6wpfzi. Đây là tiền tố CSS bạn sẽ sử dụng trong CSS custom của mình.
Dưới đây là CSS mà chúng tôi đã sử dụng để tạo modal popoup:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
html div#om-mw7pzo63ch6wpfzi div#om-canvas-whiteboard-optin {background-color:#f8f8f8;}html div#om-mw7pzo63ch6wpfzi h3 { text-align:center;}html div#om-mw7pzo63ch6wpfzi .tagline { font-style:italic;}html div#om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field { padding: 10px 0; clear: both;}html div#om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-label { display: block; font-weight: 700; font-size: 16px; float: none; line-height: 1.3; margin: 0 0 4px 0; padding: 0; }html div#om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-hp { display: none !important; position: absolute !important; left: -9000px !important;} |
Bạn có thể xem bạn demo trước rồi sau đó có thể chỉnh code CSS sau. Tại đây bạn hoàn toàn có thể dùng tool Inspect Element của trình duyệt để tìm ra các lớp và bộ CSS nào bạn muốn tìm và sau đó thêm sửa code css bằng cách chỉnh sửa optin.
Sau khi hoàn thành xong phần thiết kế, hãy chuyển sang tab configuration trong phần customizer.
Thay đổi cả Optin Cookie Duration và Optin Success Cookie Duration thành 0. Việc điều chỉnh này sẽ ngăn OptinMonster thiết lập cookie.
Bạn cũng cần thay đổi Optin Success Message. Thông thường thay đổi này là thông báo cảm ơn người dùng nhưng chúng tôi đang sử dụng như một hình thức liên lạc. Bạn nên cài đặt tính năng này để cảm ơn người dùng đã liên hệ với bạn.
Popup sẽ xuất hiện khi người dùng nhấp vào liên kết hoặc nút nào đó nhưng bạn phải kích hoạt manual trigger lên. Hãy tích vào ô bên dưới Load on Manual Trigger?
Nhấp vào nút Save để lưu cài đặt optin của bạn, sau đó nhấp vào nút close để thoát.
Bước 3: Thêm popup trong trang web WordPress của bạn
Quay trở lại khu vực admin WordPress và nhấp vào OptinMonster. Bạn sẽ thấy danh sách các optins của bạn. Nếu bạn không nhìn thấy optin, thì hãy nhấp vào nút refresh optins
Nhấp vào liên kết Edit output settings bên dưới optin của bạn. Sẽ chuyển bạn đến màn hình cài đặt đầu ra cho popup.
Trước tiên, bạn cần tích ô bên cạnh Enable optin on site’ và Load optin globally. Nếu không tích vào 2 ô này thì popup sẽ không xuất hiện.
Kéo xuống và bạn sẽ thấy tùy chọn Parse content for shortcodes. Tích vào ô tuỳ chọn đó, nếu không OptinMonster sẽ không phân tích các shortcode bên trong popup của bạn đâu.
Tiếp theo, bạn cần nhập shortcode mà bạn đã đưa vào popup. Ảnh trên là shortcode cho form liên hệ của bạn.
Nhấp vào cài đặt save để lưu trữ các thay đổi của bạn.
Thêm liên kết hoặc nút để kích hoạt popup cho Form liên hệ
Trước tiên sẽ cần Slug optin OptinMonster. Nhấp vào biểu tượng OptinMonster trong thanh bên WordPress của bạn. Bạn sẽ thấy optin slug bên cạnh tiêu đề optin của bạn như hình bên dưới đã được khoanh đỏ đó.
Tạo một trang mới trong WordPress hoặc chỉnh sửa một bài đăng hoặc trang mà bạn muốn thêm liên kết hoặc nút lên form. Trong trình chỉnh sửa bài đăng chuyển sang trình soạn thảo văn bản và thêm liên kết cho popup của bạn như thế này:
|
1
|
<a href="#" class="manual-optin-trigger" data-optin-slug="mw7pzo63ch6wpfzi">contact us</a> |
Đừng quên thay thế data-optin-slug bằng optin slug của riêng bạn.
Lưu các thay đổi của bạn và truy cập bài viết/trang của bạn. Nhấp vào liên kết để xem popup form liên hệ.
Bạn có thể sử dụng liên kết này bất cứ nơi đâu trang web WordPress của bạn. Có thể thêm vào bài đăng hoặc trang, vào các widget văn bản, ngay cả trong các formWordPress.
Chúng tôi hy vọng qua bài viết này đã giúp bạn hiểu được cách sử dụng popup form liên hệ trong WordPress.
Nếu thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem thêm các video hướng dẫn. Bạn cũng có thể theo dõi chúng tôi trên Twitter và Facebook để cập nhật các thông tin mới nhất từ cunghocwp.com
Chúc các bạn thành công!