Desain formulir: praktik terbaik untuk konversi

Diperbarui pada 19 Oktober 2026

Formulir Anda singkat. Pertanyaannya relevan. Lalu lintas pengunjung cukup ramai. Namun, di perangkat seluler, sebagian besar pengunjung berhenti di kolom kedua. Masalahnya seringkali bukan pada penawaran atau jumlah pertanyaan: melainkan pada desain formulir. Papan ketik alfabet yang terbuka ke kolom kode pos, label yang menghilang segera setelah Anda mengetik, tombol abu-abu muda yang hampir tidak terlihat. Panduan ini mengumpulkan praktik terbaik untuk desain formulir yang memiliki dampak terukur pada konversi, beserta kode atau pengaturan yang tepat untuk diterapkan.

Pendeknya: desain formulir yang efektif mengikuti lima praktik terbaik: satu kolom dengan label yang terlihat di atas kolom isian, keyboard seluler yang disesuaikan dengan setiap tipe data, langkah-langkah singkat dengan kemajuan yang terlihat, kontras yang cukup (4,5:1 untuk teks, 3:1 untuk batas kolom isian), dan tombol yang dengan jelas menunjukkan hasil yang diinginkan pengguna. Pengaturan ini mudah dan murah untuk diimplementasikan serta menghilangkan hambatan yang menyebabkan pengguna meninggalkan formulir pada perangkat seluler.

Sebelum kita membahas detailnya, perlu ada klarifikasi: artikel ini tidak membahas panjang formulir Anda, tetapi formatnya. Dan di bagian akhir, Anda akan menemukan daftar periksa audit 12 poin untuk memverifikasi formulir Anda sendiri hanya dalam sepuluh menit.

Tata letak: satu kolom, label di atas kolom isian

Tata letak yang paling efektif untuk formulir pengumpulan prospek adalah satu kolom, dengan setiap label ditempatkan di atas kolom yang sesuai. Mata akan mengikuti garis lurus, tanpa harus berzigzag antar kolom atau mencari label mana yang sesuai dengan kolom mana.

Angka-angka tersebut mendukung hal ini. Dalam sebuah studi terkontrol yang dilakukan oleh Institut CXL (sekarang Speero) dengan 702 peserta, versi kolom tunggal diselesaikan dalam waktu rata-rata 102,3 detik, dibandingkan dengan 117,8 detik untuk versi multi-kolom. Ini menunjukkan penghematan waktu sekitar 13%, dengan pertanyaan yang benar-benar identik.

Satu perbedaan penting: studi ini hanya mengukur waktu yang dibutuhkan oleh mereka yang menyelesaikan formulir. Studi ini tidak menyebutkan apa pun tentang mereka yang berhenti di tengah jalan. Tetapi formulir yang lebih cepat dibaca jarang sekali membuat orang patah semangat.

Label sementara, label mengambang, atau label tetap?

Label tetap, yang selalu terlihat di atas kolom input, tetap menjadi pilihan teraman. Teks contoh yang ditempatkan di dalam kolom input (placeholder) akan hilang segera setelah penekanan tombol pertama dilakukan: pengguna yang meninjau input mereka tidak lagi tahu apa yang diminta.

Label mengambang, yang dipopulerkan oleh Material Design, hanya menyelesaikan sebagian masalah. Label menyusut agar sesuai dengan kolom, judul yang panjang akhirnya terpotong, dan kontras teks yang diperkecil seringkali terlalu rendah. Gunakan placeholder hanya sebagai contoh pemformatan ("06 12 34 56 78"), jangan pernah sebagai satu-satunya label.

Dua pengecualian diperbolehkan

Aturan kolom tunggal memperbolehkan pengecualian ketika dua kolom mewakili satu konsep: kode pos dan kota, atau tanggal kedaluwarsa dan kode keamanan. Menempatkannya berdampingan di komputer tetap mudah dibaca, asalkan ditampilkan satu di bawah yang lain pada perangkat seluler.

Seluler: Tampilkan papan ketik yang tepat untuk setiap kolom

