Hướng dẫn tạo menu thả xuống trong biểu mẫu WordPress

Menu thả xuống là công cụ đắc lực trong các biểu mẫu. Chọn quốc gia, chọn danh mục, xếp hạng ưu tiên—bất cứ khi nào người dùng cần chọn từ một danh sách được xác định trước, menu thả xuống đều đáp ứng được. Chúng tiết kiệm không gian, chuẩn hóa dữ liệu và hướng người dùng đến các tùy chọn hợp lệ. Dưới đây là cách tạo menu thả xuống hiệu quả trong các biểu mẫu WordPress của bạn.

Tại sao nên sử dụng menu thả xuống?

Ưu điểm so với trường văn bản

• Dữ liệu được chuẩn hóa: Không có lỗi chính tả hoặc biến thể nào
• Lựa chọn có hướng dẫn: Người dùng thấy các tùy chọn có sẵn
• Tiết kiệm không gian: Thu gọn cho đến khi được nhấp chuột
• Thân thiện với thiết bị di động: Trình chọn bản địa trên điện thoại
• Hoàn thành nhanh hơn: Nhấp chuột so với gõ phím

Ưu điểm so với nút chọn (Radio Button)

• Thích hợp hơn cho danh sách dài: Hơn 6 lựa chọn phù hợp với không gian nhỏ.
• Vẻ ngoài sạch sẽ hơn: Giảm bớt sự lộn xộn về mặt thị giác
• Có thể cuộn: Xử lý hàng tá tùy chọn

Khi nào nên sử dụng menu thả xuống?

• Từ 6 lựa chọn trở lên (ít hơn = xem xét sử dụng nút chọn)
• Các tùy chọn được xác định trước, đã biết
• Yêu cầu chọn một mục duy nhất
• Không gian bị hạn chế
• Chuẩn hóa dữ liệu rất quan trọng

Tạo một menu thả xuống cơ bản

Bước 1: Thêm trường thả xuống

1. Mở biểu mẫu của bạn trong A.F.B.
2. Tìm kiếm Thả xuống trong các loại trường
3. Kéo vào biểu mẫu của bạn

Bước 2: Cấu hình nhãn

Nhãn: "Bạn biết đến chúng tôi bằng cách nào?" Chỗ giữ chỗ: "Chọn một tùy chọn..." Bắt buộc: Có/Không

Bước 3: Thêm tùy chọn

Nhập mỗi lựa chọn trên một dòng mới:

Tìm kiếm trên Google Mạng xã hội Bạn bè hoặc đồng nghiệp Quảng cáo Blog hoặc bài viết Khác

Bước 4: Xem trước và kiểm tra

1. Lưu biểu mẫu
2. Xem trước trên giao diện người dùng
3. Nhấp vào menu thả xuống để xác nhận các tùy chọn.
4. Gửi bài kiểm tra

Tùy chọn cấu hình thả xuống

Cài đặt Cơ bản

• Nhãn: Câu hỏi hoặc gợi ý
• Trình giữ chỗ: Văn bản mặc định (ví dụ: “Chọn…”)
• Cần thiết: Phải chọn để gửi
• Văn bản trợ giúp: Hướng dẫn bổ sung

Cài đặt tùy chọn

• Danh sách tùy chọn: Các lựa chọn có sẵn
• Mặc định đã chọn: Tùy chọn được chọn trước
• tìm kiếm được: Nhập để lọc
• Chọn nhiều: Chọn nhiều

Thêm tùy chọn thả xuống

Danh sách đơn giản

Phương án 1 Phương án 2 Phương án 3 Phương án 4

Với các giá trị khác với nhãn

Hiển thị một thứ, lưu trữ một thứ khác:

Hiển thị: "Hoa Kỳ" Giá trị: "Mỹ" Hiển thị: "Vương quốc Anh" Giá trị: "Anh"

Các tùy chọn được nhóm lại (Optgroups)

--- Bắc Mỹ --- Hoa Kỳ Canada Mexico --- Châu Âu --- Vương quốc Anh Đức Pháp

Nhiều lựa chọn

Đối với danh sách dài, hãy cân nhắc:

• Thứ tự ABC
• Các tùy chọn phổ biến nhất được ưu tiên trước
• Đã bật chức năng tìm kiếm
• Phân nhóm logic

Văn bản giữ chỗ

Placeholder là gì?

Văn bản hiển thị trước khi người dùng chọn một tùy chọn:

[Chọn một tùy chọn... ▼] ← Văn bản giữ chỗ

