Chapters

Contents

the email tool that makes email marketing simple

Sign Up FreeNo credit card required.
maildroppa-promo-notebookmaildroppa-promo-spaceship

Trình tạo biểu mẫu đăng ký: Thiết kế biểu mẫu

Published: · Last updated: · By

In brief

Tìm hiểu cách dùng trình tạo biểu mẫu đăng ký trực quan của Maildroppa để chọn mẫu, thêm nội dung, định kiểu trường, gắn thẻ, kết nối luồng và lưu.

Trình tạo biểu mẫu đăng ký là trình chỉnh sửa trực quan dành cho tất cả biểu mẫu đăng ký và trang đích của Maildroppa.

Bạn có thể sử dụng công cụ này để sắp xếp bố cục, thêm văn bản và hình ảnh, cấu hình các trường người đăng ký, thay đổi màu sắc và phông chữ, gán thẻ, cũng như quyết định điều gì xảy ra sau khi ai đó gửi biểu mẫu. Bảng thiết kế hiển thị kết quả trong khi bạn làm việc, vì vậy bạn không cần viết mã để thiết kế hoàn chỉnh trải nghiệm đăng ký.

Maildroppa sử dụng cùng một trình tạo cho bốn loại biểu mẫu:

  • Trang đích là các trang độc lập hoàn chỉnh mà bạn xuất bản và chia sẻ bằng một liên kết.
  • Biểu mẫu nhúng được đặt trực tiếp bên trong một trang trên website của bạn.
  • Cửa sổ bật lên xuất hiện phía trên website của bạn và cũng có thể được mở từ một phần tử trên trang.
  • Thanh trượt vào xuất hiện tại cạnh hoặc vị trí đã chọn của cửa sổ trình duyệt.

Hướng dẫn này giải thích tất cả chức năng dùng chung cho các loại biểu mẫu trên. Các hướng dẫn được liên kết chỉ giải thích những cài đặt và bước riêng của từng loại.

Trình tạo biểu mẫu đăng ký: trình tạo biểu mẫu đăng ký hoàn chỉnh

Mở Trình tạo biểu mẫu đăng ký

Mở “Signup Forms” trong Maildroppa. Sau đó, bạn có thể nhấp vào “Create Form” để tạo Trang đích, Biểu mẫu nhúng, Cửa sổ bật lên hoặc Thanh trượt vào mới.

Để tiếp tục làm việc với một biểu mẫu hiện có, hãy nhấp vào tên biểu mẫu hoặc chọn “Edit Form” từ menu thao tác ba chấm trong Tổng quan về biểu mẫu đăng ký.

Đặt cho biểu mẫu một tên nội bộ rõ ràng. Những tên như “Bản tin trang chủ”, “Cửa sổ bật lên hội thảo trực tuyến” hoặc “Tài liệu thu hút khách hàng tiềm năng mùa hè” sẽ dễ nhận diện hơn về sau so với những tên chung chung như “Biểu mẫu 1”. Tên biểu mẫu giúp bạn quản lý biểu mẫu trong Maildroppa và không tự động hiển thị cho khách truy cập.

Tìm hiểu về Trình tạo

Trình tạo được chia thành bốn khu vực chính.

Thanh trên cùng chứa tên biểu mẫu và các thao tác chính. Tại đây, bạn có thể quay lại trang tổng quan, xem trước nội dung và lưu biểu mẫu. Trang đích cũng hiển thị các tùy chọn bản nháp và xuất bản trên thanh này.

Thanh bên trái chứa “Layout”, “Content” và “Layers”. Sử dụng thanh này để tạo cấu trúc, thêm phần tử mới và quản lý mọi thứ đã được đặt trên bảng thiết kế.

Bảng thiết kế là khu vực làm việc trung tâm. Bảng hiển thị trang hoặc biểu mẫu hiện tại. Nhấp vào một phần tử để chọn phần tử đó. Bạn cũng có thể kéo phần tử đến vị trí khác hoặc thêm phần tử mới từ thanh bên trái.