Setiap kolom harus memunculkan papan ketik yang sesuai dengan data yang diharapkan: papan ketik numerik untuk kode pos, papan ketik telepon untuk nomor telepon, dan papan ketik dengan simbol "@" untuk alamat email. Detail kode HTML ini mencegah pengguna harus beralih antar papan ketik secara manual untuk setiap kolom.

Detail ini seringkali diimplementasikan dengan buruk, bahkan di situs-situs besar. Audit Baymard Institute terhadap keyboard sentuh menunjukkan bahwa 54% situs e-commerce utama di AS tidak menampilkan keyboard yang dioptimalkan untuk kolom nomor telepon, kode pos, atau kartu kredit, 79% pengguna membiarkan fitur koreksi otomatis tetap aktif, yang menyebabkan input menjadi rusak. Alamat email yang "dikoreksi" dengan nomor telepon berarti kehilangan prospek.

Berikut adalah pengaturan yang perlu diterapkan pada kolom yang paling sering digunakan dalam formulir prospek berbahasa Prancis:

Menghindari type='number' untuk kode pos atau nomor SIRET: ini menambahkan tanda panah penambah yang tidak perlu pada komputer dan dapat menghilangkan angka nol awal dari kode pos seperti 01000.

Jebakan zoom iPhone

Di iOS, Safari secara otomatis memperbesar tampilan pada kolom teks yang lebih kecil dari 16 piksel. Halaman bergeser, tombol keluar dari layar, dan pengguna harus memperkecil tampilan secara manual. Atur ukuran font untuk kolom minimal 16 piksel: masalah tersebut hilang.

Pertimbangkan juga area sentuh. Tombol radio berukuran 16px sulit disentuh dengan ibu jari; usahakan area yang dapat diklik minimal 44 × 44px, sehingga seluruh baris opsi dapat diklik, bukan hanya titiknya.

Fokus otomatis dan pelengkapan otomatis: membantu tanpa memaksakan apa pun

Fitur pelengkapan otomatis pada browser menghemat waktu berharga; sebaliknya, fokus otomatis lebih sering menjadi penghalang daripada bantuan. Ini adalah dua pengaturan serupa dengan efek yang berlawanan.

Atribut autocomplete memungkinkan browser mengisi nama, email, telepon, dan alamat dengan sekali ketuk. Pada formulir penawaran enam kolom, ini dapat memangkas pengisian menjadi dua atau tiga ketukan. Sebaliknya, menonaktifkan isi otomatis “demi keamanan” pada formulir kontak merugikan pengguna tanpa melindungi apa pun.

Autofocus, yang secara otomatis menempatkan kursor di kolom pertama saat pemuatan, menghadirkan beberapa masalah. Desainer Inggris Adam Silver mengidentifikasi lima masalah: pemisah halaman yang tidak terduga, pengguliran keyboard yang terblokir, pintasan browser yang tidak dapat diakses, pembaca layar yang mengumumkan label kolom alih-alih judul halaman, dan pada Android, sebuah kolom yang aktif tanpa keyboard terbuka.

Rekomendasi kami sederhana. Jangan melakukan autofokus pada halaman yang berisi apa pun selain formulir (teks pengantar, argumen, ulasan pelanggan). Namun, pada formulir multi-langkah, memindahkan fokus ke judul langkah berikutnya sangat berguna: orang yang menavigasi dengan keyboard atau pembaca layar akan langsung tahu di mana mereka berada.

Uraikan langkah-langkahnya tanpa membuat pembaca kehilangan fokus

Formulir multi-langkah akan menghasilkan konversi yang lebih baik jika setiap layar hanya menanyakan satu atau dua pertanyaan, progresnya terlihat, dan pertanyaan pertama membutuhkan upaya minimal. Memecah formulir menjadi bagian-bagian kecil bukanlah solusi ajaib: jika dirancang dengan buruk, hal itu akan menambah jumlah klik tanpa mengurangi beban kerja.

Tiga aturan desain membuat perbedaan besar:

