Hướng dẫn sử dụng Widget – Form

Nguyen Khac Tai Nguyen Khac Tai
10/09/2025
127 lượt xem
5/5 - (1 đánh giá)
Chia sẻ qua

Cách sử dụng tiện ích biểu mẫu

1. Các tiện ích Widgets trong Elementor

Widgets hay các tiện ích trong ngữ cảnh của Elementor (và rộng hơn là WordPress) là các khối nội dung có thể tái sử dụng, được thiết kế để thực hiện một chức năng hoặc hiển thị một loại thông tin cụ thể.

Khi bạn nhấp vào một widget trong khu vực chỉnh sửa chính, các tùy chọn chỉnh sửa cho widget đó sẽ xuất hiện trong Bảng điều khiển (Panel) bên trái. Mỗi widget thường có 3 tab chính:

  • Content (Nội dung): Tùy chỉnh nội dung của widget (ví dụ: văn bản của tiêu đề, nguồn ảnh, URL nút bấm, v.v.).
  • Style (Kiểu hiển thị): Tùy chỉnh giao diện (ví dụ: màu sắc, phông chữ, kích thước, căn chỉnh, border, shadow, v.v.).
  • Advanced (Nâng cao): Các tùy chọn nâng cao như:
    • Margin & Padding: Khoảng cách bên ngoài và bên trong phần tử.
    • Z-index: Thứ tự hiển thị của các lớp phần tử.
    • CSS ID & CSS Classes: Dùng để tùy chỉnh CSS bổ sung.
    • Motion Effects (Hiệu ứng chuyển động): Ví dụ: hiệu ứng cuộn (scroll effects), hiệu ứng vào (entrance animation).
    • Background: Màu nền, hình ảnh nền, gradient.
    • Border: Đường viền.
    • Positioning: Vị trí của phần tử (mặc định, tương đối, tuyệt đối, cố định).
    • Responsive: Ẩn/hiện phần tử trên các thiết bị khác nhau.
    • Custom CSS (Elementor Pro): Viết CSS tùy chỉnh.

2. Cách sử dụng tiện ích biểu mẫu

Tiện ích Biểu mẫu (Form) trong Elementor (thường là một phần của Elementor Pro) là một công cụ cực kỳ mạnh mẽ để tạo các biểu mẫu liên hệ, đăng ký, khảo sát hoặc bất kỳ loại biểu mẫu thu thập thông tin nào trên trang web của bạn. Nó cung cấp các trường biểu mẫu đa dạng, tùy chọn hành động sau khi gửi, và khả năng tùy chỉnh giao diện toàn diện.

3. Các bước sử dụng tiện ích biểu mẫu

I. Nội dung (Content)

Đây là nơi bạn thiết lập các trường biểu mẫu, nút gửi và các hành động sau khi gửi.

A. Form Fields (Các trường biểu mẫu)

Image7

  • Bạn sẽ thấy một danh sách các trường biểu mẫu hiện có (ví dụ: Tên, Email, Thông điệp).
  • Thêm mục (Add Item): Nhấp vào nút này để thêm một trường mới vào biểu mẫu của bạn.
  • Chỉnh sửa Trường: Nhấp vào từng trường để mở các tùy chọn chỉnh sửa riêng cho trường đó:
    • Loại (Type): Chọn loại trường (ví dụ: Text, Email, URL, Tel, Textarea, Radio, Checkbox, Select, Date, Time, File Upload, Password, Hidden, HTML).
    • Nhãn (Label): Nhập nhãn hiển thị cho trường.
    • Trình giữ chỗ (Placeholder): Nhập văn bản gợi ý xuất hiện trong trường trước khi người dùng nhập liệu.
    • Bắt buộc (Required): Gạt nút sang phải để biến trường này thành bắt buộc.
    • ID trường (Field ID): Một ID duy nhất cho trường (thường được tạo tự động, hữu ích cho CSS hoặc code tùy chỉnh).
    • Tên ngắn (Shortcode): Mã ngắn bạn có thể sử dụng để chèn giá trị trường vào email hoặc thông báo.
    • Giá trị mặc định (Default Value): Một giá trị đã được điền sẵn khi biểu mẫu tải.
    • Kích thước cột (Column Width): Đặt chiều rộng của trường trong bố cục (ví dụ: 50% để có hai trường trên một hàng).
  • Kích thước đầu vào (Input Size): Điều chỉnh chiều cao của các trường nhập liệu (ví dụ: Nhỏ, Mặc định, Lớn).
  • Nhãn (Label): Bật/tắt hiển thị nhãn của các trường biểu mẫu.
  • Required Mark (Dấu bắt buộc): Bật/tắt hiển thị dấu hoa thị (*) bên cạnh các trường bắt buộc.