Thanh bên phải chứa “Settings” và “Page settings”. “Settings” thay đổi phần tử đang được chọn. “Page settings” thay đổi nền tổng thể và các mặc định thiết kế.

Trên màn hình nhỏ hơn, các thanh bên sẽ mở dưới dạng bảng điều khiển bằng các nút “Content” và “Settings”. Các chức năng khả dụng vẫn giữ nguyên.

Bắt đầu với một mẫu

Khi tạo biểu mẫu, trình tạo sẽ cung cấp các thiết kế khởi đầu cho loại biểu mẫu đã chọn. Bạn có thể bắt đầu với thiết kế trống, sử dụng biểu mẫu tiêu chuẩn hoặc chọn một mẫu có sẵn.

Mẫu cung cấp bố cục, màu sắc, kiểu chữ và nội dung ví dụ ban đầu. Mẫu không giới hạn những gì bạn có thể thay đổi về sau. Sau khi chọn một mẫu, mọi phần tử vẫn có thể được chỉnh sửa, di chuyển, nhân bản, tạo kiểu lại hoặc xóa.

Mỗi loại biểu mẫu có các mẫu phù hợp với mục đích sử dụng. Ví dụ: Trang đích bao gồm các thiết kế trang hoàn chỉnh cho Bản tin, Tài liệu thu hút khách hàng tiềm năng, Hội thảo trực tuyến và Danh sách chờ. Biểu mẫu nhúng, Cửa sổ bật lên và Thanh trượt vào có các thiết kế khởi đầu nhỏ gọn riêng.

Nếu không chắc nên chọn mẫu nào, hãy chọn mẫu có cấu trúc gần nhất với mục tiêu của bạn. Thay đổi văn bản, màu sắc và hình ảnh thường nhanh hơn so với việc xây dựng cùng một cấu trúc từ bảng thiết kế trống.

Trình tạo biểu mẫu đăng ký: lựa chọn mẫu khởi đầu

Tạo bố cục

Mở “Layout” trong thanh bên trái để thêm một hàng ô mới. Các bố cục khả dụng bao gồm:

  • Một ô
  • Hai, ba hoặc bốn ô bằng nhau
  • Hai ô theo tỷ lệ 2:1
  • Hai ô theo tỷ lệ 1:2

Nhấp vào một bố cục để thêm bố cục đó tại vị trí chèn hiện tại hoặc kéo bố cục vào bảng thiết kế. Sau đó, bạn có thể đặt nội dung bên trong từng ô.

Chọn một hộp hoặc cột để điều chỉnh kích thước, khoảng cách, căn chỉnh, nền, đường viền và vùng đệm trong thanh bên phải. Đối với bố cục nhiều cột, bạn cũng có thể thay đổi độ rộng tương đối của các cột.

Sử dụng bố cục để tạo thứ tự đọc rõ ràng. Một cột phù hợp với các biểu mẫu đăng ký nhỏ gọn. Bố cục hai cột hữu ích khi hình ảnh, danh sách lợi ích hoặc thông tin sự kiện cần xuất hiện bên cạnh biểu mẫu đăng ký.

Thêm nội dung

Mở “Content” trong thanh bên trái để thêm từng khối nội dung. Bạn có thể nhấp vào một khối để chèn hoặc kéo khối đó đến vị trí mong muốn trên bảng thiết kế.

Trình tạo cung cấp các khối nội dung sau:

Signup form — Chứa các trường người đăng ký và nút gửi. Một thiết kế cần có một khối biểu mẫu đăng ký trước khi có thể được lưu thành biểu mẫu hoạt động. Khi khối này đã có mặt, nó sẽ không còn được cung cấp như một khối nội dung bổ sung.

Text — Thêm tiêu đề, đoạn văn hoặc văn bản được định dạng khác.

