Cara Membuat Menu Dropdown di Formulir WordPress

Dropdown adalah elemen penting dalam formulir. Pemilihan negara, pilihan kategori, peringkat preferensi—kapan pun pengguna perlu memilih dari daftar yang telah ditentukan, dropdown siap membantu. Dropdown menghemat ruang, menstandarisasi data, dan memandu pengguna ke opsi yang valid. Berikut cara membuat menu dropdown yang efektif di formulir WordPress Anda.

Mengapa Menggunakan Menu Dropdown?

Keunggulan Dibandingkan Kolom Teks

• Data terstandarisasi: Tidak ada kesalahan ketik atau variasi.
• Pilihan terpandu: Pengguna melihat opsi yang tersedia
• Hemat ruang: Terlipat hingga diklik
• Ramah seluler: Pemilih bawaan di ponsel
• Penyelesaian lebih cepat: Klik vs ketik

Keunggulan Dibandingkan Tombol Radio

• Lebih cocok untuk daftar panjang: 6+ pilihan yang cocok untuk ruang kecil
• Tampilan lebih bersih: Mengurangi kekacauan visual
• Dapat digulir: Tangani puluhan pilihan

Kapan Menggunakan Dropdown?

• 6+ pilihan (kurang dari itu = pertimbangkan tombol radio)
• Opsi yang telah ditentukan sebelumnya dan diketahui.
• Hanya satu pilihan yang diperlukan
• Ruang terbatas
• Standardisasi data itu penting.

Membuat Dropdown Dasar

Langkah 1: Tambahkan Kolom Dropdown

1. Buka formulir Anda di A.F.B.
2. Menemukan Dropdown pada jenis bidang
3. Seret ke formulir Anda

Langkah 2: Konfigurasi Label

Label: "Bagaimana Anda mengetahui tentang kami?" Tempat penampung: "Pilih salah satu opsi..." Wajib diisi: Ya/Tidak

Langkah 3: Tambahkan Opsi

Masukkan setiap opsi pada baris baru:

Pencarian Google Media Sosial Teman atau Kolega Iklan Blog atau Artikel Lainnya

Langkah 4: Pratinjau dan Uji

1. Simpan formulir
2. Pratinjau di bagian depan
3. Klik menu tarik-turun untuk memverifikasi opsi.
4. Kirim entri tes

Opsi Konfigurasi Dropdown

Pengaturan Dasar

• Label: Pertanyaan atau petunjuk
• Tempat penampung: Teks default (misalnya, “Pilih…”)
• Diperlukan: Harus memilih untuk mengirimkan
• Teks bantuan: Instruksi tambahan

Pengaturan Opsi

• Daftar opsi: Pilihan yang tersedia
• Pilihan default: Opsi yang sudah dipilih sebelumnya
• Dapat dicari: Ketik untuk memfilter
• Pilihan ganda: Pilih beberapa

Menambahkan Opsi Dropdown

Daftar sederhana

Opsi 1 Opsi 2 Opsi 3 Opsi 4

Dengan Nilai yang Berbeda dari Label

Tampilkan satu hal, simpan hal lain:

Tampilan: "Amerika Serikat" Nilai: "AS" Tampilan: "Inggris Raya" Nilai: "UK"

Opsi yang Dikelompokkan (Optgroups)

--- Amerika Utara --- Amerika Serikat Kanada Meksiko --- Eropa --- Britania Raya Jerman Prancis

Banyak Pilihan

Untuk daftar yang panjang, pertimbangkan:

• Sesuai abjad
• Opsi yang paling umum terlebih dahulu
• Fitur pencarian diaktifkan
• Pengelompokan logis

Teks Placeholder

Apa itu Placeholder?

Teks yang ditampilkan sebelum pengguna memilih opsi:

[Pilih salah satu opsi... ▼] ← Placeholder

Contoh Placeholder yang Baik

"Pilih negara Anda..." "Pilih kategori..." "Pilih slot waktu..." "-- Silakan pilih --" "Pilih salah satu"

Praktik Terbaik Placeholder

• Tetap singkat
• Jelaskan dengan jelas bahwa ini adalah sebuah perintah.
• Jangan gunakan sebagai pilihan yang valid
• Pertimbangkan format “– Pilih –”

Dropdown yang Dapat Dicari

Apa yang Dapat Dicari?

Pengguna dapat mengetik untuk memfilter opsi:

[Ketik untuk mencari... ▼] Pengguna mengetik: "ger" Menampilkan: Jerman, Aljazair, Niger

Kapan Mengaktifkan Pencarian?

• 20+ opsi
• Daftar negara/negara bagian
• Katalog produk
• Daftar panjang apa pun

Mengaktifkan Pencarian

1. Pilih kolom tarik-turun
2. Temukan opsi “Dapat Dicari”
3. AKTIFKAN

UX yang dapat dicari

1. Pengguna mengklik menu tarik-turun 2. Kolom input teks muncul 3. Pengguna mengetikkan kata yang cocok sebagian 4. Opsi difilter secara real-time 5. Pengguna memilih dari daftar yang difilter