• Mulailah dengan pertanyaan yang mudah dan menarik : jenis proyek atau kebutuhan disajikan sebagai kartu besar yang dapat diklik. Detail kontak ditambahkan terakhir, setelah pengguna meluangkan waktu untuk mempertimbangkannya.
• Tunjukkan kemajuan yang jujur “Langkah 2 dari 4” lebih baik daripada grafik batang yang bergerak cepat di awal lalu melambat.
• Lanjutkan ke layar berikutnya secara otomatis setelah pilihan tunggal (tombol radio), tetapi tidak pernah setelah memasukkan teks, di mana pengguna harus tetap memegang kendali.

Untuk mempelajari format ini lebih dalam, kami contoh formulir penawaran harga multi-langkah yang diberi anotasi tampilkan urutan pertanyaan yang sesuai dengan sektor. Dan untuk menampilkan hanya pertanyaan yang relevan dengan setiap profil, maka logika kondisional menghindari menampilkan kolom "Jumlah karyawan" kepada individu.

Pemartisian ini dapat dilakukan tanpa melibatkan pengembang fitur Blastform : langkah-langkah, peta visual, bilah kemajuan, dan kondisi tampilan dikonfigurasi dari editor.

Warna, kontras, dan aksesibilitas

Formulir yang mudah diakses juga merupakan formulir yang memiliki tingkat konversi lebih baik: teks harus menawarkan kontras minimal 4,5:1 dengan latar belakangnya, dan batas kolom minimal 3:1, sesuai dengan kriteria WCAG 1.4.3 dan 1.4.11. Kriteria kedua ini paling sering diabaikan.

Tren desain grafis terkini lebih menyukai bidang abu-abu sangat terang pada latar belakang putih, tanpa batas yang terlihat. Akibatnya, pada layar ponsel di bawah sinar matahari yang terang, pengguna tidak lagi dapat membedakan di mana harus mengklik. Batas abu-abu seperti #767676 pada latar belakang putih lolos uji; sedangkan #E0E0E0 yang sangat umum jauh dari kata lolos.

Tiga refleks lain yang perlu diadopsi:

• Jangan pernah menunjukkan kesalahan hanya dengan warna saja. Garis tepi merah saja tidak cukup untuk sekitar 8% pria yang mengalami gangguan penglihatan warna: tambahkan ikon dan pesan teks.
• Hubungkan setiap label dengan kolomnya masing-masing (menandai label dengan atribut for): Mengklik label akan mengaktifkan kolom, dan pembaca layar akan membacakan pertanyaan yang tepat.
• Jaga agar indikator fokus tetap terlihat. Menghapus garis biru bawaan tanpa menggantinya akan membuat formulir tidak dapat digunakan dengan keyboard.

Masalah ini bukan lagi sekadar soal kenyamanan. Sejak 28 Juni 2025, Undang-Undang Aksesibilitas Eropa telah memberlakukan persyaratan aksesibilitas pada banyak layanan daring publik di Uni Eropa, termasuk layanan e-commerce dan perbankan. Formulir yang sesuai akan menghemat waktu Anda karena Anda tidak perlu membuatnya ulang di kemudian hari.

Dari sudut pandang identitas visual, menyelaraskan warna dan tipografi formulir dengan warna dan tipografi situs web Anda akan membangun kepercayaan: formulir yang terlihat seperti widget pihak ketiga yang generik akan membuat pengguna ragu. Kami membahas aspek ini secara lebih detail dalam artikel kami tentang mengkustomisasi formulir tanpa coding.

Mikrokopi dan pesan kesalahan

Mikrokopi merujuk pada teks kecil yang mengelilingi kolom isian: label, teks bantuan, pesan kesalahan. Jika ditulis dengan baik, mikrokopi dapat mengatasi masalah sebelum menghambat pengguna. Jika ditulis dengan buruk, kesalahan ketik sederhana dapat menyebabkan pengguna meninggalkan situs.

Tandai kolom opsional, bukan kolom yang wajib diisi