Image — Thêm hình ảnh từ URL, tệp tải lên hoặc thư viện phương tiện Maildroppa. Bạn có thể cung cấp văn bản thay thế, thêm liên kết và kiểm soát kích thước, tỷ lệ khung hình, cắt ảnh, tiêu điểm, xoay và lật ảnh.

Video — Thêm video YouTube hoặc Vimeo, URL nhúng hoặc tệp video trực tiếp. Bạn cũng có thể cấu hình hình ảnh xem trước và giao diện của nút phát.

List — Thêm danh sách có dấu đầu dòng hoặc đánh số. Chỉnh sửa các mục và kiểm soát màu dấu, khoảng cách, kiểu chữ và căn chỉnh.

Button — Thêm nút liên kết với văn bản, URL, kích thước, chiều rộng, màu sắc, đường viền, kiểu chữ và căn chỉnh có thể cấu hình.

Social links — Thêm các biểu tượng liên kết đến các dịch vụ như Facebook, Instagram, LinkedIn, TikTok, YouTube hoặc website của bạn.

Subscriber counter — Hiển thị số người đăng ký đã xác nhận hiện tại. Bạn có thể thêm số điều chỉnh, thay đổi nhãn và tạo kiểu cho số cũng như văn bản.

Spacer — Thêm khoảng trống có kiểm soát. Có thể đặt khoảng cách riêng cho máy tính và thiết bị di động.

Divider — Thêm đường kẻ ngang với màu sắc, độ dày, chiều rộng, kiểu, căn chỉnh và khoảng cách có thể cấu hình.

Trang đích cũng cung cấp các phần hoàn chỉnh có thể tái sử dụng. Các phần này được giải thích trong Hướng dẫn về Trang đích.

Trình tạo biểu mẫu đăng ký: bảng nội dung

Chọn và sắp xếp các phần tử

Nhấp vào một phần tử trên bảng thiết kế để chọn. Các cài đặt của phần tử sẽ xuất hiện trong thanh bên phải.

Các điều khiển trên hoặc gần phần tử được chọn cho phép bạn di chuyển, nhân bản hoặc xóa phần tử. Bạn cũng có thể kéo một phần tử đến ô hoặc vị trí khác. Chỉ báo vị trí cho biết phần tử sẽ được chèn vào đâu.

Mở “Layers” khi trang chứa nhiều hộp, cột và khối nội dung lồng nhau. Bảng Layers hiển thị toàn bộ cấu trúc dưới dạng danh sách. Từ đó, bạn có thể:

  • Chọn một phần tử
  • Đổi tên phần tử để dễ nhận diện hơn
  • Di chuyển phần tử lên hoặc xuống
  • Kéo phần tử đến vị trí khác
  • Khóa hoặc mở khóa phần tử
  • Nhân bản phần tử
  • Xóa phần tử

Tính năng khóa hữu ích khi bạn không muốn vô tình di chuyển nền, hình ảnh hoặc phần đã hoàn thiện. Mở khóa lớp khi muốn chỉnh sửa hoặc định vị lại lớp đó.

Sử dụng “Undo” và “Redo” trong thanh công cụ của trình tạo để lùi lại hoặc tiến tới qua các thay đổi thiết kế gần đây.

Chỉnh sửa văn bản

Nhấp vào bên trong một phần tử văn bản để chỉnh sửa nội dung trực tiếp trên bảng thiết kế. Thanh công cụ văn bản cung cấp các kiểu đoạn văn và tiêu đề cùng với các tùy chọn định dạng phổ biến.

Tùy thuộc vào văn bản được chọn, bạn có thể sử dụng chữ đậm, chữ nghiêng, gạch chân, gạch ngang, chỉ số dưới, chỉ số trên, căn chỉnh, danh sách có dấu đầu dòng hoặc đánh số, liên kết và biểu tượng cảm xúc. Các cài đặt cho phần văn bản được chọn cũng cho phép bạn điều chỉnh kiểu chữ và màu sắc mà không làm thay đổi mọi phần tử văn bản khác.

