Tạo và hiển thị biểu mẫu bật lên

Published: 16 tháng 7, 2026 · Last updated: 21 tháng 7, 2026 · By Marcus Biel

Popup được hiển thị phía trên nội dung trang web của bạn. Nó đặt lời mời đăng ký ngay trong tầm nhìn trực tiếp của khách truy cập, đồng thời vẫn giữ nguyên trang bên dưới.

Popup hữu ích cho lời mời đăng ký nhận bản tin, ưu đãi giảm giá, đăng ký sự kiện, nam châm thu hút khách hàng tiềm năng và các lời kêu gọi hành động tập trung khác. Vì Popup làm gián đoạn trải nghiệm trang thông thường, thời điểm và tần suất hiển thị cũng quan trọng như thiết kế.

Hướng dẫn này giải thích các cài đặt dành riêng cho Popup. Bố cục, khối nội dung, trường người đăng ký, thẻ, kiểu chữ, lớp, và quy trình đăng ký được trình bày trong hướng dẫn chính về Trình tạo biểu mẫu đăng ký.

Tạo Popup

Mở “Signup Forms”, nhấp vào “Create Form”, rồi chọn “Popup”. Nhập tên nội bộ rõ ràng và tiếp tục vào trình tạo.

Bạn cũng có thể chỉnh sửa Popup hiện có bằng cách nhấp vào tên của Popup trong Tổng quan biểu mẫu đăng ký.

Hãy sử dụng tên giải thích rõ ưu đãi hoặc vị trí hiển thị, chẳng hạn như “Popup giảm giá trang chủ”, “Popup đăng ký hội thảo trực tuyến” hoặc “Popup tải xuống hướng dẫn”. Tên nội bộ không tự động được hiển thị cho khách truy cập.

Chọn mẫu Popup

Popup cung cấp một biểu mẫu trống, một biểu mẫu tiêu chuẩn và bốn mẫu được thiết kế sẵn:

• Giảm giá tối giản
• Hướng dẫn thân thiện
• Hội thảo trực tuyến nền tối
• Cộng đồng nhẹ nhàng

Hãy chọn mẫu có kích thước và cấu trúc nội dung phù hợp với ưu đãi. Sau đó, bạn có thể thay đổi toàn bộ văn bản, trường, màu sắc, hình ảnh, khoảng cách và bố cục.

Thiết kế Popup

Sử dụng trình tạo trực quan để sắp xếp Popup. Bạn có thể kết hợp biểu mẫu đăng ký với văn bản, hình ảnh, video, danh sách, nút, liên kết mạng xã hội, bộ đếm người đăng ký, khoảng trống và đường phân cách.

Hãy giữ thông điệp chính đủ ngắn để có thể hiểu ngay lập tức. Một tiêu đề rõ ràng, một phần giải thích ngắn và một nút gửi cụ thể thường hiệu quả hơn nhiều thông điệp cạnh tranh nhau.

Chọn khối biểu mẫu đăng ký để cấu hình các trường, thông tin bắt buộc, thẻ ẩn, chỉ báo tiến trình, bộ đếm người đăng ký, trường nhập và nút gửi. Mở “Page settings” để thay đổi nền Popup tổng thể và các mặc định về giao diện.

Popup xuất hiện bên trên trang web với nút đóng. Hãy chừa đủ khoảng trống trực quan quanh văn bản và các trường quan trọng để biểu mẫu vẫn dễ sử dụng trên màn hình nhỏ.

Cấu hình hành vi Popup

Chọn khối biểu mẫu đăng ký và mở “Widget Settings”. Phần này kiểm soát thời điểm Popup được hiển thị và tần suất khách truy cập có thể nhìn thấy Popup.

Độ trễ hiển thị

“Display Delay” xác định số giây Maildroppa chờ trước khi hiển thị Popup trên trang web được nhúng.

Nhập 0 để hiển thị Popup mà không có độ trễ bổ sung. Sử dụng giá trị lớn hơn khi khách truy cập cần thời gian đọc trang trước khi ưu đãi xuất hiện. Trình tạo chấp nhận độ trễ tối đa 86.400 giây.