Dropdown Pilihan Ganda

Pilihan Tunggal vs Pilihan Ganda

Pilihan tunggal: Pengguna memilih SATU opsi. Pilihan ganda: Pengguna memilih BEBERAPA opsi.

Kapan Menggunakan Pilihan Ganda?

• “Pilih semua yang sesuai”
• Berbagai minat/preferensi
• Memilih beberapa kategori
• Ketika kotak centang akan memakan terlalu banyak ruang.

Mengaktifkan Pilihan Ganda

1. Pilih kolom tarik-turun
2. Temukan “Izinkan beberapa pilihan”
3. AKTIFKAN

Tampilan Pilihan Ganda

[Desain Web, SEO, Pemasaran ▼] Item terpilih ditampilkan sebagai tag/chip

Pilihan Ganda dengan Batasan

Kombinasikan dengan pilihan min/max:

"Pilih 2-4 topik" Min: 2 Maks: 4

Contoh Konfigurasi

Contoh 1: Pemilihan Negara

Label: "Negara" Placeholder: "Pilih negara Anda..." Dapat dicari: Ya Wajib: Ya Opsi: [195+ negara berdasarkan abjad]

Contoh 2: Jenis Pertanyaan

Label: "Apa pertanyaan Anda?" Placeholder: "Pilih kategori..." Wajib: Ya Pilihan: - Penjualan - Dukungan - Penagihan - Kemitraan - Pers/Media - Lainnya

Contoh 3: Kisaran Anggaran

Label: "Berapa anggaran Anda?" Placeholder: "Pilih rentang..." Wajib: Tidak Pilihan: - Di bawah $1,000 - $1,000 - $5,000 - $5,000 - $10,000 - $10,000 - $25,000 - $25,000+ - Belum yakin

Contoh 4: Slot Waktu

Label: "Waktu janji temu yang diinginkan" Placeholder: "Pilih waktu..." Wajib: Ya Pilihan: - 9:00 - 10:00 - 11:00 - 1:00 - 2:00 - 3:00 - 4:00

Contoh 5: Memilih Beberapa Minat

Label: "Topik yang diminati" Placeholder: "Pilih topik..." Pilihan ganda: Ya Dapat dicari: Ya Opsi: - Teknologi - Bisnis - Pemasaran - Desain - Pengembangan - Analitik - Keamanan - AI/ML

Contoh 6: Layanan yang Dikelompokkan

Label: "Layanan apa yang Anda butuhkan?" Pilihan: --- Layanan Web --- - Desain Situs Web - Pengembangan Situs Web - E-commerce --- Pemasaran --- - SEO - PPC - Media Sosial --- Dukungan --- - Pemeliharaan - Hosting - Konsultasi

Pilihan Default

Tidak Ada Pengaturan Default (Direkomendasikan)

[Pilih salah satu opsi... ▼]

Pengguna harus memilih secara aktif. Paling cocok untuk kolom yang wajib diisi.

Default yang Telah Dipilih Sebelumnya

[Amerika Serikat ▼] ← Pra-pilih

Gunakan saat:

• Salah satu opsi yang paling umum adalah...
• Mempercepat pengisian formulir
• Nilai default logis ada.

Pengaturan Default

1. Pada daftar opsi, tandai opsi default.
2. Atau atur “Nilai default” di pengaturan.

Dropdown vs Tombol Radio

Gunakan menu tarik-turun (dropdown) saat

• 6+ opsi
• Daftar panjang (negara, negara bagian)
• Ruang terbatas
• Opsi-opsi tersebut memiliki sifat yang serupa.

Gunakan Tombol Radio Saat

• 2-5 pilihan
• Semua opsi harus terlihat.
• Opsi-opsi tersebut memiliki deskripsi.
• Perbandingan visual itu penting.

Perbandingan Berdampingan

MENU TARIK TURUN (6+ pilihan, tersembunyi hingga diklik): [Pilih paket... ▼] TOMBOL RADIO (2-5 pilihan, semuanya terlihat): ○ Gratis ○ Dasar ($9/bulan) ○ Pro ($29/bulan) ○ Perusahaan (Hubungi kami)

Menu tarik-turun penataan gaya

Penampilan Default

Dropdown mewarisi gaya formulir:

• Warna/radius batas
• Warna latar belakang
• Jenis/ukuran huruf
• Lapisan

Opsi Penataan Gaya Kustom

• ikon panah tarik-turun
• Tampilan item yang dipilih
• Status hover opsi
• Gaya tag multi-pilihan

Penataan Gaya Seluler

Menu tarik-turun (dropdown) asli untuk perangkat seluler:

• iOS: Pemilih roda
• Android: Pemilih Material
• Sesuai dengan OS

Praktik Terbaik

1. Urutkan Opsi Secara Logis

