Hướng dẫn sử dụng chức năng Form trong Tapato

Video:

30/07/2026 6 phút đọc

Xin chào các bạn!

Chào mừng các bạn quay trở lại với hệ thống Tapato.

Trong video hôm nay, chúng ta sẽ cùng tìm hiểu chức năng Form – công cụ giúp tạo các biểu mẫu để thu thập thông tin người dùng một cách nhanh chóng và linh hoạt trên hệ thống Tapato.

Quản lý Form

Đây là giao diện quản lý Form của hệ thống Tapato.

Tại đây, người dùng có thể tạo mới, quản lý và chỉnh sửa các biểu mẫu thu thập thông tin từ khách truy cập như:

Biểu mẫu liên hệ
Đăng ký thông tin
Đăng ký tư vấn
Thu thập email
Thu thập số điện thoại
Và nhiều loại biểu mẫu khác.

Sau khi tạo Form mới, chúng ta sẽ tiến hành thiết lập các trường dữ liệu cho biểu mẫu.

Thiết lập trường dữ liệu

Mỗi trường dữ liệu đều có thể thiết lập các thông tin như:

Tên trường
Kiểu dữ liệu
Giá trị
Bắt buộc nhập hay không
Placeholder
Độ rộng hiển thị
Class CSS
Trạng thái hiển thị

Sau khi hoàn tất cấu hình, nhấn Lưu lại để lưu Form hoặc chọn Preview để xem trước giao diện.

Bây giờ chúng ta sẽ lần lượt tìm hiểu các kiểu dữ liệu được hỗ trợ trong Form.

TextBox

Đầu tiên là TextBox.

Đây là kiểu trường dữ liệu cơ bản nhất, thường dùng để nhập:

Họ và tên
Email
Số điện thoại
Địa chỉ
Hoặc các thông tin dạng văn bản ngắn.

Tại mục Yêu cầu nhập, chọn Có nếu muốn bắt buộc người dùng phải nhập dữ liệu trước khi gửi Form. Nếu trường không bắt buộc, chỉ cần chọn Không.

Phần Placeholder sẽ hiển thị nội dung gợi ý bên trong ô nhập liệu, giúp người dùng biết cần nhập thông tin gì.

SelectBox

Tiếp theo là SelectBox.

Kiểu dữ liệu này cho phép người dùng chọn một giá trị từ danh sách có sẵn.

Ví dụ, với trường Tỉnh/Thành phố, chúng ta có thể nhập:

Hà Nội
Hồ Chí Minh
Đà Nẵng

Mỗi giá trị được nhập trên một dòng riêng.

Nếu muốn hiển thị một giá trị mặc định, chỉ cần đặt dòng đầu tiên trong dấu ngoặc nhọn {}. Giá trị này sẽ được hiển thị ngay khi Form được mở.

RadioBox

Tiếp theo là RadioBox.

RadioBox cho phép người dùng chỉ chọn một trong nhiều lựa chọn.

Kiểu dữ liệu này thường được sử dụng cho:

Giới tính
Phương thức thanh toán
Phương thức liên hệ
Hoặc các lựa chọn chỉ được phép chọn một đáp án.

Các giá trị cũng được nhập bằng cách xuống dòng, mỗi dòng tương ứng với một lựa chọn.

CheckBox

Tiếp theo là CheckBox.

Khác với RadioBox, CheckBox cho phép người dùng chọn nhiều đáp án cùng lúc.

CheckBox thường được sử dụng cho:

Sở thích
Lĩnh vực quan tâm
Các dịch vụ mong muốn
Hoặc những nội dung có thể chọn nhiều đáp án.

Lưu ý rằng mỗi CheckBox sẽ được tạo thành một trường dữ liệu riêng, vì vậy không thể nhập nhiều giá trị trong cùng một trường như SelectBox hoặc RadioBox.

Sau khi thêm vào Form, mặc định ô CheckBox và phần nhãn có thể hiển thị trên hai dòng riêng biệt.

Nếu muốn hiển thị trên cùng một hàng, chỉ cần thay đổi kiểu hiển thị sang inline hoặc inline-block tùy theo bố cục mong muốn.

Do CheckBox thường không có phần mô tả chi tiết nên người dùng đôi khi khó hiểu nội dung lựa chọn.

Trong trường hợp này, chúng ta có thể thêm một trường HTML để hiển thị hướng dẫn hoặc mô tả bổ sung, giúp giao diện trực quan và dễ sử dụng hơn.

Textarea

Tiếp theo là Textarea.

Textarea cho phép người dùng nhập nội dung nhiều dòng.

Kiểu dữ liệu này thường được sử dụng cho:

Lời nhắn
Ghi chú
Nội dung phản hồi
Mô tả chi tiết

Date

Tiếp theo là Date.

Kiểu dữ liệu này cho phép người dùng chọn ngày, tháng và năm thông qua bộ chọn ngày được tích hợp sẵn.

Việc sử dụng Date giúp nhập dữ liệu nhanh hơn và hạn chế sai sót khi nhập ngày tháng.

