Merancang Tata Letak Formulir: 7 Praktik Terbaik

Diterbitkan: 2022-10-14

Apakah Anda mencari tata letak formulir terbaik untuk meningkatkan formulir kontak Anda?

Merancang tata letak formulir untuk konversi maksimum dapat menjadi rumit jika Anda tidak memiliki banyak pengalaman untuk diandalkan.

Untuk posting ini, kami telah mengumpulkan 7 praktik terbaik untuk membawa desain tata letak formulir Anda ke tingkat berikutnya dan mendapatkan lebih banyak konversi.

Apa Cara Terbaik untuk Mendesain Formulir?

Cara terbaik untuk mendesain formulir adalah dengan memikirkan pengalaman pengguna.

Pengunjung Anda tidak akan merasa ingin mengisi formulir yang panjang dan rumit, terutama jika terlihat menakutkan.

Menggunakan kolom hanyalah salah satu teknik yang dapat Anda gunakan untuk membuat desain formulir Anda lebih menarik. Pada akhirnya, tujuannya adalah untuk menggunakan tata letak formulir yang mendorong pengguna untuk mengisi formulir dalam urutan logis sambil meminimalkan upaya pengguna.

WPForms adalah plugin Pembuat Formulir WordPress terbaik. Dapatkan secara gratis!

Merancang Tata Letak Formulir: Praktik Terbaik untuk Diikuti

Dalam Artikel Ini

  • 1. Tata Letak Kolom Tunggal Tidak Selalu Ideal
  • 2. Cocokkan Tata Letak Formulir dengan Persyaratan Masukan
  • 4. Gunakan Tata Letak Ramah Seluler
  • 5. Gunakan Bentuk Percakapan
  • 6. Jaga Bidang Anda Rata Kiri
  • 7. Gunakan Pesan dan Validasi Kesalahan Sebaris

1. Tata Letak Kolom Tunggal Tidak Selalu Ideal

Formulir satu kolom diyakini secara luas menawarkan tingkat konversi yang lebih baik daripada formulir multi-kolom. Tetapi kenyataannya adalah, tidak ada pendekatan satu ukuran untuk semua untuk membentuk tata letak .

Faktanya, tes A/B konversi bentuk HubSpot menunjukkan bahwa bentuk dua kolom mengkonversi lebih baik daripada bentuk kolom tunggal dalam situasi tertentu.

Misalnya, umumnya tidak baik untuk pengalaman pengguna jika Anda memiliki daftar panjang bidang yang ditumpuk ke dalam satu kolom.

Contoh formulir kolom tunggal di bawah ini memiliki gulir vertikal yang cukup besar (setengah bidang dipotong agar sesuai dengan gambar), jadi kami dapat mengharapkan pengguna mengalami ketidaknyamanan saat mengisi yang ini.

1 col form

Tetapi bentuknya menjadi jauh lebih kompak jika jumlah bidang yang sama diatur dengan rapi menjadi dua atau lebih kolom.

2 cols

Semua bidang dalam formulir dua kolom di atas terlihat pada lipatan yang sama, sehingga lebih nyaman bagi pengunjung untuk mengisinya.

Hal baiknya adalah Anda dapat dengan mudah mengubah tata letak formulir menggunakan bidang Tata Letak WPForms.

form layout field

Jika formulir Anda menggunakan banyak bidang, Anda selalu dapat bereksperimen dengan tata letak yang berbeda untuk menemukan yang dapat mengurangi panjang formulir dan meningkatkan konversi Anda.

2. Cocokkan Tata Letak Formulir dengan Persyaratan Masukan

Saat mendesain formulir dengan tata letak tingkat lanjut, lebar kolom Anda sama pentingnya dengan jumlah kolom yang Anda gunakan.

Misalnya, jika Anda mengharapkan pengguna untuk memasukkan teks terperinci di bidang kotak teks Anda di sebelah kanan, akan lebih masuk akal jika Anda membuat kolom untuk bidang itu lebih lebar.

columns with different widths

Dalam skenario lain di mana kedua sisi formulir Anda memiliki bidang identik yang menerima , Anda dapat menggunakan kolom berukuran sama.

2 cols

WPForms memiliki tata letak yang sangat fleksibel dan mencakup 8 prasetel tata letak yang berbeda untuk dipilih. Dan Anda dapat beralih dari satu tata letak ke tata letak lainnya dengan satu klik.

form layout presets

Setiap tata letak formulir menawarkan manfaat untuk situasi yang berbeda. Ini hanya masalah menggunakan penilaian pemasaran terbaik Anda untuk memilih tata letak yang paling sesuai untuk bidang Anda.

3. Pisahkan Formulir Panjang Dengan Tata Letak Multi-Langkah

Saat Anda memiliki formulir pendek, semua bidang secara alami akan masuk ke dalam satu halaman tanpa masalah.

Tetapi hal-hal menjadi rumit ketika Anda memiliki banyak bidang. Bukan ide yang baik untuk memasukkan semua bidang ke dalam satu halaman jika formulir Anda terlalu panjang.

Sebagai gantinya, Anda dapat membuat formulir yang lebih panjang lebih mudah dikelola jika dibagi menjadi beberapa halaman.

multi step forms