Sử dụng các cài đặt kiểu chữ tổng thể trong “Page settings” khi tất cả tiêu đề, văn bản nội dung, liên kết hoặc nút cần có cùng một kiểu nhất quán. Sử dụng cài đặt của phần tử được chọn khi chỉ một khối cần có giao diện khác.

Cấu hình biểu mẫu đăng ký

Chọn khối biểu mẫu đăng ký trên bảng thiết kế để mở cài đặt. Các phần khả dụng bao gồm thanh tiến trình, bộ đếm người đăng ký, trường, thẻ ẩn, vùng chứa biểu mẫu, trường nhập liệu và nút gửi.

Các trường người đăng ký

Địa chỉ email là trường trung tâm của biểu mẫu đăng ký. Bạn cũng có thể thêm các trường người đăng ký hiện có trong tài khoản Maildroppa.

Với mỗi trường, bạn có thể thay đổi nhãn và văn bản giữ chỗ, quyết định trường có bắt buộc hay không và chọn có hiển thị nhãn trường hay không. Có thể sắp xếp lại các trường bằng cách kéo chúng hoặc sử dụng các điều khiển di chuyển.

Chỉ yêu cầu những thông tin bạn thực sự cần. Biểu mẫu ngắn sẽ hoàn tất nhanh hơn, trong khi các trường bổ sung hữu ích khi thông tin đó được sử dụng để phân khúc hoặc cá nhân hóa.

Thẻ ẩn

Thẻ ẩn không hiển thị cho khách truy cập. Khi ai đó đăng ký qua biểu mẫu, Maildroppa sẽ tự động gán các thẻ đã chọn cho người đăng ký đó.

Điều này hữu ích để xác định nguồn hoặc mối quan tâm đằng sau một lượt đăng ký. Ví dụ: biểu mẫu dành cho hội thảo trực tuyến có thể áp dụng thẻ “Hội thảo trực tuyến”, trong khi biểu mẫu tài liệu thu hút khách hàng tiềm năng có thể áp dụng thẻ cho chủ đề đã tải xuống.

Thanh tiến trình

Bạn có thể tắt thanh tiến trình hoặc hiển thị thanh này dưới dạng phần trăm hay chỉ báo hai bước.

Đối với chỉ báo phần trăm, bạn có thể thay đổi văn bản, màu sắc, cỡ chữ, độ đậm và căn chỉnh. Đối với chỉ báo hai bước, bạn có thể chỉnh sửa nhãn cho cả hai bước và chọn màu chủ động cũng như không chủ động.

Chỉ báo tiến trình có thể giúp giải thích rằng việc gửi biểu mẫu là bước đầu tiên và xác nhận email Double Opt-in là bước thứ hai.

Bộ đếm người đăng ký trong biểu mẫu

Biểu mẫu đăng ký có thể hiển thị số người đăng ký đã xác nhận hiện tại trước hoặc sau nút gửi.

Bạn có thể thêm số điều chỉnh, viết nhãn, chọn vị trí và điều chỉnh kiểu chữ cũng như căn chỉnh. Số điều chỉnh được cộng vào số người đăng ký đã xác nhận do Maildroppa hiển thị.

Bộ đếm trong biểu mẫu này khác với khối nội dung độc lập “Subscriber counter”. Sử dụng cài đặt biểu mẫu khi số lượng cần được liên kết trực tiếp với khu vực gửi. Sử dụng khối nội dung khi bộ đếm cần xuất hiện ở nơi khác trong thiết kế.

Thiết kế biểu mẫu, trường nhập liệu và nút

Cài đặt “Signup Form Block” kiểm soát vùng chứa xung quanh các trường, bao gồm nền, đường viền, bán kính góc và khoảng cách.

