5. Tiện ích Biểu mẫu

Form giúp bạn tạo và quản lý các biểu mẫu trên landing page của bạn. Biểu mẫu có thể được sử dụng để thu thập thông tin quan trọng từ người dùng, như thông tin liên hệ, đăng ký nhận bản tin, hoặc phản hồi từ khách hàng.

13.1 Thêm Form vào trang

• Trong thanh sidebar, nhấp vào Widgets (Tiện ích), sau đó chọn Form

• Nhấp và kéo tiện ích Form vào trang landing page của bạn

13.2. Trình chỉnh sửa Form

13.2.1. Trình chỉnh sửa nội dung

• Nhấp chuột vào tiện ích Form và chọn Content trên thanh thiết lập nhanh để mở trình chỉnh sửa nội dung Form

• Main (Các trường thông tin): chỉnh sửa các trường thông tin để thu thập dữ liệu

• Add field: Thêm các trường vào Form

• Form Title: Tên của Form

• Submit Title: Tên nút gửi

13.2.2. Trình chỉnh sửa thiết kế

• Nhấp chuột vào tiện ích Form và chọn Design trên thanh thiết lập nhanh để mở trình chỉnh sửa thiết kế Form.

• Align: giúp bạn căn chỉnh Form theo khung chứa. Xem thêm thông tin, xem Align.

• Sizes: trong trình chỉnh sửa thiết kế giúp bạn điều chỉnh kích thước và vị trí của các phần tử trên trang landing page. Xem thêm thông tin, xem Sizes.

• Display on: cho phép bạn kiểm soát việc hiển thị Form trên các thiết bị khác nhau bao gồm Desktop và Mobile

• Styles: cho phép bạn thay đổi màu nền và hiệu ứng đổ bóng của Form đã chọn. Xem thêm thông tin, xem Styles.

• Border: cho phép bạn thêm và tùy chỉnh viền xung quanh của Form, bạn cũng có thể điều chỉnh độ bo tròn của viền. Xem thêm thông tin, xem Border.

• General Form: Căn chỉnh biểu mẫu, Màu sắc background, cách hiển thị văn bản của Form trên landing page

+ Space between label & fields: Điều chỉnh khoảng cách giữa các nhãn (label) và các trường nhập liệu (fields).

+ Spacing: Điều chỉnh khoảng cách tổng thể giữa các phần tử trong biểu mẫu.

+ Vertical space: Điều chỉnh khoảng cách dọc giữa các trường hoặc các dòng trong biểu mẫu.

+ Horizontal space: Điều chỉnh khoảng cách ngang giữa các phần tử trong biểu mẫu.

+ Form alignment: Căn chỉnh toàn bộ biểu mẫu trên trang.

+ Fields styles: Tùy chỉnh nền và viền của các trường nhập liệu.

Background: Đặt màu nền cho các trường nhập liệu.

Border: Tùy chỉnh viền của các trường nhập liệu.

+ Fields text: Điều chỉnh các thiết lập văn bản bên trong các trường nhập liệu.

Label: Tùy chỉnh văn bản nhãn (label) của biểu mẫu.

Input: Tùy chỉnh văn bản nhập vào các trường (Input text).

Placeholder: Tùy chỉnh văn bản gợi ý (Placeholder text) trong các trường nhập liệu.

+ Fields input:

MARGIN: Điều chỉnh khoảng cách bên ngoài của các tường nhập liệu so với các phần tử khác trong biểu mẫu

PADDING: điều chỉnh khoảng cách bên trong các trường nhập liệu, tức là khoảng cách từ biên của trường đến nội dung văn bản bên trong

• Title Form: tùy chỉnh cách hiển thị văn bản của Form trên landing page

+ Spacing:

MARGIN: Điều chỉnh khoảng cách bên ngoài của tiêu đề so với các phần tử xung quanh

PADDING: Điều chỉnh khoảng cách bên trong tiêu đề, tức là khoảng cách từ biên của vùng chứa tiêu đề đến nội dung văn bản bên trong.

+ Điều chỉnh các cài đặt text: Font family, Text align, Font style, Text decoration,...

• Button Submit: tùy chỉnh giao diện nút gửi

+ Spacing:

MARGIN: Điều chỉnh khoảng cách bên ngoài của nút gửi so với các phần tử xung quanh

PADDING: Điều chỉnh khoảng cách bên trong nút gửi, tức là khoảng cách từ biên của nút đến nội dung văn bản bên trong.

+ Space between fields & button: Điều chỉnh khoảng cách giữa các trường dữ liệu và nút gửi trong biểu mẫu.

+ Button Alignment: Căn chỉnh nút gửi trong vùng chứa của nó.

Width: Điều chỉnh chiều rộng của nút gửi.

Height: Điều chỉnh chiều cao của nút gửi.

Điều chỉnh các cài đặt button và text: Fill, Font family, Text align…