Biểu mẫu (form)
Thiết kế form ngắn, dễ điền trên điện thoại, báo lỗi rõ, có thông báo và đồng ý xử lý dữ liệu cá nhân đúng quy định.
- Chọn số trường tối thiểu theo mục tiêu của trang.
- Thiết kế từng trường: nhãn, loại ô, autocomplete, thông báo lỗi.
- Viết thông báo mục đích và ô đồng ý xử lý dữ liệu cá nhân.
Form là điểm khách “trả giá” bằng thông tin và thời gian. Mỗi trường thêm vào là thêm một lý do để do dự. Nguyên tắc: chỉ hỏi những gì cần cho bước tiếp theo, hỏi theo cách dễ trả lời nhất, và nói rõ bạn sẽ làm gì với thông tin đó.
Bắt đầu từ số trường tối thiểu
| Mục tiêu | Trường cần ngay | Có thể hỏi sau |
|---|---|---|
| Báo giá nhãn mác | Tên, Zalo/SĐT, loại nhãn, số lượng dự kiến | Mã số thuế, địa chỉ giao, file chi tiết |
| Đặt bàn quán cà phê | Tên, SĐT, ngày giờ, số người | Ghi chú đặc biệt (không bắt buộc) |
| Đăng ký học thử | Tên, SĐT hoặc email, khung giờ mong muốn | Trình độ hiện tại, mục tiêu học |
| Tải tài liệu | Ngành nghề, quy mô (nếu thật sự cần) |
Thiết kế từng trường
- Nhãn (label) luôn hiển thị phía trên ô, không dùng placeholder thay nhãn — placeholder biến mất khi gõ và thường có tương phản thấp.
- Dùng đúng type: tel cho số điện thoại (hiện bàn phím số), email cho email, date cho ngày.
- Thêm autocomplete (name, tel, email) để trình duyệt gợi ý điền nhanh.
- Một cột trên điện thoại; trường liên quan (ngày + giờ) có thể đứng cạnh nhau trên máy tính.
- Ghi rõ trường nào bắt buộc bằng chữ, hoặc ghi “(không bắt buộc)” cho trường tùy chọn.
- Báo lỗi ngay cạnh trường, bằng lời cụ thể: “Số điện thoại cần 10 chữ số” thay vì “Dữ liệu không hợp lệ”.
- Nút gửi nói kết quả: “Gửi yêu cầu báo giá”, “Giữ bàn”, không chỉ “Gửi”.
Form dễ gửi
- 4 trường, nhãn rõ, bàn phím số cho SĐT.
- Dòng ngắn dưới nút: “Chúng tôi chỉ dùng thông tin để liên hệ báo giá, phản hồi trong giờ làm việc.”
- Gửi xong chuyển sang trang cảm ơn nói rõ bước tiếp theo.
Form làm khách bỏ cuộc
- 10 trường, bắt buộc cả ngày sinh và địa chỉ nhà.
- Chỉ có placeholder, gõ xong không nhớ ô đó hỏi gì.
- Ô “Đồng ý nhận khuyến mãi” được tick sẵn.
- Bấm gửi, form bị xóa sạch vì một lỗi nhỏ.
Thông báo và đồng ý xử lý dữ liệu cá nhân
Họ tên, số điện thoại, email là dữ liệu cá nhân. Theo Luật Bảo vệ dữ liệu cá nhân (số 91/2025/QH15, hiệu lực từ 01/01/2026) và các văn bản hướng dẫn, khi thu thập bạn cần thông báo rõ mục đích, chỉ thu thập ở mức cần thiết, có sự đồng ý của người dùng và bảo vệ dữ liệu. Cách làm tối thiểu trên form: một câu nêu mục đích, liên kết tới trang quyền riêng tư, ô đồng ý không tick sẵn cho các mục đích ngoài việc trả lời yêu cầu (ví dụ nhận tin khuyến mãi). Văn bản pháp luật có thể thay đổi — hãy tra văn bản hiện hành và hỏi chuyên gia pháp lý nếu bạn xử lý dữ liệu quy mô lớn hoặc dữ liệu nhạy cảm.
Bài tập thực hành
Thiết kế form cho trang của bạn: liệt kê trường cần ngay và trường hỏi sau, ghi type và autocomplete cho từng trường, viết nhãn nút gửi, câu thông báo mục đích và nội dung trang cảm ơn.
Gợi ý: Với mỗi trường, hỏi: “Nếu không có thông tin này, mình có liên hệ hoặc báo giá được không?” Nếu vẫn làm được, chuyển trường đó sang bước sau.
- Không quá 4–5 trường cho bước đầu tiên.
- Mỗi trường có nhãn hiển thị, đúng type và autocomplete.
- Thông báo lỗi viết bằng lời cụ thể.
- Có câu nêu mục đích sử dụng dữ liệu và liên kết trang quyền riêng tư.
- Không có ô đồng ý nào được tick sẵn.
Kiểm tra kiến thức
- Placeholder làm trang nặng
- Placeholder không hiển thị trên iPhone
- Placeholder biến mất khi gõ và thường có tương phản thấp, khách dễ quên ô đang hỏi gì
- Không có lý do
Xem đáp án
C. Placeholder biến mất khi gõ và thường có tương phản thấp, khách dễ quên ô đang hỏi gì — Nhãn cần hiển thị suốt quá trình điền và khi kiểm tra lại. Placeholder chỉ nên là ví dụ định dạng bổ sung.
- Tick sẵn để tăng số người đăng ký
- Ẩn đi
- Bắt buộc tick mới gửi được form báo giá
- Không tick sẵn, tách riêng khỏi việc gửi yêu cầu
Xem đáp án
D. Không tick sẵn, tách riêng khỏi việc gửi yêu cầu — Đồng ý phải là lựa chọn chủ động của người dùng. Tick sẵn hoặc gộp bắt buộc là cách làm thiếu minh bạch.
- text
- tel
- number
- password
Xem đáp án
B. tel — type="tel" hiện bàn phím số điện thoại trên di động và không áp các quy tắc của số học như type="number" (ví dụ bỏ số 0 đầu khi xử lý).