Ví dụ về chỗ giữ chỗ tốt

"Chọn quốc gia của bạn..." "Chọn danh mục..." "Chọn khung giờ..." "-- Vui lòng chọn --" "Chọn một"

Các phương pháp thực hành tốt nhất cho trình giữ chỗ

• Giữ cho nó ngắn
• Hãy nói rõ đây là một lời nhắc nhở.
• Không sử dụng như một lựa chọn hợp lệ
• Hãy xem xét định dạng “– Chọn –”

Menu thả xuống có thể tìm kiếm

Tìm kiếm là gì?

Người dùng có thể nhập liệu để lọc các tùy chọn:

[Nhập để tìm kiếm... ▼] Người dùng nhập: "ger" Hiển thị: Đức, Algeria, Niger

Khi nào nên bật chức năng tìm kiếm?

• hơn 20 tùy chọn
• Danh sách quốc gia/tiểu bang
• Danh mục sản phẩm
• Danh sách dài

Cho phép tìm kiếm

1. Chọn trường thả xuống
2. Tìm tùy chọn “Có thể tìm kiếm”
3. Bật lên

UX có thể tìm kiếm

1. Người dùng nhấp vào menu thả xuống 2. Ô nhập văn bản hiện ra 3. Người dùng nhập một phần nội dung khớp 4. Bộ lọc tùy chọn hiển thị theo thời gian thực 5. Người dùng chọn từ danh sách đã lọc

Menu thả xuống chọn nhiều mục

Chọn một hay nhiều?

Chọn một tùy chọn: Người dùng chọn MỘT tùy chọn. Chọn nhiều tùy chọn: Người dùng chọn NHIỀU tùy chọn.

Khi nào nên sử dụng chế độ chọn nhiều?

• “Chọn tất cả các mục phù hợp”
• Nhiều sở thích/ưu tiên
• Chọn nhiều danh mục
• Khi các ô chọn chiếm quá nhiều không gian

Cho phép chọn nhiều mục

1. Chọn trường thả xuống
2. Tìm mục “Cho phép chọn nhiều mục”.
3. Bật lên

Giao diện lựa chọn nhiều

[Thiết kế web, SEO, Marketing ▼] Các mục được chọn hiển thị dưới dạng thẻ/mảnh

Chọn nhiều mục với giới hạn

Kết hợp với lựa chọn giá trị tối thiểu/tối đa:

"Chọn 2-4 chủ đề" Tối thiểu: 2 Tối đa: 4

Ví dụ về cấu hình

Ví dụ 1: Lựa chọn quốc gia

Nhãn: "Quốc gia" Văn bản giữ chỗ: "Chọn quốc gia của bạn..." Có thể tìm kiếm: Có Bắt buộc: Có Tùy chọn: [Hơn 195 quốc gia theo thứ tự bảng chữ cái]

Ví dụ 2: Loại yêu cầu

Nhãn: "Bạn đang thắc mắc về điều gì?" Chỗ giữ chỗ: "Chọn danh mục..." Bắt buộc: Có Tùy chọn: - Bán hàng - Hỗ trợ - Thanh toán - Hợp tác - Báo chí/Truyền thông - Khác

Ví dụ 3: Phạm vi ngân sách

Nhãn: "Ngân sách của bạn là bao nhiêu?" Chỗ giữ chỗ: "Chọn phạm vi..." Bắt buộc: Không Các tùy chọn: - Dưới 1,000 đô la - 1,000 đô la - 5,000 đô la - 5,000 đô la - 10,000 đô la - 10,000 đô la - 25,000 đô la - Trên 25,000 đô la - Chưa chắc chắn

Ví dụ 4: Khung giờ

Nhãn: "Thời gian hẹn ưa thích" Chỗ giữ chỗ: "Chọn thời gian..." Bắt buộc: Có Các tùy chọn: - 9:00 AM - 10:00 AM - 11:00 AM - 1:00 PM - 2:00 PM - 3:00 PM - 4:00 PM

Ví dụ 5: Chọn nhiều mục quan tâm

Nhãn: "Các chủ đề quan tâm" Văn bản giữ chỗ: "Chọn chủ đề..." Chọn nhiều chủ đề: Có Tìm kiếm được: Có Các tùy chọn: - Công nghệ - Kinh doanh - Tiếp thị - Thiết kế - Phát triển - Phân tích dữ liệu - Bảo mật - Trí tuệ nhân tạo/Máy học

