Gần đây chúng tôi đã nhận một email từ một người dùng hỏi: Làm thế nào để tôi đặt mẫu liên lạc của tôi trong một cửa sổ popup cho trang web WordPress của tôi? Đây là một xu hướng phổ biến trên nhiều trang web, nơi mà khi người dùng nhấp vào nút hoặc liên kết liên hệ, thay vì truy cập trang mới, biểu mẫu liên hệ sẽ mở ra trong cửa sổ bật lên. Trong bài này, chúng tôi sẽ chỉ cho bạn cách thêm một hình thức liên lạc popup trong WordPress mà sẽ làm việc cho bất kỳ hình thức liên lạc nào. Chúng tôi cũng sẽ chỉ cho bạn cách mở popup khi người dùng nhấp vào liên kết hoặc nút để đảm bảo trải nghiệm người dùng tốt nhất.
Tuy nhiên, nếu bạn chỉ muốn làm theo các hướng dẫn văn bản, sau đó bạn có thể làm theo hướng dẫn từng bước của chúng tôi về làm thế nào để thêm một hình thức liên lạc quảng cáo trong WordPress.
Bước 0: Bắt đầu
Đối với hướng dẫn này, bạn sẽ cần phải cài đặt và kích hoạt hai plugin.
Trước tiên, bạn cần kế hoạch chuyên nghiệp của OptinMonster đi kèm với loại hình Canvas. OptinMonster là plugin popup tốt nhất cho WordPress.
Tiếp theo, bạn cần phải có một plugin dạng liên hệ như WPForms, Gravity Forms, Contact Form 7, v.v.
Vì lợi ích của bài viết này, chúng tôi sẽ sử dụng phiên bản miễn phí của plugin hình thức liên hệ yêu thích của chúng tôi: WPForms Lite.
Chúng tôi giả định rằng bạn đã cài đặt và kích hoạt cả hai plugin. Nếu bạn cần giúp đỡ
địa điểm
Có nói rằng, chúng ta hãy tiếp tục tạo ra một mẫu liên lạc trong WordPress.
Bước 1: Tạo một Mẫu liên hệ sử dụng WPForms
Đầu tiên bạn cần phải tạo một form liên lạc mới với WPForms. Nếu bạn đã có một mẫu liên lạc được tạo ra với WPForm, sau đó bạn có thể bỏ qua bước này.
Nhấp vào menu WPForms trong thanh công cụ WordPress của bạn và sau đó nhấp vào nút Thêm mới.
Thao tác này sẽ khởi chạy Trình tạo Biểu mẫu. Chỉ cần nhập tên cho biểu mẫu của bạn, ví dụ: ‘Liên hệ chúng tôi’ và sau đó nhấp chuột vào mẫu Simple Contact Form để tiếp tục.
Trình tạo mẫu sẽ đưa bạn đến trình soạn thảo trường. Bạn có thể thêm hoặc xóa các trường từ biểu mẫu của bạn hoặc sắp xếp lại chúng bằng cách kéo và thả đơn giản.
Khi bạn đã hoàn tất, bạn cần nhấp vào nút lưu để lưu trữ thay đổi của bạn. Mẫu liên hệ của bạn đã sẵn sàng.
Bạn cần truy cập WPForms »Tất cả các Biểu mẫu trang. Bạn sẽ tìm thấy biểu mẫu liên lạc được liệt kê ở đó. Bên cạnh đó bạn sẽ tìm thấy một mã ngắn. Bạn sẽ cần mã ngắn này trong bước tiếp theo.
Nếu bạn cần thêm hướng dẫn chi tiết, hãy kiểm tra hướng dẫn từng bước về cách tạo biểu mẫu liên hệ trong WordPress.
Bây giờ chúng ta đã có sẵn một mẫu liên hệ, chúng ta hãy tiếp tục bước tiếp theo và tạo một hộp đèn flash popup trong WordPress.
Bước 2: Tạo một WordPress Popup bằng OptinMonster
Điều đầu tiên chúng ta cần làm là tạo ra một modal popup bằng cách sử dụng OptinMonster.
Bạn cần phải tạo một optin mới bằng cách nhấp vào OptinMonster trong menu quản trị WordPress, và sau đó nhấp vào nút Create New Optin.
Điều này sẽ đưa bạn đến trang web OptinMonster, nơi bạn sẽ tạo ra popup của bạn. Đầu tiên, bạn cần cung cấp tiêu đề cho chiến dịch của bạn. Bạn có thể đặt tên bất kỳ thứ gì bạn muốn, ví dụ: ‘Biểu mẫu liên hệ bật lên’.
Tiếp theo bạn cần chọn trang web của mình từ trình đơn thả xuống. Nhấp vào Canvas dưới ‘Chọn thiết kế của bạn’ tùy chọn.
OptinMonster sẽ hiển thị cho bạn các mẫu có sẵn. Hiện tại, chỉ có mẫu Bảng trắng có sẵn cho Canvas. Nhấp vào mẫu để tiếp tục.
Thao tác này sẽ đưa bạn đến màn hình Optin Customizer. Bạn sẽ thấy rằng Canvas trống bằng thiết kế. Nó được thực hiện theo cách đó, vì vậy bạn có thể thêm bất cứ thứ gì bạn muốn trong khi sử dụng sức mạnh của OptinMonster. Bạn có thể thêm biểu mẫu đăng ký, hộp giống facebook, cuộc khảo sát, mã phiếu giảm giá hoặc giống như chúng tôi đang làm trong ví dụ này một biểu mẫu liên hệ.
Trong tab thiết kế, bạn có thể chọn chiều cao chiều rộng của vải của bạn. Theo mặc định, nó được đặt là 700 x 350 px. Hãy đặt chiều cao lên 520.
Trong hộp ‘HTML tùy chỉnh’, bạn sẽ nhập mã vạch của mẫu liên hệ cùng với bất kỳ HTML tuỳ chỉnh nào khác mà bạn có thể muốn thêm.
Dưới đây là một mẫu HTML chúng tôi sử dụng để tạo popup phương thức cho hướng dẫn này.
Bạn có câu hỏi nào không?
Bạn muốn hỏi chúng tôi nhiều hơn về các dịch vụ của chúng tôi? Đơn giản chỉ cần điền vào biểu mẫu này và chúng tôi sẽ liên hệ lại với bạn càng sớm càng tốt.
[wpforms id = "119"]
Lưu ý rằng chúng tôi đã nhúng mã vạch WPForms vào đó. Nếu bạn đang sử dụng một mẫu liên hệ khác, bạn chỉ cần thay thế mã vạch ngắn bằng mã vạch liên hệ của bạn.
Sau HTML tuỳ chỉnh, tùy chọn tiếp theo là nhập CSS tuỳ chỉnh của bạn. Bên dưới hộp CSS tùy chỉnh, bạn sẽ thấy chuỗi văn bản ngẫu nhiên trông giống như sau html div # om-mw7pzo63ch6wpfzi . Đây là tiền tố CSS bạn sẽ sử dụng trong CSS tùy chỉnh của bạn.
Dưới đây là CSS chúng tôi sử dụng để tạo ra modal popup cho hướng dẫn này.
html div # om-mw7pzo63ch6wpfzi div # om-vải-bảng-optin {
màu nền: # f8f8f8;
}
html div # om-mw7pzo63ch6wpfzi h3 {
text-align: trung tâm;
}
html div # om-mw7pzo63ch6wpfzi .tagline {
kiểu chữ: italic;
}
html div # om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field {
padding: 10px 0;
rõ ràng: cả hai;
}
html div # om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-label {
hiển thị: khối;
phông chữ trọng lượng: 700;
kích cỡ phông chữ: 16px;
float: không có;
chiều cao đường dây: 1,3;
lề: 0 0 4px 0;
đệm: 0;
}
html div # om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-hp {
hiển thị: không quan trọng;
vị trí: tuyệt đối quan trọng;
trái: -9000px! quan trọng;
}
Đừng lo lắng nếu bạn không thể xem bản xem trước bây giờ, bạn có thể điều chỉnh CSS của mình sau. Bạn sẽ có thể sử dụng công cụ Inspect Element của trình duyệt để tìm ra các lớp CSS và bộ chọn bạn muốn nhắm mục tiêu và sau đó thêm css tùy chỉnh bằng cách chỉnh sửa optin của bạn.
Bây giờ chúng ta đã làm xong phần thiết kế. Chúng ta hãy chuyển sang tab cấu hình trong customizer.
Thay đổi cả ‘Thời lượng cookie của Optin’ và ‘Thời gian thành công của thành phần Optin’ thành 0. Điều này sẽ ngừng OptinMonster từ việc thiết lập cookie thời gian.
Bạn cũng cần thay đổi ‘Optin Success Message’. Theo mặc định, nó cảm ơn người dùng đăng ký, nhưng chúng tôi đang sử dụng nó trên một hình thức liên lạc. Bạn nên thay đổi thông báo thành công để cảm ơn người dùng đã liên hệ với bạn.
Vì cửa sổ bật lên của chúng tôi sẽ chỉ xuất hiện khi người dùng nhấp vào một liên kết hoặc một nút, điều này có nghĩa là chúng tôi cần kích hoạt trình kích hoạt thủ công. Chọn hộp bên dưới tùy chọn ‘Tải về Kích hoạt bằng tay?’.
Nhấp vào nút Save để lưu các thiết lập Optin của bạn, sau đó nhấp vào nút đóng để thoát customizer.
Bước 3: Thêm quảng cáo trong trang WordPress của bạn
Chuyển về khu vực quản trị WordPress của bạn 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 thấy optin của mình, sau đó nhấp vào nút resins làm mới.
Nhấp vào ‘Chỉnh sửa cài đặt đầu ra’ liên kết dưới optin của bạn. Điều này sẽ đưa bạn đến các thiết lập đầu ra cho popup.
Đầu tiên bạn cần đánh dấu hộp bên cạnh ‘Enable optin on site’ và ‘Load optin trên toàn cầu’ tùy chọn. Nếu bạn không kiểm tra những điều này, sau đó popup sẽ không xuất hiện trên trang web của bạn.
Cuộn xuống trên trang, và bạn sẽ thấy tùy chọn ‘Phân tích nội dung cho các mã ngắn’ . Hãy chắc chắn rằng nó được kiểm tra, nếu không OptinMonster sẽ không phân tích cú pháp các mã ngắn bên trong popup của bạn.
Tiếp theo, bạn cần nhập mã vạch mà bạn đã đưa vào popup. Đây là mã vạch liên hệ của bạn.
Nhấp vào cài đặt lưu để lưu các thay đổi của bạn.
Thêm liên kết hoặc nút để Kích hoạt Mẫu liên hệ Quảng cáo
Đầu tiên bạn cần OptinMonster optin’s slug. Nhấp vào biểu tượng OptinMonster trong thanh bên của WordPress của bạn. Bạn sẽ nhìn thấy con hạc optin bên cạnh tiêu đề Optin của bạn.
Tạo trang mới trong WordPress hoặc chỉnh sửa bài đăng hoặc trang mà bạn muốn thêm liên kết hoặc biểu tượng liên kết cửa sổ bật lên. Trong trình soạn thảo bài đăng chuyển sang trình soạn thảo văn bản và thêm liên kết cửa sổ bật lên của bạn như sau:
liên hệ chúng tôi
Đừng quên thay thế các optin-sên với optin slug riêng của bạn.
Lưu các thay đổi của bạn và truy cập bài đăng / trang của bạn. Nhấp vào liên kết để xem biểu mẫu popup liên lạc của bạn đang hoạt động.
Bạn có thể sử dụng liên kết này bất cứ nơi nào trên trang web WordPress của bạn. Bạn có thể thêm nó vào bài viết hoặc các trang, các vật dụng văn bản, ngay cả trong các mẫu WordPress của bạn.
Đó là tất cả. Chúng tôi hy vọng bài viết này đã giúp bạn tăng tỷ lệ chuyển đổi của bạn bằng cách sử dụng một hình thức liên lạc popup trong WordPress. Bạn cũng có thể muốn kiểm tra như thế nào OptinMonster giúp chúng tôi tăng thuê bao email của chúng tôi bằng 600%.