B. Buttons (Các nút)

Image2

  • Kích thước (Size): Điều chỉnh kích thước của nút gửi.
  • Căn chỉnh (Alignment): Căn chỉnh nút gửi (Trái, Giữa, Phải, Justified).
  • Văn bản (Text): Nhập văn bản hiển thị trên nút gửi (ví dụ: “GỬI”).
  • Biểu tượng (Icon): Thêm một biểu tượng vào nút gửi.
    • Vị trí biểu tượng (Icon Position): Vị trí của biểu tượng (Trước văn bản, Sau văn bản).
    • Khoảng cách biểu tượng (Icon Spacing): Khoảng cách giữa biểu tượng và văn bản.

C. Actions After Submit (Hành động sau khi gửi)

Image11

  • Đây là phần quan trọng nhất để xác định điều gì sẽ xảy ra sau khi người dùng gửi biểu mẫu thành công.
  • Nhấp vào “Thêm hành động” và chọn từ các tùy chọn như:
    • Email: Gửi nội dung biểu mẫu đến một địa chỉ email.
    • Email 2: Gửi bản sao đến một địa chỉ email khác.
    • Redirect (Chuyển hướng): Chuyển hướng người dùng đến một URL cụ thể (ví dụ: trang “Cảm ơn”).
    • Webhook: Gửi dữ liệu biểu mẫu đến một URL tùy chỉnh (hữu ích cho việc tích hợp với các dịch vụ bên ngoài).
    • Collect Submissions (Thu thập lượt gửi): Lưu trữ dữ liệu biểu mẫu trong Elementor (hiển thị trong phần “Elementor > Submissions”).
    • Mailchimp, ConvertKit, Drip, Zapier, v.v.: Tích hợp trực tiếp với các dịch vụ marketing email hoặc CRM phổ biến.

D. Collect Submissions (Thu thập lượt gửi)

Image10

  • Nếu bạn đã chọn hành động “Collect Submissions”, các tùy chọn cho việc lưu trữ dữ liệu sẽ xuất hiện tại đây.

E. Email (Email)

Image6

  • Nếu bạn đã chọn hành động “Email”, các tùy chọn cấu hình email sẽ xuất hiện tại đây:
    • Gửi đến (To): Địa chỉ email nhận dữ liệu biểu mẫu.
    • Chủ đề (Subject): Chủ đề của email.
    • Nội dung tin nhắn (Message): Nội dung của email. Bạn có thể sử dụng shortcode của các trường để chèn dữ liệu.
    • Từ Email (From Email): Địa chỉ email gửi.
    • Từ Tên (From Name): Tên người gửi hiển thị.
    • Email trả lời (Reply To): Đặt địa chỉ email trả lời.
    • CC/BCC: Thêm địa chỉ CC/BCC.
    • Meta Data (Dữ liệu meta): Bao gồm dữ liệu bổ sung như Thời gian, URL trang, IP người dùng, Trình duyệt.

F. Steps Settings (Cài đặt các bước)

Image14

  • (Chỉ xuất hiện nếu bạn đang tạo biểu mẫu nhiều bước).

G. Tùy chọn bổ sung (Additional Options)

Image8

  • Custom Messages (Thông báo tùy chỉnh): Cho phép bạn thay đổi các thông báo mặc định (ví dụ: Thông báo thành công, Thông báo lỗi).
  • Custom ID (ID tùy chỉnh): Đặt một ID tùy chỉnh cho biểu mẫu.

II. Kiểu hiển thị (Style)

Đây là nơi bạn tùy chỉnh giao diện của biểu mẫu.

A. Form (Biểu mẫu)

Image5

  • Columns Gap (Khoảng cách cột): Khoảng cách giữa các cột trường biểu mẫu.
  • Rows Gap (Khoảng cách hàng): Khoảng cách giữa các hàng trường biểu mẫu.
  • Label (Nhãn):
    • Color (Màu sắc): Màu chữ cho nhãn trường.
    • Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho nhãn.
  • Field (Trường):
    • Text Color (Màu văn bản): Màu chữ nhập liệu.
    • Background Color (Màu nền): Màu nền của các trường nhập liệu.
    • Border Color (Màu đường viền): Màu đường viền của trường.
    • Border Width (Độ dày đường viền): Độ dày của đường viền.
    • Border Radius (Bán kính bo tròn): Bo tròn góc của trường.
    • Padding (Khoảng đệm): Khoảng đệm bên trong trường.

