Các phương pháp hay nhất về biểu mẫu thanh toán và địa chỉ

Tối đa hoá lượt chuyển đổi bằng cách giúp người dùng hoàn tất biểu mẫu địa chỉ và thanh toán một cách nhanh chóng và dễ dàng nhất có thể.

Sam Dutton

Biểu mẫu được thiết kế hợp lý sẽ giúp người dùng và tăng tỷ lệ chuyển đổi. Một điểm điều chỉnh nhỏ có thể tạo ra sự khác biệt lớn!

Sau đây là ví dụ về một biểu mẫu thanh toán đơn giản minh hoạ tất cả các phương pháp hay nhất:

Sau đây là ví dụ về một biểu mẫu địa chỉ đơn giản minh hoạ tất cả các phương pháp hay nhất:

Danh sách kiểm tra

Sử dụng HTML có ý nghĩa

Sử dụng các phần tử và thuộc tính được tạo cho công việc này:

  • <form>, <input>, <label> và <button>
  • type, autocomplete và inputmode

Các thuộc tính này cho phép chức năng trình duyệt tích hợp, cải thiện khả năng tiếp cận và thêm ý nghĩa vào mã đánh dấu của bạn.

Sử dụng các phần tử HTML đúng mục đích

Đặt biểu mẫu của bạn trong <form>

Bạn có thể không muốn bận tâm đến việc bao bọc các phần tử <input> trong <form> và chỉ xử lý việc gửi dữ liệu bằng JavaScript.

Đừng làm thế!

<form> HTML cho phép bạn truy cập vào một bộ tính năng mạnh mẽ được tích hợp sẵn trên tất cả các trình duyệt hiện đại và có thể giúp người dùng truy cập vào trang web của bạn bằng trình đọc màn hình và các thiết bị hỗ trợ khác. <form> cũng giúp bạn dễ dàng xây dựng chức năng cơ bản cho các trình duyệt cũ có khả năng hỗ trợ JavaScript hạn chế và cho phép gửi biểu mẫu ngay cả khi mã của bạn gặp trục trặc – và cho một số ít người dùng thực sự tắt JavaScript.

Nếu bạn có nhiều thành phần trang để người dùng nhập dữ liệu, hãy nhớ đặt từng thành phần vào phần tử <form> riêng. Ví dụ: nếu bạn có tính năng tìm kiếm và đăng ký trên cùng một trang, hãy đặt mỗi tính năng trong một <form> riêng.

Sử dụng <label> để gắn nhãn cho các phần tử

Để gắn nhãn cho <input>, <select> hoặc <textarea>, hãy sử dụng <label>.

Liên kết nhãn với một thành phần đầu vào bằng cách đặt thuộc tính for của nhãn có cùng giá trị với id của thành phần đầu vào.

<label for="address-line1">Address line 1</label>
<input id="address-line1" …>

Sử dụng một nhãn cho một đầu vào: đừng cố gắng gắn nhãn nhiều đầu vào chỉ bằng một nhãn. Cách này phù hợp nhất với trình duyệt và trình đọc màn hình. Thao tác nhấn hoặc nhấp vào một nhãn sẽ di chuyển tiêu điểm đến đầu vào mà nhãn đó được liên kết, đồng thời trình đọc màn hình sẽ thông báo văn bản nhãn khi nhãn hoặc đầu vào của nhãn nhận được tiêu điểm.

Tạo các nút hữu ích

Sử dụng <button> cho các nút! Bạn cũng có thể dùng <input type="submit">, nhưng đừng dùng div hoặc một số phần tử ngẫu nhiên khác đóng vai trò là nút. Các phần tử nút cung cấp hành vi có thể truy cập, chức năng gửi biểu mẫu tích hợp và có thể dễ dàng tạo kiểu.

Đặt cho mỗi nút gửi biểu mẫu một giá trị cho biết chức năng của nút đó. Đối với mỗi bước hướng đến quy trình thanh toán, hãy sử dụng lời kêu gọi hành động mang tính mô tả, cho thấy tiến trình và giúp người dùng biết rõ bước tiếp theo. Ví dụ: hãy gắn nhãn nút gửi trên biểu mẫu địa chỉ giao hàng là Tiến hành thanh toán thay vì Tiếp tục hoặc Lưu.