Cài đặt trường nhập liệu kiểm soát nền trường, nhãn, văn bản, văn bản giữ chỗ, đường viền và khoảng cách. Nút gửi có các cài đặt riêng cho văn bản, kiểu chữ, màu sắc, đường viền, kích thước và căn chỉnh.

Bạn có thể nhấp trực tiếp vào thanh tiến trình hoặc nút gửi trên bảng thiết kế để mở ngay cài đặt cho phần đó.

Thay đổi giao diện tổng thể

Mở “Page settings” trong thanh bên phải để thay đổi thiết kế tổng thể. Đối với Biểu mẫu nhúng, Cửa sổ bật lên và Thanh trượt vào, các cài đặt này áp dụng cho bảng thiết kế biểu mẫu thay vì một trang được lưu trữ hoàn chỉnh.

Bạn có thể cấu hình nền chính, hình nền, chiều rộng tối đa và khoảng cách trên thiết bị di động. Các cài đặt giao diện xác định các mặc định cho:

  • Phông chữ nội dung và màu văn bản
  • Màu liên kết, gạch chân và màu khi di chuột
  • Phông chữ, màu, độ đậm, kích thước và chiều cao dòng của tiêu đề
  • Nút
  • Hộp, đường viền, bán kính góc, khoảng cách và vùng đệm
  • Vùng đệm trang trên thiết bị di động và điểm các cột xếp chồng lên nhau

Các mặc định này giúp thiết kế nhất quán. Khi cần, từng khối vẫn có thể ghi đè các mặc định này.

Kết nối luồng đăng ký

Mỗi biểu mẫu được kết nối với một Luồng đăng ký. Luồng đăng ký kiểm soát hành trình của người đăng ký sau khi biểu mẫu được gửi:

  • Khách truy cập nhìn thấy gì ngay sau khi gửi biểu mẫu
  • Email Double Opt-in nào được gửi
  • Điều gì xảy ra sau khi người đăng ký xác nhận địa chỉ email

Mở tùy chọn luồng đăng ký trong phần đầu trình tạo để xem luồng hiện được gán. Bạn có thể chọn một luồng hiện có khác, chỉnh sửa luồng đã chọn hoặc tạo luồng mới.

Một luồng đăng ký có thể được sử dụng bởi nhiều biểu mẫu. Nếu chỉnh sửa một luồng dùng chung, thay đổi sẽ ảnh hưởng đến mọi biểu mẫu đang sử dụng luồng đó. Vì vậy, Maildroppa cho phép bạn chọn chỉnh sửa luồng dùng chung hoặc tạo một bản sao riêng cho biểu mẫu hiện tại.

Xem trước và lưu

Nhấp vào “Preview” để kiểm tra thiết kế hoàn chỉnh và trải nghiệm đăng ký trước khi công khai. Tính năng xem trước hữu ích để kiểm tra văn bản dài, tỷ lệ hình ảnh, thứ tự trường, nhãn nút và sự cân đối tổng thể của biểu mẫu.

Đối với Biểu mẫu nhúng, Cửa sổ bật lên và Thanh trượt vào, hãy nhấp vào “Save changes” khi bạn sẵn sàng lưu phiên bản hiện tại.

Trang đích sử dụng các tùy chọn bản nháp và xuất bản trên thanh trên cùng. Bạn có thể lưu trang mà không xuất bản, và những thay đổi đối với trang đã xuất bản vẫn ở trạng thái chưa xuất bản cho đến khi bạn xuất bản chúng. Quy trình hoàn chỉnh được giải thích trong Xây dựng và xuất bản Trang đích.

Sau khi lưu, hãy quay lại Tổng quan về biểu mẫu đăng ký để kích hoạt và nhúng biểu mẫu website hoặc quản lý Trang đích đã xuất bản.

Tiếp tục với loại biểu mẫu của bạn

Phần thiết kế chung đã hoàn tất. Hãy tiếp tục với hướng dẫn dành cho biểu mẫu bạn đang tạo:

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.

Sign Up For Free

No credit card required. No time limit.