Tanda bintang merah adalah refleks bawaan, tetapi banyak pengguna tidak menyadarinya atau memahami artinya. Praktik yang direkomendasikan oleh beberapa spesialis UX adalah kebalikannya: anggap semuanya wajib dan tambahkan "(opsional)" hanya pada kolom yang tidak wajib. Jika Anda memiliki banyak kolom opsional, pertimbangkan kegunaannya.

Validasi pada waktu yang tepat

Menurut Baymard Institute, 31% dari situs yang diuji tidak memiliki validasi online untuk kolom-kolom tersebut, dan beberapa pengguna yang memilikinya memicu pesan tersebut terlalu dini. Menampilkan "alamat email tidak valid" ketika seseorang baru mengetik tiga huruf menimbulkan frustrasi. Waktu yang tepat: saat pengguna meninggalkan kolom isian. Dan segera setelah mereka memperbaikinya, pesan kesalahan harus menghilang saat mereka mengetik, tanpa menunggu mereka berpindah ke kolom isian lain.

Mencatat kesalahan yang membantu

Bandingkan "Format tidak valid" dan "Angka harus berisi 10 digit, misalnya 06 12 34 56 78". Yang kedua memberi tahu Anda apa yang harus dilakukan. Tempatkan pesan tepat di bawah kolom yang terpengaruh, jangan pernah hanya di bagian atas formulir, dan pertahankan semua entri yang telah dibuat setelah terjadi kesalahan.

Memberikan kepastian di saat ada masalah

Kolom nomor telepon adalah masalah klasik dalam formulir pembuatan prospek. Sebuah kalimat bermanfaat yang ditempatkan tepat di bawahnya ("Hanya untuk menghubungi Anda kembali mengenai penawaran Anda") langsung mengatasi masalah tersebut begitu muncul. Ini lebih efektif daripada catatan kaki generik yang tidak dibaca siapa pun.

Tombol kirim: meter terakhir

Tombol tersebut harus secara jelas menyatakan apa yang diterima pengguna, bukan tindakan teknis yang mereka lakukan. "Terima penawaran saya" memiliki konversi yang lebih baik daripada "Kirim," karena memperkuat janji pada titik tindakan akhir.

Unbounce melaporkan beberapa kasus di mana satu kata saja mengubah hasilnya. Pada portal penyewaan kantor B2B, mengganti "Pesan" dengan "Dapatkan" pada tombol meningkatkan konversi sebesar 38% : kata kerja tersebut akhirnya berbicara tentang apa yang diterima seseorang, bukan tentang apa yang harus dilakukan.

Dari segi desain, empat pengaturan berikut ini penting:

• Tampilan lebar penuh di perangkat seluler, sehingga ibu jari dapat menjangkaunya tanpa perlu membidik.
• Warna yang kontras dengan warna lain di halaman tersebut. Tidak ada "warna terbaik": yang penting adalah kontras dengan lingkungannya, bukan merah atau hijau itu sendiri.
• Tidak pernah dinonaktifkan atau berwarna abu-abu selama formulir belum lengkap, pengguna tidak akan mengerti apa yang kurang. Biarkan mereka mengklik dan menunjukkan kolom yang perlu diisi.
• Status pemuatan setelah mengklik (“Pengiriman sedang berlangsung…”) untuk menghindari pengiriman ganda dan prospek duplikat di CRM Anda.

Optimalisasi desain ini merupakan tambahan dari optimalisasi yang berfokus pada biaya akuisisi. Jika perhatian utama Anda adalah anggaran, artikel kami tentang penurunan biaya per prospek berkat konversi formulir menghubungkan pengaturan ini ke kampanye Anda.

Praktik terbaik untuk desain formulir: kisi audit dalam 10 menit

Berikut tabel yang dijanjikan di awal artikel. Ambil ponsel Anda, buka formulir dalam mode penjelajahan pribadi, dan centang setiap kotak. Setiap "tidak" mewakili satu poin hambatan yang dapat Anda hilangkan minggu ini.