Ví dụ 6: Dịch vụ được nhóm lại

Nhãn: "Bạn cần dịch vụ nào?" Các tùy chọn: --- Dịch vụ Web --- - Thiết kế website - Phát triển website - Thương mại điện tử --- Tiếp thị --- - SEO - PPC - Truyền thông xã hội --- Hỗ trợ --- - Bảo trì - Lưu trữ - Tư vấn

Lựa chọn mặc định

Không có tùy chọn mặc định (Khuyến nghị)

[Chọn một tùy chọn... ▼]

Người dùng phải chủ động lựa chọn. Phù hợp nhất cho các trường bắt buộc.

Mặc định được chọn trước

[Hoa Kỳ ▼] ← Đã chọn trước

Sử dụng khi:

• Một lựa chọn phổ biến nhất là...
• Tăng tốc quá trình điền biểu mẫu
• Giá trị mặc định hợp lý tồn tại

Cài đặt mặc định

1. Trong danh sách tùy chọn, hãy chọn tùy chọn mặc định.
2. Hoặc đặt “Giá trị mặc định” trong cài đặt.

Menu thả xuống so với nút chọn

Sử dụng menu thả xuống khi

• hơn 6 tùy chọn
• Danh sách dài (quốc gia, tiểu bang)
• Không gian bị hạn chế
• Các lựa chọn có bản chất tương tự nhau.

Sử dụng nút chọn khi

• 2-5 lựa chọn
• Tất cả các tùy chọn đều phải được hiển thị.
• Các tùy chọn đều có mô tả.
• So sánh trực quan rất quan trọng

So sánh song song

Menu thả xuống (6+ tùy chọn, ẩn cho đến khi được nhấp): [Chọn gói... ▼] Nút chọn (2-5 tùy chọn, tất cả đều hiển thị): ○ Miễn phí ○ Cơ bản (9 đô la/tháng) ○ Chuyên nghiệp (29 đô la/tháng) ○ Doanh nghiệp (Liên hệ với chúng tôi)

Tùy chỉnh kiểu dáng menu thả xuống

Giao diện mặc định

Menu thả xuống kế thừa kiểu dáng của biểu mẫu:

• Màu viền/bán kính
• Màu nền
• Kiểu chữ/kích thước
• Đệm

Tùy chọn tạo kiểu tùy chỉnh

• Biểu tượng mũi tên thả xuống
• Hình thức hiển thị của mục đã chọn
• Trạng thái khi rê chuột vào tùy chọn
• Tạo kiểu thẻ chọn nhiều mục

Tạo kiểu tóc di động

Menu thả xuống gốc trên thiết bị di động:

• iOS: Công cụ chọn bánh xe
• Android: Bộ chọn vật liệu
• Phù hợp với hệ điều hành

Thực tiễn tốt nhất

1. Sắp xếp các tùy chọn một cách hợp lý

• Theo thứ tự bảng chữ cái: Các quốc gia, tên gọi
• Số: Số lượng, phạm vi
• Tần số: Phổ biến nhất trước
• Theo niên đại: Khung giờ, ngày tháng

2. Giữ cho các lựa chọn ngắn gọn

Nên dùng: "Hoa Kỳ" Tránh dùng: "Hợp chủng quốc Hoa Kỳ (USA)" Nên dùng: "$1,000 - $5,000" Tránh dùng: "Từ một nghìn đến năm nghìn đô la"

3. Bao gồm mục “Khác” khi thích hợp.

Các tùy chọn: - Google - Facebook - LinkedIn - Giới thiệu bạn bè - Khác ← Bao gồm các trường hợp ngoại lệ

4. Sử dụng Placeholder, không phải tùy chọn đầu tiên

Tốt: Văn bản giữ chỗ: "Chọn..." Các tùy chọn: Tùy chọn 1, Tùy chọn 2, Tùy chọn 3 Tránh: Các tùy chọn: "Chọn...", Tùy chọn 1, Tùy chọn 2 (Tùy chọn đầu tiên không nên là một câu hỏi gợi ý)

5. Bật chức năng tìm kiếm cho danh sách dài

Bất kỳ menu thả xuống nào có từ 15 đến 20 tùy chọn trở lên đều nên có chức năng tìm kiếm.

6. Cân nhắc hiệu suất tải

Danh sách cực dài (trên 1000 mục) có thể cần:

• Lười tải
• Tìm kiếm phía máy chủ
• Chia thành các tiểu danh mục

Các trường hợp sử dụng menu thả xuống phổ biến

