5 tình huống kiểm tra thông báo lỗi biểu mẫu liên hệ trước khi chạy quảng cáo

Lỗi ở biểu mẫu liên hệ có thể cản trở người đọc gửi yêu cầu sau khi xem quảng cáo. Tài liệu kỹ thuật W3C WAI (Web Accessibility Initiative) chỉ rõ: thông báo biểu mẫu cần ngắn gọn, rõ ràng, nêu đúng lỗi và cách xử lý. Dưới đây là 5 tình huống tự thử nghiệm trước khi chạy quảng cáo. Hướng dẫn cung cấp phương pháp tự rà soát, không tuyên bố đã kiểm thử website thực tế nào.

1. Bỏ trống trường bắt buộc

Người dùng hay bấm gửi khi chưa điền dữ liệu. Hệ thống cần chỉ rõ từng vị trí thiếu thay vì báo chung chung.

  • Bước kiểm tra: Mở trang liên hệ. Để trống toàn bộ ô Họ tên, Số điện thoại, Email. Nhấp nút gửi.
  • Tiêu chuẩn đạt: Thông báo lỗi hiện rõ ở đầu biểu mẫu hoặc ngay dưới từng ô nhập liệu trống. Nên đưa tiêu điểm tới trường lỗi đầu tiên hoặc cung cấp liên kết từ danh sách lỗi tới trường đó. Lời nhắc nêu rõ hành động, ví dụ: "Vui lòng nhập số điện thoại".

Minh họa gắn nhãn và cấu trúc trường nhập liệu biểu mẫu theo W3C

2. Sai định dạng thông tin

Khách hay gõ thiếu ký tự @ trong email hoặc điền chữ vào ô số điện thoại. Biểu mẫu cần hướng dẫn cách sửa đúng.

  • Bước kiểm tra: Nhập giá trị không đáp ứng quy tắc Số điện thoại đã công bố trên biểu mẫu. Gõ email thiếu đuôi tên miền (như ten@). Bấm nút gửi.
  • Tiêu chuẩn đạt: Lỗi hiển thị ngay tại ô sai (in-line feedback). Câu thông báo chỉ rõ quy tắc hợp lệ, ví dụ: "Vui lòng nhập số điện thoại theo định dạng đã hướng dẫn" hoặc "Email phải theo định dạng ten@domain.com". Không mặc định cấm dấu cộng hay khoảng trắng nếu nghiệp vụ chấp nhận chúng. Tránh câu cụt vô nghĩa như "Sai dữ liệu".

3. Sửa rồi gửi lại

Hệ thống tự xóa sạch dữ liệu sau lỗi khiến khách bực bội, bỏ trang.

  • Bước kiểm tra: Nhập sai định dạng email, điền đúng Họ tên và Nội dung. Bấm gửi. Khi thấy báo lỗi, sửa lại email đúng định dạng rồi bấm gửi lần hai.
  • Tiêu chuẩn đạt: Giữ nguyên toàn bộ nội dung các trường đã nhập đúng, không bắt gõ lại từ đầu. Thông báo lỗi biến mất ngay sau khi dữ liệu hợp lệ được gửi đi.

Ví dụ thông báo phản hồi trạng thái biểu mẫu theo W3C

4. Phản hồi thành công

Khách cần biết chắc hệ thống đã nhận thông tin, tránh bấm nút liên tiếp gây trùng lặp.

  • Bước kiểm tra: Điền đủ và đúng tất cả ô dữ liệu. Bấm nút gửi. Quan sát màn hình phản hồi.
  • Tiêu chuẩn đạt: Xuất hiện thông điệp xác nhận rõ ràng qua tiêu đề chính (<h1>, <h2>) hoặc thẻ tiêu đề trang (<title>), ví dụ: "Cảm ơn bạn đã gửi liên hệ. Chúng tôi đã nhận được thông tin". Có thể tạm khóa nút gửi lúc đang xử lý, đồng thời phải cho phép thử lại nếu gửi thất bại.

5. Thao tác hoàn toàn bằng bàn phím

Người dùng máy tính hay dùng phím chuyển ô để nhập nhanh. Biểu mẫu phải hoạt động tốt không cần chuột.

  • Bước kiểm tra: Bỏ chuột. Dùng phím Tab di chuyển tiến qua các ô. Dùng Shift + Tab lùi lại. Gõ dữ liệu, bấm Enter hoặc Space tại nút gửi.
  • Tiêu chuẩn đạt: Viền báo vị trí con trỏ (focus indicator) hiện rõ trên từng ô. Phím Tab đi theo thứ tự đọc và thao tác hợp lý, không bỏ qua trường cần thiết hoặc giữ người dùng trong một vùng mà không thoát được.

Doanh nghiệp cần chuẩn hóa tính năng tiếp nhận thông tin hoặc rà soát tiêu chí kỹ thuật website trước khi bàn giao? Mời liên hệ trao đổi chi tiết để thống nhất bảng yêu cầu nghiệm thu.


Nguồn tham khảo và ghi nhận bản quyền

Nội dung dựa trên tài liệu kỹ thuật: W3C WAI Tutorials – Forms: User Notifications (https://www.w3.org/WAI/tutorials/forms/notifications/).

Hình ảnh minh họa lấy từ ví dụ kỹ thuật W3C. Tổ chức W3C không bảo trợ, chứng nhận hoặc liên kết với FarmWeb.