1. Formulir tersebut muat dalam satu kolom di perangkat seluler.
2. Setiap kolom memiliki label yang terlihat di atasnya, yang tetap ditampilkan selama pengisian data.
3. Kolom email menampilkan papan ketik dengan simbol "@" dan tidak menggunakan huruf kapital.
4. Kolom nomor telepon dan kode pos akan membuka papan tombol.
5. Halaman tidak akan diperbesar saat Anda menyentuh suatu kolom (ukuran font minimum 16px).
6. Browser menawarkan pengisian otomatis untuk nama, email, dan nomor telepon.
7. Tidak ada kolom yang secara otomatis mendapatkan fokus saat halaman dimuat.
8. Pada formulir multi-langkah, progres akan ditampilkan ("Langkah X dari Y").
9. Tepian ladang tetap terlihat jelas dalam cahaya maksimal, di luar ruangan.
10. Kesalahan yang disengaja (email tanpa @) akan menampilkan pesan yang jelas di bawah kolom isian, bukan hanya garis merah.
11. Tombol tersebut menjelaskan manfaatnya (“Terima…”, “Dapatkan…”) dan menempati seluruh lebar tombol.
12. Setelah diklik, status pemuatan dan kemudian konfirmasi yang jelas akan ditampilkan.

Skor 10 dari 12 atau lebih tinggi berarti desain Anda mungkin bukan hambatan utama. Di bawah 8, mulailah dengan poin 3, 4, dan 5: ini adalah yang paling cepat diperbaiki dan semuanya memengaruhi pengunjung seluler Anda.

Untuk memulai dari dasar yang sudah memenuhi sebagian besar kriteria ini, telusuri halaman kami templat formulir B2B siap pakai, atau lihat bagaimana tim lain telah melakukannya di studi kasus kami tentang peningkatan tingkat konversi.

Pertanyaan yang Sering Diajukan

Bisakah kita mengganti label dengan teks contoh di kolom-kolom tersebut?

Tidak. Teks contoh (placeholder) akan hilang segera setelah penekanan tombol pertama dilakukan, sehingga pengguna tidak dapat memeriksa apa yang telah mereka masukkan, dan warna abu-abu muda seringkali memberikan kontras yang tidak memadai. Pertahankan label yang terlihat di atas kolom dan gunakan placeholder untuk contoh pemformatan.

Apakah formulir dua kolom benar-benar kurang efisien?

Dalam kebanyakan kasus, ya. Sebuah studi CXL yang melibatkan 702 peserta mengukur tingkat penyelesaian 13% lebih cepat untuk bidang kolom tunggal. Satu-satunya pengecualian yang masuk akal adalah pasangan bidang yang saling terkait, seperti kode pos dan kota, dan hanya pada komputer.

Apakah autofokus harus diaktifkan pada bidang pertama?

Tidak boleh digunakan pada halaman yang berisi apa pun selain formulir. Autofokus menyebabkan halaman bergeser-geser, menghalangi pengguliran keyboard, dan membingungkan pembaca layar. Fitur ini hanya berguna untuk memfokuskan pada judul langkah baru dalam formulir multi-langkah.

Warna apa yang paling bagus untuk tombol formulir?

Tidak ada aturan universal. Yang penting adalah kontras tombol dengan bagian halaman lainnya dan keterbacaan teksnya (minimal 4,5:1). Tombol oranye di situs web berwarna oranye kurang mencolok dibandingkan tombol biru di situs web yang sama.

Apakah formulir multi-langkah selalu menghasilkan konversi yang lebih baik?

Tidak, hanya jika dirancang dengan baik: satu atau dua pertanyaan per layar, pertanyaan pertama yang mudah, kemajuan yang terlihat, dan detail kontak di bagian akhir. Formulir tiga kolom tidak perlu dipisah.

Apakah Anda ingin menerapkan praktik terbaik ini tanpa menyentuh kode? Coba Blastform secara gratis atau pesan demo untuk meninjau formulir Anda saat ini bersama tim kami.