Bentuk Kolom Tunggal: Contoh dan Inspirasi

Diterbitkan: 2024-08-19

Apakah Anda ingin formulir Anda disederhanakan sehingga pengguna lebih mungkin untuk mengisi dan mengirimkannya? Bentuk kolom tunggal mungkin merupakan desain yang Anda cari.

Dan jika Anda memerlukan beberapa contoh dan inspirasi, saya siap membantu Anda. Dalam postingan ini, saya berbagi ide dan tip desain untuk membuat formulir kolom tunggal yang telah dikurasi oleh tim kami setelah membuat ratusan formulir dengan pembuat formulir seret dan lepas kami.

Mari kita mulai!

Bentuk Kolom Tunggal: Contoh dan Inspirasi

  • Sekilas tentang Bentuk Kolom Tunggal
  • Kapan Menggunakan Formulir Kolom Tunggal
  • Tips Desain Bentuk Kolom Tunggal
    • Contoh Bentuk Kolom Tunggal yang Efektif
      • Selanjutnya, Lihat Tips Desain Tata Letak Tambahan Ini

      Sekilas tentang Bentuk Kolom Tunggal

      Formulir kolom tunggal adalah formulir yang bidang-bidangnya disusun dalam satu garis vertikal, satu demi satu. Setiap bidang formulir mencakup seluruh lebar wadah formulir, sehingga pengguna bisa fokus pada satu bidang pada satu waktu saat mereka berpindah dari atas formulir ke bawah.

      Berikut adalah beberapa karakteristik utama dari formulir kolom tunggal:

      • Aliran Linier : Bidang disusun dalam urutan yang lugas dan linier, sehingga memudahkan pengguna untuk mengikuti dan melengkapi formulir tanpa kebingungan.
      • Kesederhanaan : Tata letak satu kolom menghilangkan kerumitan yang mungkin timbul pada beberapa kolom, membuat formulir tampak tidak terlalu menakutkan bagi pengguna.
      • Ramah Seluler : Bentuk kolom tunggal secara alami beradaptasi dengan berbagai ukuran layar, terutama perangkat seluler, karena memerlukan lebih sedikit ruang horizontal. Responsif ini menjamin pengalaman pengguna tanpa gangguan di semua perangkat.
      • Fokus dan Kejelasan : Dengan setiap bidang yang mencakup seluruh lebar formulir, pengguna dapat dengan mudah berkonsentrasi pada satu tugas pada satu waktu. Hal ini mengurangi kemungkinan kesalahan dan meningkatkan tingkat penyelesaian.
      • Kemudahan Pemindaian : Perataan vertikal memungkinkan pengguna memindai formulir dengan cepat, yang khususnya bermanfaat untuk formulir yang lebih pendek seperti formulir kontak atau pendaftaran.
      • Kegunaan yang Lebih Baik : Tata letak yang sederhana dan mudah digunakan — mudah dipahami dan diselesaikan — yang dapat menghasilkan tingkat pengiriman yang lebih tinggi.

      Karakteristik ini membuat formulir satu kolom menjadi pilihan ideal untuk berbagai jenis formulir, namun khususnya formulir yang mengutamakan kesederhanaan dan kemudahan penggunaan.

      Buat Formulir Kolom Tunggal Anda Sekarang

      Kapan Menggunakan Formulir Kolom Tunggal

      Bagi pemilik usaha kecil, formulir satu kolom sangat populer karena mudah dirancang dan diterapkan, bahkan tanpa keterampilan teknis tingkat lanjut. Formulir-formulir ini menawarkan konsistensi di berbagai platform, hemat biaya, dan cukup fleksibel untuk digunakan untuk berbagai tujuan. Jadi ini adalah pilihan praktis untuk usaha kecil.

      Tapi, apakah itu selalu menjadi pilihan desain terbaik untuk formulir Anda? Saat menentukan apakah akan menggunakan tata letak kolom tunggal, pertimbangkan faktor-faktor berikut:

      • Panjang Formulir : Gunakan tata letak kolom tunggal untuk formulir yang lebih pendek atau ketika jumlah bidang terbatas, karena ini membuat formulir tetap sederhana dan mudah diisi.
      • Pengguna Seluler : Pilih tata letak kolom tunggal jika audiens Anda terutama mengakses situs Anda melalui perangkat seluler, karena formulir ini memastikan pengalaman pengguna yang responsif di semua ukuran layar.
      • Kebutuhan Aksesibilitas : Jika aksesibilitas adalah prioritas, formulir satu kolom umumnya lebih mudah dinavigasi oleh pengguna penyandang disabilitas. Jadi mereka adalah pilihan yang lebih baik untuk mempromosikan inklusivitas.

      Tahukah kamu? Semua Templat formulir yang ditawarkan gratis kepada pelanggan WPForms Lite adalah formulir kolom tunggal.

      Tips Desain Bentuk Kolom Tunggal

      Salah satu tujuan utama formulir kolom tunggal adalah untuk menawarkan desain sederhana yang dapat diisi dengan mudah oleh pengguna.

      Jika formulir mudah dipahami dan dilengkapi, pengguna cenderung mengirimkan informasi mereka — sehingga menghasilkan tingkat konversi yang lebih tinggi. Tambahkan pelabelan yang jelas, urutan bidang yang logis, dan bidang wajib minimal untuk mengurangi frustrasi pengguna dan meningkatkan pengalaman keseluruhan, yang juga mendorong interaksi berulang.

      Gunakan WPForm

      Semua contoh dan inspirasi yang saya bagikan di sini dibuat dengan WPForms, dan kami menyediakan alat dan fitur yang sangat berguna untuk membantu Anda membuat formulir kolom tunggal terbaik untuk situs web Anda.

      Kami tidak hanya menawarkan ratusan Templat formulir kolom tunggal yang dirancang untuk Anda mulai gunakan segera, namun kami juga mendorong Anda untuk memanfaatkan pembuat formulir seret dan lepas kami untuk membuat formulir kolom tunggal Anda sendiri.

      Dengan opsi satu kolom yang tersedia dalam bidang Tata Letak, Anda bisa dengan cepat mengatur seluruh formulir ke dalam satu kolom, atau menggunakan bidang ini untuk menjaga bagian tertentu tetap linier sambil mengatur bagian lain ke dalam beberapa kolom.

      Selecting the layout field format

      Meskipun demikian, Anda juga dapat mengatur bidang formulir Anda secara linier hanya dengan tidak menggunakan bidang Tata Letak — bidang tersebut akan secara otomatis masuk ke dalam satu kolom saat Anda menyeret dan melepaskannya ke formulir Anda.

      Anda mungkin ingin menyesuaikan ukuran bidang yang tidak sesuai dengan lebar formulir Anda. Atur ukuran bidang ke Besar dan itu akan terjadi!

      Adjusting the field size

      Tahukah kamu? Dengan mengaktifkan add-on Formulir Prospek WPForms, bidang yang digunakan pada formulir ini secara otomatis diformat untuk menjangkau lebar layar yang seragam.

      Kurangi Bidang Formulir

      Secara umum, merupakan ide bagus untuk menghilangkan bidang dan informasi yang tidak perlu yang ada di formulir Anda. Hal serupa juga terjadi pada formulir kolom tunggal. Mengupayakan kesederhanaan adalah salah satu tujuan formulir ini, jadi pertimbangkan untuk mengurangi jumlah bidang (hanya jika dan jika Anda bisa) untuk meningkatkan pengalaman pengguna.

      Tidak tahu bidang mana yang harus dipertahankan dan mana yang harus dibuang? Ingatlah tip berikut:

      • Prioritaskan Informasi Penting : Fokus pada bidang yang benar-benar diperlukan untuk mencapai tujuan formulir, dan hapus bidang apa pun yang tidak berkontribusi langsung terhadap tujuan Anda.
      • Gunakan Logika Bersyarat : Gunakan logika bersyarat untuk hanya menampilkan bidang tertentu bila relevan, menyembunyikan bidang yang tidak perlu kecuali kondisi tertentu terpenuhi.
      • Gabungkan Bidang Terkait : Jika memungkinkan, gabungkan bidang terkait menjadi satu masukan untuk mengurangi jumlah total bidang.
      • Pertimbangkan Upaya Pengguna : Hapus semua bidang yang mengharuskan pengguna memberikan informasi yang dapat Anda peroleh dengan mudah melalui cara lain, seperti menggunakan data lokasi atau pengisian otomatis berdasarkan masukan pengguna.
      • Meminta Informasi Nanti : Jika ada informasi yang tidak segera diperlukan, pertimbangkan untuk memintanya pada tahap selanjutnya atau setelah penyerahan awal, daripada memenuhi formulir awal.

      Optimalkan untuk Perangkat Seluler

      Saya telah berkali-kali menyebutkan pentingnya daya tanggap seluler dalam postingan blog ini sehingga Anda mungkin bosan mendengarnya, tetapi itu benar! Dengan banyaknya pengguna situs web yang mengunjungi situs melalui perangkat seluler, penting untuk mengoptimalkan formulir Anda untuk layar ini.

      Untungnya, formulir kolom tunggal secara alami cocok untuk mobile-friendly. Jadi, jika Anda memiliki formulir di situs Anda atau menyukai templat yang kami tawarkan tetapi menggunakan banyak kolom — cukup masuk ke pembuat formulir seret dan lepas untuk mengedit formulir menjadi satu kolom.

      Kemudian, sebelum Anda mempublikasikan formulir di halaman WordPress Anda, pilih opsi pratinjau seluler untuk melihat seperti apa formulir Anda di perangkat yang lebih kecil.

      Viewing the mobile preview of a form

      Sungguh, mungkin merupakan aturan praktis yang baik untuk melihat pratinjau formulir Anda dengan tampilan seluler sebelum dipublikasikan. Anda mungkin menemukan bahwa formulir multi-kolom Anda mungkin lebih cocok dalam format kolom tunggal.

      Tulis Label dan Deskripsi Bidang yang Jelas

      Dalam setiap pengaturan bidang formulir, Anda memiliki kemampuan untuk menyesuaikan label dan deskripsi, serta opsi lain untuk menyertakan teks instruksional.

      Placeholder text for a Dropdown field

      Label dan instruksi ini harus memandu pengguna dengan lancar dalam mengisi formulir, tanpa secara visual mengacaukan kolom formulir.

      Untuk membantu pengguna menghindari kebingungan dan mengurangi kesalahan, Anda mungkin mempertimbangkan untuk menambahkan teks placeholder ke bidang formulir Anda. Hal ini memberikan pengunjung panduan tentang cara mengisi formulir, baik dengan menawarkan teks instruksi atau menunjukkan contoh masukan yang diharapkan.

      Contoh Bentuk Kolom Tunggal yang Efektif

      Sekarang setelah Anda memiliki gagasan yang lebih baik tentang fungsi dan penggunaan formulir kolom tunggal, mari kita lihat beberapa cara kerja formulir ini.

      Formulir Kontak

      Formulir kontak satu kolom pendek dan manis. Mereka tidak memerlukan banyak bidang untuk berfungsi, dan diatur dalam cara yang menarik secara visual.

      A single column contact form

      Pada formulir kontak di atas, bidang Konten digunakan terlebih dahulu untuk menyertakan arahan bagi pengguna formulir. Bidang Nama telah disederhanakan menjadi satu baris, dan setiap bidang pada formulir ditempatkan dalam satu kolom bidang Tata Letak.

      Jangan lupa bahwa galeri templat kami menawarkan banyak templat formulir kontak seperti ini!

      Formulir Pendaftaran Buletin

      Pendaftaran buletin adalah jenis formulir lain yang biasanya tidak menyertakan banyak bidang dan dibiarkan cukup sederhana. Yang Anda perlukan untuk formulir pendaftaran buletin adalah bidang Nama dan Email.

      A single column newsletter signup form

      Dalam contoh pendaftaran buletin saya, saya membiarkan bidang Nama apa adanya, yang membagi bidang tersebut menjadi nama depan dan belakang (bukan versi sederhana seperti pada formulir kontak di atas). Jadi, bagi pengguna seluler, kedua kotak teks ini akan ditumpuk satu sama lain.

      Meski begitu, ini masih satu kolom, karena saya tidak memanfaatkan bidang Layout sama sekali dengan formulir ini. Namun, saya menyesuaikan ukuran bidang menjadi Besar seperti yang saya sebutkan di tips desain sebelumnya.

      Formulir Pemesanan

      Berikut adalah contoh formulir pemesanan persediaan hewan peliharaan. Meskipun ada opsi kuantitas yang ditampilkan di setiap bidang pilihan produk, formulir ini juga merupakan desain kolom tunggal.

      Single column order form

      Alur linier ini ramah pengguna, sehingga mereka lebih cenderung mengirimkan formulir. Dan bila formulir itu adalah formulir pemesanan, itu berarti pengunjung situs Anda berkonversi dari pembeli menjadi pelanggan!

      Tip Pro Formulir Pemesanan : Susun kolom dalam urutan alami dan berurutan yang selaras dengan proses berpikir pengguna, seperti mengikuti pilihan produk dengan informasi kontak, diikuti dengan detail pengiriman, dan kemudian informasi pembayaran.

      Formulir Umpan Balik

      Formulir umpan balik harus menggunakan desain kolom tunggal jika formulir tersebut mencakup bidang penilaian, survei, jajak pendapat, atau fitur interaktif lainnya yang dapat dengan mudah diisi dengan beberapa kolom.

      Single column feedback form

      Dalam contoh formulir umpan balik ini, saya juga menggunakan logika kondisional untuk menjaga agar satu kolom ini tidak berjalan terlalu lama.

      Jika pengguna memilih opsi Makan di tempat, mereka akan mengisi survei berdasarkan pengalaman tersebut. Jika mereka memilih Pengiriman, pertanyaan berbeda akan diberikan.

      Formulir Pembuatan Prospek

      Formulir prospek ditampilkan satu layar dalam satu waktu, dengan hanya satu atau beberapa bidang dalam satu waktu. Ini adalah contoh unik formulir kolom tunggal, namun saya menyertakannya di sini karena fakta bahwa formulir harus diatur dengan cara ini untuk mengaktifkan fungsionalitas formulir Prospek.

      Lead form with address field

      Seperti yang Anda lihat di atas, beberapa elemen bidang Alamat dipisahkan menjadi bagian-bagian yang berdampingan, namun tata letak keseluruhan formulir adalah satu kolom.

      Formulir Pemesanan Janji Temu

      Sebaiknya atur formulir pemesanan janji temu dalam satu kolom karena banyak pengguna formulir akan menjadwalkan janji temu mereka dari perangkat seluler.

      Single column appointment booking form

      Contoh form di atas memanfaatkan satu kolom sehingga terlihat bagus di ponsel.

      Dan, meskipun bidang Tanggal dan Waktu dapat dimasukkan ke dalam satu bidang dengan kotak berdampingan — yang secara otomatis akan beradaptasi dengan layar seluler — saya telah memisahkannya di sini menjadi 2 bidang. Demikian pula, pilihan metode komunikasi yang disukai dapat diatur secara in-line atau ke dalam kolom yang responsif seluler, namun dibiarkan dalam satu kolom untuk contoh ini.

      Formulir Masuk

      Formulir pada halaman tempat pengguna masuk ke situs web adalah jenis lain yang memungkinkan Anda melihat desain kolom tunggal. Formulir ini sangat disederhanakan karena hanya memerlukan 2 informasi — nama pengguna atau email dan kata sandi.

      WPForms login page

      Itulah halaman login di atas yang kami gunakan di sini di WPForms. Bukankah itu bagus?

      Dan itu menyelesaikannya! Contoh-contoh ini hanya menjelaskan semua alasan dan cara menggunakan formulir kolom tunggal. Faktanya, setiap formulir yang Anda terbitkan di situs Anda bisa menggunakan tata letak kolom tunggal, jika diperlukan. Mereka dijamin ramah seluler, itu sudah pasti!

      Buat Formulir Kolom Tunggal Anda Sekarang

      FAQ Bentuk Kolom Tunggal

      Wah, kita sudah membahas banyak hal! Singkatnya, lihat pertanyaan umum berikut untuk ringkasan sorotannya:

      Apa itu formulir kolom tunggal?

      Bentuk kolom tunggal mempunyai bidang-bidangnya yang disusun dalam satu garis vertikal, satu demi satu. Setiap bidang mengisi seluruh lebar formulir, sehingga pengguna dapat fokus pada satu bidang pada satu waktu saat mereka berpindah dari atas ke bawah formulir.

      Mengapa menggunakan formulir kolom tunggal dalam desain web?

      Formulir kolom tunggal ideal dalam desain web karena menawarkan tata letak yang bersih dan lugas yang mendorong pengalaman pengguna yang positif dengan memandu pengguna melalui setiap bidang dalam alur yang logis dan linier.

      Kesederhanaan ini tidak hanya membuat formulir lebih mudah untuk diisi, terutama pada perangkat seluler, namun juga meningkatkan aksesibilitas dan mengurangi kemungkinan kesalahan pengguna, sehingga menghasilkan tingkat penyelesaian yang lebih tinggi.

      Bagaimana cara membuat formulir kolom tunggal yang efektif?

      Untuk membuat formulir satu kolom yang efektif, mulailah dengan berfokus pada kesederhanaan—hanya sertakan bidang penting untuk menjaga formulir tetap ringkas dan mudah digunakan.

      Dengan WPForms, Anda dapat dengan mudah menarik dan melepas bidang ke dalam satu tata letak kolom, menciptakan alur yang bersih dan teratur. Sesuaikan label, placeholder, dan deskripsi formulir untuk memandu pengguna dengan lancar melalui proses tersebut.

      Pastikan juga untuk memanfaatkan fitur desain responsif WPForms agar formulir Anda terlihat bagus dan berfungsi dengan baik di semua perangkat, terutama perangkat seluler.

      Selanjutnya, Lihat Tips Desain Tata Letak Tambahan Ini

      Tata letak kolom tunggal hanyalah salah satu dari banyak cara berbeda untuk mendesain formulir Anda. Dengan WPForms, opsi penyesuaian hampir tidak terbatas! Namun jika Anda mencari beberapa tips untuk memulai, lihatlah saran praktik terbaik kami untuk desain yang ramah pengguna.

      Siap membuat formulir Anda? Mulailah hari ini dengan plugin pembuat formulir WordPress termudah. WPForms Pro menyertakan banyak templat gratis dan menawarkan jaminan uang kembali 14 hari.

      Jika artikel ini membantu Anda, silakan ikuti kami di Facebook dan Twitter untuk tutorial dan panduan WordPress gratis lainnya.