Để xem trước trường Date hoạt động chính xác, trước tiên hãy thoát khỏi giao diện thiết lập Form.

Sau đó quay lại danh sách Form và chọn Xem Form để kiểm tra giao diện thực tế.

Email

Tiếp theo là kiểu dữ liệu Email.

Hệ thống sẽ tự động kiểm tra định dạng email mà người dùng nhập.

Nếu email không đúng định dạng, Form sẽ không được gửi cho đến khi người dùng nhập một địa chỉ hợp lệ.

Đối với các trường được thiết lập là bắt buộc, hệ thống sẽ tự động hiển thị dấu sao (*) bên cạnh tên trường để người dùng dễ dàng nhận biết.

HTML

Tiếp theo là kiểu dữ liệu HTML.

Kiểu dữ liệu này cho phép chèn trực tiếp nội dung HTML vào Form.

HTML thường được sử dụng để:

Hiển thị hướng dẫn
Thêm tiêu đề
Chèn mô tả
Hiển thị lưu ý
Hoặc bổ sung nội dung giúp người dùng dễ dàng thao tác với biểu mẫu.

Number

Cuối cùng là kiểu dữ liệu Number.

Kiểu dữ liệu này chỉ cho phép nhập các giá trị dạng số.

Thường được sử dụng cho:

Tuổi
Số lượng
Mã số
Hoặc các trường chỉ chứa ký tự số.

Các thiết lập bổ sung

Đối với những trường được thiết lập Yêu cầu nhập = Có, hệ thống sẽ tự động hiển thị dấu sao (*) bên cạnh tên trường để thông báo đây là trường bắt buộc.

Người dùng cần nhập đầy đủ các trường này trước khi có thể gửi biểu mẫu thành công.

Ngoài ra, chúng ta cũng có thể:

Thiết lập độ rộng hiển thị của từng trường.
Gán Class CSS để tùy chỉnh giao diện.
Bật hoặc tắt chức năng tải tệp lên.
Lựa chọn vị trí hiển thị nhãn ở phía trên hoặc bên trái.
Tùy chỉnh nội dung của nút gửi.
Thiết lập thông báo hiển thị sau khi gửi Form thành công.

Đối với các kiểu dữ liệu như SelectBox, RadioBox hoặc HTML, chúng ta cần nhập nội dung tại mục Giá trị để thiết lập dữ liệu hiển thị.

Riêng các kiểu dữ liệu còn lại sẽ tự động hoạt động theo đúng chức năng của từng trường và không cần nhập dữ liệu tại mục này.

Một lưu ý quan trọng là đối với các trường hiển thị dưới dạng lựa chọn như SelectBox, RadioBox hoặc CheckBox, mỗi giá trị chỉ cần nhập trên một dòng riêng để hệ thống tự động tạo thành các tùy chọn tương ứng.

Sử dụng Form bằng Module

Sau khi hoàn tất việc thiết lập Form, chúng ta có thể sử dụng biểu mẫu thông qua Module Form đã được tích hợp sẵn trong hệ thống.

Chỉ cần kéo Module Form vào vị trí mong muốn trên giao diện, sau đó lựa chọn biểu mẫu cần hiển thị là có thể sử dụng ngay một cách nhanh chóng.

Nhúng Form bằng Module HTML

Ngoài Module Form, hệ thống còn hỗ trợ nhúng biểu mẫu thông qua mã nhúng.

Đầu tiên, kéo Module HTML vào vị trí mong muốn.

Tiếp theo, sao chép mã nhúng của Form và dán vào nội dung của Module HTML.

Sau khi lưu lại, biểu mẫu sẽ được hiển thị ngay tại vị trí vừa chèn.

Cách này rất phù hợp khi cần đặt Form ở bất kỳ khu vực nào trên website.

Nhúng Form vào nội dung bài viết

Ngoài việc sử dụng ở Module Form, người dùng cũng có thể chèn Form trực tiếp vào nội dung của trang chi tiết tin bài.

Chỉ cần sao chép mã nhúng của Form.

Sau đó sửa nội dung bài viết trong admin, nhấp con trỏ chuột vào vị trí cần form hiển thị, dán đoạn mã vào vị trí mong muốn và lưu lại.

Khi truy cập trang chi tiết, biểu mẫu sẽ hiển thị đúng tại vị trí đã chèn.

Kết thúc

Như vậy, chúng ta đã cùng tìm hiểu toàn bộ quy trình tạo và sử dụng Form trong hệ thống Tapato, từ việc tạo biểu mẫu, thiết lập các trường dữ liệu, cấu hình các tùy chọn, cho đến cách hiển thị và nhúng Form vào website.

Hy vọng video này sẽ giúp các bạn dễ dàng xây dựng những biểu mẫu thu thập thông tin chuyên nghiệp và linh hoạt, phục vụ hiệu quả cho quá trình vận hành website trên nền tảng Tapato.

Cảm ơn các bạn đã dành thời gian theo dõi.

Tag: chức năng form form