Hãy chọn độ trễ dựa trên nội dung trang. Độ trễ ngắn có thể phù hợp với trang chiến dịch tập trung, trong khi độ trễ dài hơn có thể ít gây gián đoạn hơn trong một bài viết.

Tần suất hiển thị

“Display Frequency” kiểm soát khoảng thời gian sau đó Popup có thể được hiển thị lại cho cùng một khách truy cập. Các tùy chọn khả dụng là:

• Luôn luôn
• Mỗi giờ một lần
• Mỗi ngày một lần
• Mỗi tuần một lần
• Mỗi tháng một lần

Hãy thận trọng khi sử dụng “Always”. Popup liên tục làm gián đoạn cùng một khách truy cập có thể gây khó chịu. Tần suất hằng ngày hoặc hằng tuần thường là điểm khởi đầu tốt hơn cho ưu đãi trên một trang web phổ thông.

Tần suất được lưu trong trình duyệt của khách truy cập. Vì vậy, việc kiểm tra bằng trình duyệt khác, cửa sổ duyệt web riêng tư hoặc bộ nhớ trình duyệt đã được xóa có thể cho kết quả khác.

Sử dụng ý định thoát

Bật “Exit Intent Popup” khi Popup cần mở sau khi khách truy cập di chuyển con trỏ ra khỏi khu vực trang, cho thấy họ có thể sắp rời đi.

Khi ý định thoát được bật, Popup chờ hành vi này thay vì tuân theo thời gian trễ hiển thị thông thường. Tần suất hiển thị đã chọn vẫn ngăn Popup xuất hiện lại quá sớm.

Ý định thoát dựa trên chuyển động của con trỏ, vì vậy chủ yếu phù hợp với trình duyệt trên máy tính để bàn và máy tính xách tay. Thiết bị cảm ứng không cung cấp tín hiệu thoát tương tự. Luôn đảm bảo rằng khách truy cập trên thiết bị di động vẫn có thể tìm thấy lời mời đăng ký thông qua chính trang đó hoặc một biểu mẫu phù hợp khác.

Mở Popup thủ công từ một phần tử trên trang

Popup có thể mở khi khách truy cập nhấp vào một nút, hình ảnh hoặc liên kết cụ thể trên trang web của bạn. Đây là trình kích hoạt nhấp thủ công. Nó khác với “Exit Intent Popup”, vốn phản hồi khi khách truy cập di chuyển con trỏ ra khỏi trang.

Định cấu hình và cài đặt trình kích hoạt nhấp thủ công như sau:

1. Mở Popup trong Trình tạo biểu mẫu đăng ký.
2. Nhấp vào khối biểu mẫu đăng ký trên canvas và mở “Settings” ở bên phải.
3. Mở rộng “Widget Settings” và bật “Open popup when a customer clicks a page element”.
4. Nhấp vào “Save changes”.
5. Quay lại Tổng quan biểu mẫu đăng ký và kích hoạt Popup nếu Popup đang không hoạt động.
6. Nhấp vào “Show Code Snippet” trong hàng của Popup đó.

Hộp thoại chứa hai giá trị cần thiết trên trang web của bạn:

1. Sao chép toàn bộ mã từ tab “JavaScript” và thêm mã đó vào trang web nơi Popup sẽ khả dụng.
2. Bên dưới đoạn mã, sao chép ID hiển thị dưới mục “Add this ID to element from which you want to manually trigger Popup”.
3. Thêm chính xác giá trị đó vào thuộc tính id của nút, hình ảnh hoặc liên kết sẽ mở Popup.

ID có định dạng sau:

maildroppa-popup-btn-[form-id]

Ví dụ:

<button id="maildroppa-popup-btn-[form-id]">Get the guide</button>

JavaScript tải Popup. ID kết nối Popup với phần tử trang đã chọn. Cả hai phải có mặt trên cùng một trang đã xuất bản. Khi khách truy cập nhấp vào phần tử có đúng ID đó, tập lệnh Maildroppa sẽ mở Popup.

Nếu nút trên trang web của bạn đã có ID từ một hệ thống Popup khác, hãy thay thế ID đó bằng ID trình kích hoạt Maildroppa khi Maildroppa cần xử lý thao tác nhấp. Không đặt Popup Maildroppa bên trong một Popup thứ hai do trình tạo trang web cung cấp.