Hình thức liên lạc

- Bộ phận (Bán hàng, Hỗ trợ, Thanh toán) - Loại yêu cầu (Câu hỏi, Phản hồi, Khiếu nại) - Bạn biết đến chúng tôi qua đâu?

Mẫu đăng ký

- Quốc gia - Bang/Tỉnh - Ngành nghề - Quy mô công ty - Chức danh/Vai trò

Hình thức đặt hàng

- Lựa chọn sản phẩm - Số lượng - Kích thước/Màu sắc khác nhau - Phương thức vận chuyển

Biểu mẫu khảo sát

- Thang điểm (1-10) - Tần suất (Không bao giờ đến Luôn luôn) - Mức độ đồng tình (Hoàn toàn không đồng ý đến Hoàn toàn đồng ý)

Biểu mẫu đặt phòng

- Loại dịch vụ - Ngày ưu tiên - Khung giờ - Thời lượng

Xử lý sự cố

Menu thả xuống không hiển thị các tùy chọn

• Xác minh các tùy chọn đã được lưu
• Kiểm tra danh sách tùy chọn trống
• Xóa bộ nhớ đệm và làm mới

Tìm kiếm không hoạt động

• Xác nhận chức năng tìm kiếm đã được bật.
• Kiểm tra lỗi JavaScript
• Kiểm tra trên trình duyệt khác

Chọn nhiều mục nhưng không lưu tất cả các lựa chọn.

• Kiểm tra xem chế độ chọn nhiều mục đã được bật chưa.
• Kiểm tra việc xử lý gửi biểu mẫu
• Thử nghiệm với số lượng lựa chọn ít hơn

Trình chọn trên thiết bị di động không hiển thị

• Kiểu dáng tùy chỉnh có thể ghi đè lên kiểu dáng mặc định.
• Kiểm tra trên thiết bị di động thực tế
• Kiểm tra xung đột JavaScript

Khả Năng Tiếp Cận

Điều hướng bàn phím

• Nhấn phím Tab để chọn menu thả xuống.
• Sử dụng phím mũi tên để điều hướng
• Nhấn Enter/Space để chọn
• Nhập chữ cái đầu tiên để chuyển đến

Trình đọc màn hình

• Nhãn được liên kết đúng cách
• Các tùy chọn đã được công bố
• Việc lựa chọn đã được xác nhận.

Thực tiễn tốt nhất

• Nhãn rõ ràng, mô tả
• Thứ tự quyền chọn hợp lý
• Tránh sử dụng chỗ giữ chỗ làm hướng dẫn duy nhất.

Tổng kết

Tạo menu thả xuống:

1. Thêm trường thả xuống – Kéo để tạo hình
2. Đặt nhãn – Câu hỏi/gợi ý rõ ràng
3. Thêm phần giữ chỗ – Văn bản “Chọn…”
4. Nhập tùy chọn – Một hình ảnh mỗi dòng
5. Cho phép tìm kiếm – Dành cho danh sách dài
6. Cho phép chọn nhiều mục – Nếu cần nhiều lựa chọn
7. Đặt yêu cầu – Dựa trên nhu cầu của biểu mẫu
8. Kiểm tra kỹ lưỡng – Tất cả các tùy chọn, tất cả các thiết bị

Kết luận

Menu thả xuống giúp xử lý việc lựa chọn tùy chọn trong biểu mẫu một cách hiệu quả. Chúng tiết kiệm không gian, chuẩn hóa dữ liệu và hoạt động tốt trên nhiều thiết bị. Đối với danh sách ngắn, hãy cân nhắc sử dụng nút radio. Đối với danh sách dài, hãy bật chức năng tìm kiếm. Đối với nhiều lựa chọn, hãy sử dụng chế độ chọn nhiều. Cấu hình phù hợp sẽ biến menu thả xuống thành các trường nhập liệu mạnh mẽ, giúp cải thiện cả trải nghiệm người dùng và chất lượng dữ liệu.

Trình tạo biểu mẫu tự động Bao gồm các trường thả xuống đầy đủ tính năng với chế độ tìm kiếm, tùy chọn chọn nhiều mục và kiểu dáng tùy chỉnh. Tạo menu chọn chuyên nghiệp chỉ trong vài phút.

Bạn đã sẵn sàng thêm menu thả xuống chưa? Tải xuống Auto Form Builder Hãy bắt đầu xây dựng các biểu mẫu với menu thả xuống ngay hôm nay.