Cân nhắc việc tắt nút gửi sau khi người dùng nhấn hoặc nhấp vào nút đó, đặc biệt là khi người dùng đang thanh toán hoặc đặt hàng. Nhiều người dùng nhấp vào các nút nhiều lần, ngay cả khi các nút đó hoạt động bình thường. Điều này có thể gây ra lỗi trong quy trình thanh toán và làm tăng tải cho máy chủ.

Mặt khác, đừng tắt nút gửi khi đang chờ người dùng nhập dữ liệu đầy đủ và hợp lệ. Ví dụ: đừng chỉ để nút Lưu địa chỉ ở trạng thái tắt vì thiếu thông tin hoặc thông tin không hợp lệ. Điều đó không giúp ích cho người dùng – họ có thể tiếp tục nhấn hoặc nhấp vào nút và cho rằng nút đó bị hỏng. Thay vào đó, nếu người dùng cố gắng gửi biểu mẫu có dữ liệu không hợp lệ, hãy giải thích cho họ biết vấn đề và cách khắc phục. Điều này đặc biệt quan trọng trên thiết bị di động, nơi việc nhập dữ liệu khó khăn hơn và dữ liệu biểu mẫu bị thiếu hoặc không hợp lệ có thể không xuất hiện trên màn hình của người dùng vào thời điểm họ cố gắng gửi biểu mẫu.

Khai thác tối đa các thuộc tính HTML

Giúp người dùng dễ dàng nhập dữ liệu

Sử dụng thuộc tính type đầu vào thích hợp để cung cấp bàn phím phù hợp trên thiết bị di động và cho phép trình duyệt xác thực cơ bản tích hợp sẵn.

Ví dụ: sử dụng type="email" cho địa chỉ email và type="tel" cho số điện thoại.

Hai ảnh chụp màn hình của điện thoại Android, cho thấy một bàn phím phù hợp để nhập địa chỉ email (sử dụng type=email) và để nhập số điện thoại (với type=tel).
Bàn phím phù hợp với email và điện thoại.

Đối với ngày, hãy cố gắng tránh sử dụng các phần tử select tuỳ chỉnh. Chúng làm gián đoạn trải nghiệm tự động điền nếu không được triển khai đúng cách và không hoạt động trên các trình duyệt cũ. Đối với các con số như năm sinh, hãy cân nhắc sử dụng phần tử input thay vì select, vì việc nhập các chữ số theo cách thủ công có thể dễ dàng hơn và ít xảy ra lỗi hơn so với việc chọn trong một danh sách thả xuống dài, đặc biệt là trên thiết bị di động. Sử dụng inputmode="numeric" để đảm bảo bàn phím phù hợp trên thiết bị di động, đồng thời thêm thông tin xác thực và gợi ý định dạng bằng văn bản hoặc một phần giữ chỗ để đảm bảo người dùng nhập dữ liệu ở định dạng phù hợp.

Sử dụng tính năng tự động hoàn thành để cải thiện khả năng tiếp cận và giúp người dùng tránh phải nhập lại dữ liệu

Việc sử dụng các giá trị autocomplete phù hợp cho phép trình duyệt giúp người dùng bằng cách lưu trữ dữ liệu một cách an toàn và tự động điền các giá trị input, select và textarea. Điều này đặc biệt quan trọng trên thiết bị di động và có vai trò quan trọng trong việc tránh tỷ lệ bỏ ngang biểu mẫu cao. Tính năng tự động hoàn thành cũng mang lại nhiều lợi ích về khả năng hỗ trợ tiếp cận.

Nếu có giá trị tự động hoàn thành phù hợp cho một trường biểu mẫu, bạn nên sử dụng giá trị đó. Tài liệu web MDN có danh sách đầy đủ các giá trị và giải thích cách sử dụng các giá trị đó một cách chính xác.

Giá trị ổn định

Địa chỉ thanh toán

Theo mặc định, hãy đặt địa chỉ thanh toán giống với địa chỉ giao hàng. Giảm sự lộn xộn về hình ảnh bằng cách cung cấp một đường liên kết để chỉnh sửa địa chỉ thanh toán (hoặc sử dụng các phần tử summary và details) thay vì hiển thị địa chỉ thanh toán trong một biểu mẫu.