Chapters
- Trình tạo biểu mẫu đăng ký: Thiết kế biểu mẫu
- Tạo và xuất bản Landing Page
- Tạo và nhúng biểu mẫu đăng ký
- Tạo và hiển thị biểu mẫu bật lên
- Tạo và định vị biểu mẫu trượt vào
Contents
the email tool that makes email marketing simple
Tạo và nhúng biểu mẫu đăng ký
Published: · Last updated: · By Marcus Biel
In brief
Tìm hiểu cách tạo, thiết kế, kích hoạt và nhúng biểu mẫu đăng ký Maildroppa bằng mã JavaScript hoặc HTML, sau đó kiểm tra hoạt động trên website.
Biểu mẫu nhúng được đặt trực tiếp bên trong một trang hiện có trên website của bạn. Biểu mẫu vẫn là một phần của nội dung xung quanh thay vì xuất hiện bên trên nội dung đó.
Biểu mẫu nhúng phù hợp với các bài viết blog, trang đích trên website của bạn, khu vực bản tin, thanh bên và chân trang. Vị trí bạn thêm mã biểu mẫu sẽ quyết định nơi biểu mẫu xuất hiện.
Hướng dẫn này trình bày các bước dành riêng cho Biểu mẫu nhúng. Các chức năng chỉnh sửa giao diện chung được giải thích trong hướng dẫn Trình tạo biểu mẫu đăng ký.
Tạo Biểu mẫu nhúng
Mở “Signup Forms”, nhấp vào “Create Form” và chọn “Embedded Form”. Nhập tên nội bộ rõ ràng rồi tiếp tục đến trình tạo.
Bạn cũng có thể chỉnh sửa biểu mẫu hiện có bằng cách nhấp vào tên biểu mẫu trong Tổng quan về Biểu mẫu đăng ký.
Tên nội bộ không tự động hiển thị với khách truy cập. Hãy đặt tên biểu mẫu theo vị trí hoặc mục đích sử dụng, chẳng hạn như “Bản tin trang chủ”, “Chân trang blog” hoặc “Cập nhật sản phẩm”.
Chọn thiết kế ban đầu
Biểu mẫu nhúng có 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:
- Ghi chú nhẹ nhàng
- Dải mã giảm giá
- Biên tập tối màu
- Xanh dương tối giản
Chọn thiết kế phù hợp nhất với không gian và phong cách của website nơi biểu mẫu sẽ xuất hiện. Bạn có thể thay đổi hoàn toàn mọi thiết kế ban đầu sau khi chọn.
Thiết kế Biểu mẫu nhúng
Sử dụng “Layout” và “Content” để sắp xếp biểu mẫu. Biểu mẫu nhúng có thể bao gồm biểu mẫu đăng ký cùng với văn bản hỗ trợ, hình ảnh, danh sách, nút, liên kết mạng xã hội, bộ đếm người đăng ký, khoảng trống hoặc đường phân cách.
Đối với thanh bên hoặc chân trang hẹp, thiết kế một cột thường dễ đọc nhất. Trong một khu vực rộng hơn trên trang, bố cục hai cột có thể đặt phần giải thích ngắn hoặc hình ảnh bên cạnh các trường nhập.
Chọn khối biểu mẫu đăng ký để chọn các trường người đăng ký, trường bắt buộc, nhãn, thẻ ẩn, chỉ báo tiến trình và bộ đếm người đăng ký tùy chọn. Sau đó, bạn có thể tạo kiểu riêng cho vùng chứa biểu mẫu, các trường và nút gửi.
Mở “Page settings” để thay đổi nền và các mặc định thiết kế tổng thể cho vùng nền của Biểu mẫu nhúng. Hãy cân nhắc website xung quanh. Nền trong suốt hoặc đơn giản thường hòa hợp tự nhiên hơn, còn nền tương phản giúp ưu đãi đăng ký nổi bật hơn.
Hướng dẫn đầy đủ về bố cục, nội dung, lớp, trường, thẻ, kiểu chữ và giao diện có trong Sử dụng Trình tạo biểu mẫu đăng ký.
Kết nối quy trình đăng ký
Sử dụng tùy chọn điều khiển quy trình đăng ký trong tiêu đề trình tạo để xem lại những gì xảy ra sau khi gửi, email Double Opt-in nào được gửi và khách truy cập nhìn thấy gì 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 được chỉ định hoặc tạo quy trình mới. Nếu quy trình đã chọn được chia sẻ với các biểu mẫu khác, hãy nhớ rằng việc chỉnh sửa quy trình có thể ảnh hưởng đến cả những biểu mẫu đó.
Xem trước và lưu
Nhấp vào “Preview” để xem lại toàn bộ biểu mẫu trước khi đặt lên website. Kiểm tra thứ tự trường, nhãn, khoảng trống dành cho lỗi, văn bản nút và lượng nội dung hỗ trợ.
Nhấp vào “Save changes” để lưu phiên bản hiện tại. Quay lại Tổng quan về Biểu mẫu đăng ký khi bạn đã sẵn sàng nhúng biểu mẫu.
Kích hoạt biểu mẫu
Biểu mẫu nhúng phải được kích hoạt trước khi có thể sử dụng mã công khai của biểu mẫu.
Nếu biểu mẫu chưa hoạt động, hãy mở menu thao tác ba chấm trong Tổng quan về Biểu mẫu đăng ký và chọn “Activate”. Biểu mẫu đang hoạt động sẽ hiển thị thao tác “Show Code Snippet”.
Hủy kích hoạt biểu mẫu khi biểu mẫu không còn cần khả dụng trên website. Việc hủy kích hoạt sẽ đưa biểu mẫu ngoại tuyến mà không xóa thiết kế hoặc dữ liệu báo cáo trước đó.
Sao chép mã JavaScript
Nhấp vào “Show Code Snippet” và mở thẻ “JavaScript”. Maildroppa cung cấp một tập lệnh ngắn chứa ID duy nhất của biểu mẫu.
Mã có cấu trúc như sau:
<script async src="https://form.maildroppa.com/md-form-loader.js" data-md-form="[form-id]"></script>
Sao chép toàn bộ mã mà không thay đổi địa chỉ tập lệnh hoặc ID biểu mẫu.
Tùy chọn JavaScript tải biểu mẫu đã lưu hiện tại thông qua runtime biểu mẫu của Maildroppa. Khi bạn chỉnh sửa và lưu cùng biểu mẫu đó trong Maildroppa sau này, đoạn mã hiện có vẫn tham chiếu đến ID biểu mẫu đó. Bạn không cần tạo biểu mẫu mới chỉ để thay đổi văn bản hoặc thiết kế.
Thêm biểu mẫu vào website
Dán tập lệnh vào vị trí trên trang nơi bạn muốn Biểu mẫu nhúng xuất hiện.
Các bước chính xác phụ thuộc vào hệ thống website của bạn. Trong trình tạo trang hoặc hệ thống quản lý nội dung, hãy sử dụng khối chấp nhận HTML tùy chỉnh hoặc mã tập lệnh. Với website tùy chỉnh, hãy thêm tập lệnh vào mẫu hoặc mã đánh dấu của trang tương ứng.
Một số trình chỉnh sửa website xóa thẻ tập lệnh vì lý do bảo mật. Nếu biểu mẫu không xuất hiện sau khi bạn xuất bản trang, trước tiên hãy kiểm tra xem trình chỉnh sửa có giữ nguyên toàn bộ tập lệnh Maildroppa hay không. Bạn có thể cần sử dụng khu vực mã tùy chỉnh chuyên dụng của hệ thống hoặc nhờ người quản lý website hỗ trợ.
Không dán cùng một đoạn mã Biểu mẫu nhúng nhiều lần trên một trang, trừ khi bạn cố ý muốn cùng một biểu mẫu xuất hiện ở nhiều vị trí và đã kiểm tra thiết lập đó.
Sử dụng thẻ HTML
Thẻ “HTML” cung cấp mã đánh dấu biểu mẫu đã tạo. Tùy chọn này dành cho các triển khai tùy chỉnh, trong đó bạn muốn làm việc trực tiếp với HTML được hiển thị.
Nếu chọn phương pháp này, hãy sao chép toàn bộ mã đánh dấu. Vì việc tích hợp HTML tùy chỉnh có thể bị ảnh hưởng bởi kiểu và cách triển khai website, hãy kiểm tra kỹ các trường, xác thực, việc gửi và quy trình xác nhận.
Đối với biểu mẫu thông thường do Maildroppa quản lý, đoạn mã JavaScript là cách tích hợp ngắn gọn hơn và tải cấu hình biểu mẫu công khai hiện tại theo ID của biểu mẫu.
Kiểm tra Biểu mẫu nhúng
Xuất bản hoặc xem trước trang website có chứa mã. Sau đó, hãy kiểm tra biểu mẫu như một khách truy cập:
- Kiểm tra xem biểu mẫu có xuất hiện đúng vị trí hay không.
- Xem trang trên màn hình rộng và màn hình hẹp.
- Điền đầy đủ mọi trường bắt buộc.
- Gửi biểu mẫu và xem lại phản hồi.
- Mở email Double Opt-in.
- Xác nhận địa chỉ và xem lại phản hồi cuối cùng.
- Kiểm tra xem người đăng ký và mọi thẻ ẩn có xuất hiện chính xác trong Maildroppa hay không.
Nếu biểu mẫu rộng hơn vùng chứa trên website, hãy điều chỉnh chiều rộng biểu mẫu, bố cục cột, khoảng đệm hoặc cài đặt xếp chồng trên thiết bị di động trong trình tạo. Tránh khắc phục vấn đề bố cục bằng cách thay đổi mã Maildroppa đã tạo.
Cập nhật Biểu mẫu nhúng
Mở cùng biểu mẫu đó trong Maildroppa, thực hiện thay đổi, xem trước rồi nhấp vào “Save changes”. Đoạn mã JavaScript trên website vẫn tiếp tục sử dụng cùng ID biểu mẫu và tải cấu hình công khai đã lưu.
Nếu cần tạm thời xóa biểu mẫu, hãy hủy kích hoạt biểu mẫu từ Tổng quan về Biểu mẫu đăng ký. Nếu không còn cần biểu mẫu, hãy đồng thời xóa đoạn mã khỏi website để trang không chứa mã không sử dụng.
Ready to Send Better Emails?
Stop juggling bloated tools or overpriced plans. Maildroppa offers personal support, GDPR-level privacy, and powerful email marketing - starting free forever.
No credit card required. No time limit.