WPForms memungkinkan Anda membuat formulir multi-langkah. Setiap "langkah" dalam formulir ini muncul seketika setelah menekan tombol Berikutnya , sehingga pengguna tidak perlu memuat halaman yang sama berulang kali untuk sampai ke langkah berikutnya. Ini memastikan kenyamanan pengguna yang maksimal.

Plus, formulir ini menyertakan bilah kemajuan yang membantu pengguna melacak kemajuan mereka dan mendorong mereka untuk melanjutkan hingga akhir.

Seperti bidang Tata Letak, formulir multi-langkah menawarkan cara lain untuk mengatasi kelelahan pengguna saat mengisi formulir yang panjang.

Anda bahkan dapat menggabungkan tata letak dua kolom dalam formulir multi-langkah. Jika salah satu halaman formulir Anda lebih panjang dari yang lain, Anda bisa menggunakan tata letak dua kolom untuk bagian itu agar formulir Anda tampak lebih rata dari halaman ke halaman.

2 cols in multi-step

WPForms memiliki banyak fitur berbeda untuk membantu Anda meminimalkan pengabaian formulir. Pada akhirnya, terserah Anda apakah Anda ingin menggunakan tata letak yang berbeda untuk mendapatkan lebih banyak konversi atau hanya menambahkan bilah kemajuan di bagian atas.

4. Gunakan Tata Letak Ramah Seluler

Tata letak formulir yang canggih tampak hebat dan bahkan dapat dikonversi dengan baik di desktop saat digunakan dengan cerdas. Tapi ponsel adalah binatang yang berbeda.

Formulir multi-kolom yang berfungsi sempurna di desktop dapat pecah saat dilihat di ponsel jika Anda tidak hati-hati.

Beberapa pembuat formulir tidak responsif seluler kecuali Anda melakukan upaya ekstra untuk mengubah kode CSS.

mobile responsive design

Untungnya, bahkan formulir multi-kolom paling canggih yang dibuat dengan WPForms dirancang untuk responsif seluler.

Ini berarti formulir akan diciutkan menjadi satu kolom secara otomatis jika perangkat seluler tidak dapat memuat tata letak multi-kolom Anda dengan benar.

Hasilnya, Anda dapat memastikan bahwa pengunjung Anda selalu mendapatkan pengalaman terbaik dan mengisi formulir Anda dengan nyaman, apa pun perangkat yang mereka gunakan.

5. Gunakan Bentuk Percakapan

Formulir percakapan memungkinkan pengguna untuk menjawab satu pertanyaan dalam satu waktu. Tata letak formulir ini bisa sangat berguna saat Anda ingin pengguna fokus pada setiap pertanyaan spesifik dengan gangguan minimal.

Biasanya ide yang baik untuk menggunakan tata letak percakapan untuk survei atau formulir umpan balik.

preview conversational forms

Dengan WPForms, pengunjung dapat mengisi formulir percakapan sepenuhnya menggunakan input keyboard saja, menambahkan banyak kenyamanan ekstra.

6. Jaga Bidang Anda Rata Kiri

Mungkin tergoda untuk menyelaraskan bidang formulir dan konten Anda agar sesuai dengan gaya atau desain tertentu. Kami menyarankan untuk tidak melakukannya, karena kebanyakan orang tidak terbiasa membaca dan berinteraksi dengan konten seperti ini.

Kebanyakan orang membaca dari kiri ke kanan, jadi masuk akal untuk menggunakan perataan kiri dalam banyak kasus.

Hal baiknya adalah semua bidang WPForm rata kiri secara default.

simple form frontend

Selama Anda secara konsisten tetap menggunakan bidang rata kiri, Anda dapat menggunakan tata letak formulir yang lebih kompleks tanpa membingungkan pengunjung.

7. Gunakan Pesan dan Validasi Kesalahan Sebaris

Tidak peduli seberapa baik desain formulir Anda, Anda harus mengharapkan pengguna untuk membuat kesalahan input sesekali.

Akibatnya, pintar untuk menampilkan pesan kesalahan yang dengan jelas menyoroti masalah dan menawarkan panduan untuk memperbaikinya dengan mudah.

WPForms secara otomatis menggunakan pesan kesalahan sebaris yang muncul tepat di bawah bidang yang dimaksud. Hal ini memungkinkan pengunjung untuk memperbaiki kesalahan secara real-time dan secara proaktif mengurangi kebingungan pengguna.

Validation Error

Ada banyak jenis pesan validasi bidang di WPForms yang muncul tergantung pada sifat kesalahan input. Jadi Anda dapat menyebarkan formulir Anda secara bebas dan membiarkan WPForms menangani masalah validasi apa pun.

Selanjutnya, Buat Survei Percakapan

Survei yang menampilkan satu pertanyaan pada satu waktu sangat bagus untuk pengalaman pengguna. Mereka juga mudah diterapkan, menggunakan formulir percakapan WPForms. Berikut ini cara membuat survei yang menampilkan satu pertanyaan dalam satu waktu.

Siap untuk mulai membuat formulir WordPress? Mulailah dengan plugin pembuat formulir WordPress yang paling mudah digunakan hari ini. WPForms Pro menyertakan fitur unggah file gratis dan formulir unggah file gratis dan menawarkan jaminan uang kembali 14 hari.

Buat Formulir WordPress Anda Sekarang

Dan jangan lupa, jika Anda menyukai artikel ini, silakan ikuti kami di Facebook dan Twitter.