Dropdown Pilihan Ganda: Pilih Beberapa Opsi
Dropdown standar memaksa pengguna untuk memilih hanya satu opsi. Tetapi bagaimana jika mereka perlu memilih beberapa opsi? Layanan yang mereka minati, hari ketersediaan, fitur yang mereka inginkan—banyak pertanyaan memiliki beberapa jawaban yang valid. Dropdown multi-pilihan memungkinkan pengguna untuk memilih beberapa opsi dari satu kolom yang hemat ruang.
Dalam panduan ini, Anda akan mempelajari cara membuat dropdown multi-pilihan yang memungkinkan pengguna untuk memilih beberapa opsi dalam formulir WordPress Anda.
Apa itu Dropdown Pilihan Ganda?
Menu tarik-turun standar
- Klik untuk membuka opsi
- Pilih SATU opsi
- Menu tarik-turun ditutup
- Satu nilai tersimpan
Menu tarik-turun pilihan ganda
- Klik untuk membuka opsi
- Pilih beberapa opsi
- Tetap buka untuk pilihan lainnya
- Beberapa nilai tersimpan
Perbedaan Visual
Standar:
Layanan: [Desain Web ▼] (Hanya satu pilihan)
Pilihan Ganda:
Layanan: [Desain Web, SEO, Pemasaran ▼] (Beberapa pilihan ditampilkan)
Kapan Menggunakan Dropdown Pilihan Ganda?
Baik untuk
- Layanan yang diminati: “Pilih semua layanan yang Anda butuhkan”
- Hari yang tersedia: “Hari apa saja yang cocok untuk Anda?”
- Fitur yang diinginkan: “Pilih fitur yang Anda minati”
- Kategori: “Pilih semua yang sesuai”
- Keterampilan/keahlian: “Apa saja keahlian Anda?”
- Preferensi: “Pilih preferensi Anda”
Kapan Sebaiknya Menggunakan Kotak Centang?
| Menu tarik-turun pilihan ganda | Kotak centang |
|---|---|
| Banyak pilihan (7+) | Sedikit pilihan (2-6) |
| Bentuk yang dibatasi ruang | Ruang vertikal yang luas |
| Opsi tersembunyi hingga diklik | Semua opsi terlihat sekaligus |
| Penampilan lebih bersih | Pemindaian lebih mudah |
| Ramah seluler untuk daftar panjang. | Lebih baik untuk pemilihan cepat. |
Panduan Keputusan
- 2-6 pilihan: Gunakan kotak centang
- 7-15 pilihan: Menu tarik-turun pilihan ganda
- 15+ pilihan: Pilih beberapa item dengan fungsi pencarian.
Membuat Dropdown Pilihan Ganda
Langkah 1: Tambahkan Kolom Dropdown
- Buka formulir Anda di A.F.B.
- sayang Dropdown kolom pada formulir Anda
- Klik untuk mengkonfigurasi pengaturan
Langkah 2: Aktifkan Pilihan Ganda
- Temukan opsi “Izinkan Beberapa Pilihan”
- AKTIFKAN
- Dropdown sekarang menerima beberapa pilihan.
Langkah 3: Tambahkan Opsi
Masukkan setiap opsi pada baris baru:
Desain Web, SEO, Pemasaran Konten, Media Sosial, Pemasaran Email, Periklanan PPC, Branding, Analitik
Langkah 4: Konfigurasikan Pengaturan
- Label: “Layanan yang Diminati”
- Tempat penampung: “Pilih semua yang sesuai”
- Diperlukan: Aktifkan/Nonaktifkan berdasarkan kebutuhan
- Teks bantuan: “Tahan Ctrl/Cmd untuk memilih beberapa pilihan” (jika diperlukan)
Langkah 5: Tetapkan Batas Seleksi (Opsional)
- Pilihan minimum: Setidaknya X pilihan
- Pilihan maksimal: Tidak lebih dari X pilihan
Contoh Konfigurasi Pilihan Ganda
Pemilihan Layanan
Label: “Layanan mana yang Anda minati?”
Tempat penampung: “Pilih semua yang sesuai”
Diperlukan: Ya
Pilihan minimum: 1
Pilihan:
- Template Desain Website
- Pengembangan Situs Web
- E-commerce
- SEO
- Penulisan Konten
- Manajemen Media Sosial
- Email Pemasaran
- Iklan Berbayar
- Branding
- Consulting
Hari yang Tersedia
Label: “Hari apa saja Anda tersedia?”
Tempat penampung: “Pilih hari yang tersedia”
Diperlukan: Ya
Pilihan minimum: 1
Pilihan:
- Senin
- Selasa
- Rabu
- Kamis
- Jumat
- Sabtu
- Minggu
Keahlian dan Keterampilan
Label: “Pilih bidang keahlian Anda”
Tempat penampung: “Pilih semua yang sesuai”
Diperlukan: Ya
Pilihan minimum: 1
Pilihan maksimal: 5
Pilihan:
- JavaScript
- Ular sanca
- PHP
- Bereaksi
- Vue.js
- Node.js
- WordPress
- Manajemen Database
- DevOps
- Desain UI / UX
Pembatasan diet
Label: “Apakah ada batasan diet?”
Tempat penampung: “Pilih jika berlaku”
Diperlukan: Tidak
Pilihan:
- Vegetarian
- Vegan
- Gluten-Free
- Bebas Susu
- Alergi Kacang
- Halal
- Halal
- Tidak Ada Batasan
Preferensi Komunikasi
Label: “Bagaimana Anda ingin kami menghubungi Anda?”
Tempat penampung: “Pilih metode yang disukai”
Diperlukan: Ya
Pilihan minimum: 1
Pilihan:
- Panggilan Telepon
- Pesan teks
- Sambungan Video
Minat Acara
Label: “Sesi mana yang menarik minat Anda?”
Tempat penampung: “Pilih sesi yang ingin Anda hadiri”
Diperlukan: Ya
Pilihan minimum: 1
Pilihan:
- Pidato Utama
- Lokakarya A: Pemasaran
- Lokakarya B: Penjualan
- Lokakarya C: Teknologi
- Diskusi panel
- Makan Siang Jaringan
- Upacara Penutupan
Batasan Seleksi
Pilihan Minimum
Mengapa menggunakannya:
- Pastikan setidaknya satu opsi dipilih
- Membutuhkan beberapa tanggapan
- Validasi masukan yang bermakna
Pengaturan umum:
- Min 1: “Pilih setidaknya satu”
- Min 2: “Pilih setidaknya dua opsi”
- Min 3: “Pilih 3 teratasmu”
Pilihan Maksimum
Mengapa menggunakannya:
- Batasi pilihan fokus
- “Pilih 3 teratasmu”
- Batasan sumber daya
- Mencegah perilaku “pilih semua”
Pengaturan umum:
- Max 3: “Pilih hingga 3”
- Maksimal 5: “Pilih tidak lebih dari 5”
- Slot pertandingan maksimal yang tersedia
Pesan Validasi
- “Silakan pilih setidaknya 1 opsi”
- “Silakan pilih setidaknya 3 opsi”
- “Anda dapat memilih maksimal 5 opsi”
- “Silakan pilih antara 2 dan 5 opsi”
Pertimbangan Pengalaman Pengguna
Instruksi Jelas
Pada label:
- “Pilih semua yang sesuai”
- “Pilih beberapa opsi”
- “Pilih 3 teratasmu”
Di tempat penampung:
- “Klik untuk memilih beberapa…”
- “Pilih opsi…”
Dalam teks bantuan:
- “Anda dapat memilih beberapa opsi”
- “Pilih 1-5 opsi”
- “Tahan Ctrl (Cmd di Mac) untuk memilih beberapa item”
Tampilkan Jumlah yang Dipilih
Tampilkan jumlah item yang dipilih:
- “3 item terpilih”
- “Desain Web, SEO, +2 lainnya”
- Tampilan visual yang jelas dari pilihan yang tersedia saat ini.
Pembatalan Pilihan yang Mudah
- Klik item yang dipilih untuk membatalkan pilihan.
- Tombol “X” pada setiap item yang dipilih
- Opsi “Hapus semua”
Cari Daftar Panjang
Untuk 10+ pilihan, tambahkan pencarian:
- Ketik untuk memfilter opsi
- Temukan item dengan cepat
- Penting untuk 20+ pilihan
Pilihan Ganda vs. Jenis Bidang Lainnya
Dropdown Pilihan Ganda vs. Kotak Centang
Pilih Multi-Pilih Saat:
- 7+ opsi
- Ruang formulir terbatas
- Tidak semua opsi perlu terlihat.
- Tampilan visual yang lebih bersih diinginkan.
Pilih Kotak Centang Saat:
- 6 pilihan atau kurang
- Pengguna harus melihat semua opsi.
- Pemindaian cepat sangat penting.
- Interaksi yang lebih sederhana lebih disukai.
Pilihan Ganda vs. Beberapa Dropdown Tunggal
Pendekatan yang buruk:
Pilihan pertama: [Dropdown] Pilihan kedua: [Dropdown] Pilihan ketiga: [Dropdown]
Pendekatan yang lebih baik:
Pilih pilihan Anda: [Dropdown pilihan ganda] (Maksimal 3 pilihan)
Pilihan Ganda vs. Tombol Radio
Tombol radio = hanya untuk pilihan tunggal. Jangan pernah digunakan untuk pilihan ganda.
Pertimbangan Seluler
Pilihan Ramah Sentuhan
- Target ketuk besar
- Mudah untuk memilih/membatalkan pilihan
- Umpan balik visual yang jelas
Asli vs. Kustom
- Fitur multi-pilihan bawaan bisa terasa canggung di perangkat seluler.
- Dropdown kustom seringkali memberikan UX yang lebih baik.
- Pertimbangkan daftar kotak centang di perangkat seluler.
Tampilan Item yang Dipilih
- Tampilkan pilihan dengan jelas
- Jangan sampai wadah meluap
- “3 terpilih” vs. mencantumkan semua nama
Penanganan data
Bagaimana Data Disimpan
Beberapa pilihan biasanya disimpan sebagai:
- Dipisahkan dengan koma: “Desain Web, SEO, Pemasaran”
- Array: [“Desain Web”, “SEO”, “Pemasaran”]
- Entri individual per pilihan
Notifikasi Email
Dalam email pemberitahuan:
Layanan yang Diminati: - Desain Web - SEO - Pemasaran Konten
Ekspor CSV
Diekspor sebagai:
- Kolom tunggal: “Desain Web, SEO, Pemasaran”
- Atau beberapa kolom per opsi
Penyaringan Kiriman
- Saring berdasarkan pilihan tertentu
- Temukan semua orang yang memilih “SEO”
- Berguna untuk segmentasi
Pola Umum
Pola 1: Pilihan Ganda yang Diperlukan
Layanan yang dibutuhkan (pilih setidaknya satu): [Dropdown pilihan ganda] Wajib: Ya Minimal: 1
Pola 2: Pilihan Terbatas
Pilih 3 prioritas utama Anda: [Dropdown pilihan ganda] Min: 3 Maks: 3
Pola 3: Pilihan Ganda Opsional
Apakah ada batasan diet? (opsional) [Dropdown pilihan ganda] Wajib: Tidak
Pola 4: “Pilih Semua” dengan Batasan
Fitur mana yang menarik minat Anda? (maks. 5) [Dropdown multi-pilihan] Maks: 5 Teks bantuan: "Pilih hingga 5 fitur"
Aksesibilitas
Navigasi Keyboard
- Tekan Tab untuk mengakses menu tarik-turun.
- Gunakan tombol panah untuk menavigasi opsi.
- Tekan spasi/enter untuk memilih/membatalkan pilihan
- Ketik untuk langsung menuju opsi
Dukungan Pembaca Layar
- Umumkan “pilihan ganda” atau “pilih beberapa”
- Baca jumlah yang dipilih
- Umumkan perubahan seleksi
Label yang Jelas
- Label menunjukkan bahwa beberapa pilihan diperbolehkan.
- “Pilih semua yang sesuai”
- “Pilih beberapa opsi”
Tips Styling
Tampilan Item yang Dipilih
- Label/chip untuk setiap pilihan
- Perbedaan visual yang jelas
- Lepaskan tombol pada masing-masing
Tampilan Menu Dropdown
- Tanda centang di samping item yang dipilih
- Latar belakang yang disorot untuk yang dipilih
- Hapus status hover
Desain yang Konsisten
- Cocokkan dengan gaya kolom formulir lainnya
- Batas, jarak antar elemen, dan warna yang sama.
- Konsisten dengan menu dropdown tunggal.
Penyelesaian masalah
Pilihan Tidak Tersimpan
- Pastikan fitur multi-pilihan diaktifkan.
- Periksa penanganan pengiriman formulir
- Uji coba dengan pratinjau formulir
Hanya Bisa Memilih Satu
- Opsi pilihan ganda tidak diaktifkan
- Periksa pengaturan lapangan
- Mungkin menggunakan tipe kolom yang salah.
Validasi Tidak Berfungsi
- Verifikasi pengaturan min/max
- Periksa tombol yang diperlukan
- Uji jumlah pilihan yang berbeda
Masalah Tampilan di Ponsel
- Pengujian pada perangkat seluler sebenarnya
- Periksa lebar menu tarik-turun
- Pastikan pilihan terlihat.
Pertanyaan yang Sering Diajukan
Berapa banyak opsi yang dapat dipilih pengguna?
Secara default, tidak terbatas. Atur maksimum jika Anda ingin membatasi pilihan (misalnya, "Pilih hingga 3").
Apakah saya sebaiknya menggunakan pilihan ganda atau kotak centang?
Kotak centang untuk 6 pilihan atau kurang (semuanya terlihat). Pilihan ganda untuk 7 pilihan atau lebih, atau jika ruang terbatas.
Apakah saya dapat mensyaratkan jumlah pilihan minimum?
Ya. Tetapkan jumlah pilihan minimum untuk memastikan pengguna memilih setidaknya X opsi.
Bagaimana beberapa pilihan disimpan?
Biasanya berupa nilai yang dipisahkan koma atau array. Muncul dalam pengajuan dan ekspor sebagai daftar.
Bisakah saya menambahkan fungsi pencarian ke menu tarik-turun?
Banyak pembuat formulir mendukung dropdown yang dapat dicari. Sangat penting untuk 15+ pilihan.
Ringkasan
Membuat dropdown multi-pilihan:
- Tambahkan kolom Dropdown – Menu tarik-turun standar terlebih dahulu
- Aktifkan pilihan ganda – Memungkinkan beberapa pilihan
- Tambahkan opsi – Semua pilihan yang tersedia
- Pasang label yang jelas – “Pilih semua yang sesuai”
- Tambahkan tempat penampung – Memandu pengguna untuk memilih
- Tetapkan batasan pemilihan – Min/maks jika diperlukan
- Tambahkan teks bantuan – Jelaskan aturan seleksi
- Tes secara menyeluruh – Berbagai jumlah pilihan
Kesimpulan
Dropdown multi-pilihan secara elegan menyelesaikan masalah "pilih beberapa". Dropdown ini menghemat ruang dibandingkan dengan daftar kotak centang yang panjang, menjaga formulir tetap rapi, dan memungkinkan pengguna untuk memilih persis apa yang sesuai dengan kebutuhan mereka. Gunakan dropdown ini untuk layanan, hari, fitur, preferensi—pertanyaan apa pun di mana beberapa jawaban valid dan daftarnya terlalu panjang untuk kotak centang.
Pembuat Formulir Otomatis Mendukung dropdown multi-pilihan dengan batasan pilihan dan opsi pencarian. Buat formulir fleksibel yang menangkap banyak pilihan dalam satu bidang yang mudah digunakan.
Siap untuk formulir pilihan ganda? Unduh Pembuat Formulir Otomatis dan memungkinkan pengguna untuk memilih berbagai opsi dengan mudah.