B. Button (Nút)

Image15

  • Text Color (Màu văn bản): Màu chữ của nút gửi.
  • Background Color (Màu nền): Màu nền của nút gửi.
  • Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho nút.
  • Border Type (Loại đường viền): Thêm đường viền cho nút.
  • Border Width (Độ dày đường viền): Độ dày của đường viền nút.
  • Border Radius (Bán kính bo tròn): Bo tròn góc của nút.
  • Padding (Khoảng đệm): Khoảng đệm bên trong nút.

C. Messages (Thông báo)

Image12

  • Success Message Color (Màu thông báo thành công): Màu chữ cho thông báo thành công.
  • Error Message Color (Màu thông báo lỗi): Màu chữ cho thông báo lỗi.
  • Validation Message Color (Màu thông báo xác thực): Màu chữ cho thông báo xác thực (ví dụ: trường bắt buộc bị bỏ trống).
  • Typography (Phông chữ): Tùy chỉnh phông chữ cho các thông báo.

III. Nâng cao (Advanced)

Tab này cung cấp các tùy chọn nâng cao hơn để kiểm soát bố cục, hiệu ứng và khả năng đáp ứng của toàn bộ tiện ích Biểu mẫu.

Image3

  1. Bố cục (Layout):
  • Margin (Lề): Khoảng cách bên ngoài tiện ích Biểu mẫu với các phần tử khác xung quanh.
  • Padding (Khoảng đệm): Khoảng cách bên trong tiện ích.
  • Width (Chiều rộng): Đặt chiều rộng của toàn bộ tiện ích Biểu mẫu.
  • Position (Vị trí): Mặc định, Relative, Absolute, Fixed (các tùy chọn định vị nâng cao).
  • Z-index: Xác định thứ tự xếp lớp của tiện ích nếu nó chồng lên các phần tử khác.
  1. CSS ID & CSS Classes:
  • Cho phép bạn thêm ID hoặc class CSS tùy chỉnh để tác động đến tiện ích bằng mã CSS riêng.
  1. Hiệu ứng chuyển động (Motion Effects):
  • Entrance Animation (Hoạt ảnh khi vào): Chọn hiệu ứng xuất hiện cho toàn bộ tiện ích Biểu mẫu khi trang được tải.
  • Hover Animation (Hoạt ảnh di chuột qua): Hiệu ứng chuyển động cho toàn bộ tiện ích khi di chuột qua.
  • Scrolling Effects (Hiệu ứng cuộn): Tạo các hiệu ứng khi người dùng cuộn trang.
  • Mouse Effects (Hiệu ứng chuột): Tạo các hiệu ứng khi di chuột qua tiện ích.
  1. Nền (Background):
  • Bạn có thể thêm màu nền, hình nền hoặc gradient cho toàn bộ vùng chứa tiện ích Biểu mẫu.
  1. Đường viền (Border):
  • Tùy chỉnh kiểu đường viền, độ dày, màu sắc và bán kính bo tròn cho toàn bộ vùng chứa tiện ích.
  1. Mặt nạ (Mask):
  • Áp dụng một hình dạng mặt nạ để tạo hiệu ứng đặc biệt cho tiện ích.
  1. Khả năng đáp ứng (Responsive):
  • Ẩn trên máy tính để bàn (Hide On Desktop), Ẩn trên máy tính bảng (Hide On Tablet), Ẩn trên thiết bị di động (Hide On Mobile): Cho phép bạn ẩn tiện ích Biểu mẫu trên các loại thiết bị khác nhau nếu cần.
  1. Thuộc tính (Attributes):
  • Cho phép bạn thêm các thuộc tính HTML tùy chỉnh cho thẻ tiện ích.
  1. CSS tùy chỉnh (Custom CSS) (chỉ có trong Elementor Pro):
  • Cho phép bạn viết mã CSS trực tiếp để tùy chỉnh giao diện và hành vi của tiện ích một cách nâng cao.
5/5 - (1 đánh giá)
Bài viết liên quan

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Tin khuyến mãi
Khuyến mãi
 Tư vấn dịch vụ
Tư vấn
 Thông tin hỗ trợ
Gửi hỗ trợ
 Liên hệ Zalo
Zalo

Đăng ký tư vấn dịch vụ

Đăng ký dịch vụ - Digital Transformation #dangkyngay

Đăng ký tư vấn dịch vụ

Đăng ký tư vấn các dịch vụ Marketing #tuvandichvu

Đang tải...