• Alfabetis: Negara, nama
• Angka: Jumlah, rentang
• Frekuensi: Yang paling umum terlebih dahulu
• Kronologis: Slot waktu, tanggal

2. Jaga agar pilihan tetap ringkas.

Baik: "Amerika Serikat" Hindari: "Amerika Serikat (AS)" Baik: "$1,000 - $5,000" Hindari: "Antara seribu dan lima ribu dolar"

3. Sertakan “Lainnya” Jika Sesuai

Opsi: - Google - Facebook - LinkedIn - Referensi teman - Lainnya ← Menangani kasus-kasus khusus

4. Gunakan Placeholder, Bukan Opsi Pertama

Baik: Placeholder: "Pilih..." Opsi: Opsi 1, Opsi 2, Opsi 3 Hindari: Opsi: "Pilih...", Opsi 1, Opsi 2 (Opsi pertama seharusnya bukan prompt)

5. Aktifkan Pencarian untuk Daftar Panjang

Setiap menu tarik-turun dengan 15-20+ pilihan harus dapat dicari.

6. Pertimbangkan Kinerja Pemuatan

Daftar yang sangat panjang (1000+) mungkin memerlukan:

• Pemuatan malas
• Pencarian sisi server
• Membagi menjadi subkategori

Kasus Penggunaan Dropdown Umum

Formulir Kontak

- Departemen (Penjualan, Dukungan, Penagihan) - Jenis pertanyaan (Pertanyaan, Umpan Balik, Keluhan) - Bagaimana Anda mengetahui tentang kami

Formulir Pendaftaran

- Negara - Provinsi/Negara Bagian - Industri - Ukuran Perusahaan - Jabatan/Peran

Formulir Pemesanan

- Pilihan produk - Jumlah - Varian ukuran/warna - Metode pengiriman

Formulir Survei

- Skala penilaian (1-10) - Frekuensi (Tidak pernah hingga Selalu) - Persetujuan (Sangat tidak setuju hingga Sangat setuju)

Formulir Pemesanan

- Jenis layanan - Tanggal yang diinginkan - Slot waktu - Durasi

Penyelesaian masalah

Menu tarik-turun tidak menampilkan opsi.

• Verifikasi bahwa opsi telah tersimpan.
• Periksa apakah daftar opsi kosong
• Bersihkan cache dan segarkan

Pencarian Tidak Bekerja

• Konfirmasikan bahwa fitur pencarian diaktifkan.
• Periksa kesalahan JavaScript
• Uji coba di browser yang berbeda.

Pilihan Ganda Tidak Menyimpan Semua Pilihan

• Pastikan fitur multi-pilihan diaktifkan.
• Periksa penanganan pengiriman formulir
• Uji dengan pilihan yang lebih sedikit

Pemilih Seluler Tidak Muncul

• Pengaturan gaya kustom dapat menimpa pengaturan bawaan.
• Pengujian pada perangkat seluler sebenarnya
• Periksa konflik JavaScript.

Aksesibilitas

Navigasi Keyboard

• Tekan Tab untuk memfokuskan menu tarik-turun.
• Gunakan tombol panah untuk bernavigasi.
• Tekan Enter/Spasi untuk memilih
• Ketik huruf pertama untuk melompat

Pembaca Layar

• Label yang terpasang dengan benar
• Opsi yang diumumkan
• Seleksi dikonfirmasi

Praktik Terbaik

• Label yang jelas dan deskriptif
• Urutan opsi logis
• Hindari penggunaan placeholder sebagai satu-satunya instruksi.

Ringkasan

Membuat menu tarik-turun:

1. Tambahkan kolom Dropdown – Seret untuk membentuk
2. Atur label – Pertanyaan/petunjuk yang jelas
3. Tambahkan tempat penampung – Teks “Pilih…”
4. Masukkan opsi – Satu per baris
5. Aktifkan pencarian – Untuk daftar panjang
6. Aktifkan pilihan ganda – Jika diperlukan beberapa pilihan
7. Tetapkan yang diperlukan – Berdasarkan kebutuhan formulir
8. Tes secara menyeluruh – Semua opsi, semua perangkat

Kesimpulan

Dropdown menangani pemilihan opsi dalam formulir secara efisien. Dropdown menghemat ruang, menstandarisasi data, dan berfungsi dengan baik di berbagai perangkat. Untuk daftar pendek, pertimbangkan tombol radio. Untuk daftar panjang, aktifkan fungsi pencarian. Untuk beberapa pilihan, gunakan mode multi-pilihan. Konfigurasi yang tepat menjadikan dropdown sebagai kolom input yang ampuh yang meningkatkan pengalaman pengguna dan kualitas data.

Pembuat Formulir Otomatis Termasuk kolom dropdown berfitur lengkap dengan mode pencarian, opsi multi-pilihan, dan penataan gaya khusus. Buat menu pilihan profesional dalam hitungan menit.

Siap menambahkan menu tarik-turun? Unduh Pembuat Formulir Otomatis dan mulailah membuat formulir dengan menu tarik-turun hari ini.