Mỗi ID HTML chỉ được sử dụng một lần trên mỗi trang. Nếu nhiều phần tử cần mở cùng một Popup, hãy nhờ người triển khai trang web kết nối các phần tử đó mà không lặp lại cùng một ID.

Kết nối quy trình đăng ký

Xem lại quy trình đăng ký được chỉ định trong phần đầu của trình tạo. Quy trình này kiểm soát phản hồi gửi ngay lập tức, email Double Opt-in và kết quả sau khi xác nhận.

Bạn có thể chọn một quy trình hiện có, chỉnh sửa quy trình đó hoặc tạo một quy trình riêng cho Popup này. Một quy trình riêng hữu ích khi ưu đãi cần thông báo xác nhận riêng hoặc phân phối nam châm thu hút khách hàng tiềm năng.

Xem trước và lưu

Nhấp vào “Preview” để kiểm tra thiết kế và hành vi của Popup mà không thay đổi phiên bản đang được sử dụng trên trang web. Xem lại bố cục, nút đóng, thứ tự trường, khoảng trống xác thực và phản hồi gửi.

Nhấp vào “Save changes” khi Popup đã sẵn sàng. Sau đó quay lại Tổng quan biểu mẫu đăng ký.

Kích hoạt và nhúng Popup tự động

Kích hoạt Popup từ menu thao tác ba dấu chấm nếu Popup chưa hoạt động. Sau đó nhấp vào “Show Code Snippet” và sao chép toàn bộ mã từ tab “JavaScript”.

Thêm tập lệnh vào mọi trang web nơi Popup sẽ khả dụng. Mã chứa ID biểu mẫu duy nhất của Popup và tải cấu hình hiện được lưu.

Tab “HTML” cung cấp mã đánh dấu được tạo cho các triển khai tùy chỉnh. Nếu sử dụng tab này, hãy kiểm tra cẩn thận mọi hành vi và bước gửi vì mã và kiểu của trang web có thể ảnh hưởng đến kết quả.

Phần này áp dụng khi Popup cần tự động mở dựa trên độ trễ hiển thị hoặc hành vi ý định thoát. Đối với nút, hình ảnh hoặc liên kết mở Popup khi được nhấp, hãy làm theo

.

Để xem hướng dẫn nhúng chung, hãy tham khảo Tạo và nhúng biểu mẫu được nhúng.

Kiểm tra Popup trên trang web

Kiểm tra Popup trên trang web thực tế sau khi thêm mã:

1. Kiểm tra độ trễ đã cấu hình.
2. Kiểm tra nút đóng và thao tác nhấp bên ngoài biểu mẫu.
3. Nếu được bật, di chuyển con trỏ ra khỏi trang để kiểm tra ý định thoát.
4. Nếu được bật, nhấp vào phần tử trang đã cấu hình để kiểm tra trình kích hoạt thủ công.
5. Kiểm tra bố cục trên màn hình hẹp.
6. Gửi biểu mẫu và hoàn tất quy trình Double Opt-in.
7. Xác minh người đăng ký và các thẻ ẩn trong Maildroppa.

Cài đặt tần suất có thể ngăn Popup xuất hiện lại trong các lần kiểm tra liên tiếp. Hãy sử dụng cửa sổ duyệt web riêng tư hoặc xóa bộ nhớ trình duyệt liên quan khi cần một lượt truy cập kiểm tra mới.

Cập nhật hoặc hủy kích hoạt Popup

Để cập nhật Popup, mở Popup trong Maildroppa, chỉnh sửa thiết kế hoặc hành vi, xem trước rồi nhấp vào “Save changes”. Đoạn mã JavaScript tiếp tục sử dụng cùng một ID biểu mẫu.

Để tạm thời ngừng hiển thị Popup, chọn “Deactivate” từ menu thao tác. Việc hủy kích hoạt giữ lại Popup và dữ liệu báo cáo trước đó. Đồng thời xóa tập lệnh hoặc phần tử kích hoạt khỏi trang web nếu không còn cần đến chúng.