7 Contoh Formulir Multi-Langkah Luar Biasa Untuk Menginspirasi Anda

Diterbitkan: 2024-03-29

Bisakah formulir online Anda menggunakan peningkatan UX? Contoh formulir multi-langkah ini akan memberi Anda beberapa ide hebat dan juga praktik terbaik. Periksa mereka!

Contoh Formulir Multi-Langkah Terbaik

Perkiraan waktu membaca: 7 menit

Tidak ada yang suka mengisi formulir yang panjang. Bahkan kami dan kami sedang dalam bentuk bisnis.

Namun hampir setiap situs web memerlukan formulir, baik untuk mendaftar buletin, melakukan pembayaran, atau menghubungi layanan pelanggan.

Jadi, sebagai pembuat situs, bagaimana kita dapat membuat pengisian formulir menjadi lebih mudah sambil tetap mengumpulkan informasi yang kita perlukan?

Dapatkan Formulir Lebih Baik GRATIS!

Jawabannya adalah desain formulir multi-langkah!

Daripada membombardir orang-orang dengan semua pertanyaan kami sekaligus, kami akan menyebarkannya ke beberapa halaman atau langkah. Hal ini memberikan pengalaman pengguna yang jauh lebih baik, dan kami masih secara diam-diam meminta pengguna untuk mengisi kolom formulir sebanyak mungkin.

Sekarang, mari kita lihat lebih dekat tujuh contoh formulir multi-langkah fantastis dari seluruh web dan bagikan kesimpulan kami sehingga Anda dapat maju dan menaklukkan tingkat konversi!


  • Kapan menggunakan formulir multi-langkah (dan kapan tidak)
  • Contoh formulir multi-langkah terbaik
    • Kunci desain formulir multi-langkah yang baik
    • Siap membuat formulir multi-langkah Anda sendiri?

    Kapan menggunakan formulir multi-langkah (dan kapan tidak)

    Banyak situasi yang sesuai untuk menggunakan formulir multi-langkah, termasuk:

    • Lamaran pekerjaan
    • Tes atau ujian online
    • Formulir pendaftaran dan pendaftaran
    • Kuis dan magnet utama
    • Penyihir orientasi
    • Permintaan penawaran harga

    Dan itu hanya di luar pikiran kita. Anda benar-benar dapat menggunakan desain formulir multi-halaman untuk semuanya.

    Tapi haruskah Anda melakukannya?

    Hanya karena Anda bisa, bukan berarti Anda harus melakukannya . Pepatah ini berlaku untuk hampir semua hal dalam hidup, dan ternyata juga berlaku untuk pembentukan bentuk!

    Anda mungkin sebaiknya tidak menggunakan formulir multi-langkah jika formulir Anda sangat pendek dan hanya memiliki beberapa bidang .

    Contoh popup modal bootstrap dari formulir pendaftaran buletin

    Akan aneh jika memisahkan formulir berlangganan buletin dasar yang hanya menanyakan nama, alamat email, dan nomor telepon. Itu menambahkan klik yang tidak perlu. Dan semakin banyak klik yang diperlukan untuk melengkapi formulir Anda, semakin besar kemungkinan Anda kehilangan pengguna sebelum mereka menekan "Kirim".

    Namun formulir sederhana bukan satu-satunya yang mendapat manfaat karena berada dalam satu halaman. Beberapa bentuk yang lebih kompleks juga bisa.

    Misalnya, Sephora memiliki formulir satu langkah di halaman checkoutnya. ️ Mengingat betapa besarnya perusahaan ini, mereka pasti telah melakukan penelitian dan menemukan bahwa pelanggan mereka lebih suka menyimpan semuanya pada halaman yang sama.

    Mereka telah menggunakan beberapa elemen desain UX yang cerdas untuk membuat formulir tampak lebih pendek dan, membatasi gangguan — serta mengurangi pengabaian keranjang.

    Contoh halaman checkout Sephora dengan desain formulir satu langkah

    Jadi, jawaban apakah akan menggunakan formulir multi-langkah atau satu halaman bergantung pada kombinasi akal sehat dan data yang kuat.

    Anda mengenal pengguna Anda lebih baik daripada orang lain. Jangan takut untuk menggali statistik dan menganalisis hasil survei Anda untuk mencari tahu mana yang terbaik bagi mereka!

    Contoh formulir multi-langkah terbaik

    1. Airbnb - Formulir pendaftaran pengguna

    Contoh desain formulir multi langkah yang bagus

    Di Airbnb, membuat akun dan melengkapi profil Anda mungkin lebih mudah dibandingkan memilih tempat liburan berikutnya.

    Bentuknya ramah pengguna, dengan desain yang berfungsi baik di perangkat apa pun. Tapi itu bukan hanya desainnya. Salinan tersebut juga menawarkan dorongan lembut untuk melanjutkan langkah-langkah tersebut, sekaligus memberi tahu Anda bahwa Anda dapat melewati langkah mana pun dan kembali lagi nanti.

    Satu baris kecil itu menghilangkan banyak tekanan bagi pengguna pertama kali.

    Mengapa kami menyukainya:

    • Desain formulir multi-langkah yang ramah seluler dan responsif
    • Navigasi yang mudah dengan tombol kembali dan opsi untuk melewati
    • Indikator kemajuan
    • Salinan yang cerdas dan efisien

    2. N26 - Pembuatan rekening bank

    Formulir multi-langkah yang bersih dan modern untuk perbankan online

    N26 mempertahankan bentuknya sesuai kebutuhan tanpa terasa dingin. Bukankah menyenangkan bila bank menginvestasikan sedikit waktu dan tenaga untuk membuat nasabahnya bahagia?

    Formulir responsif ini terlihat menarik baik Anda menggunakan ponsel atau desktop dan memandu Anda dengan lancar melalui tugas yang membosankan namun penting dalam membuka rekening bank.

    Ini menjabarkan semua langkah di awal, jadi tidak ada kejutan. Dan opsi untuk mengganti mode tampilan adalah sentuhan bagus yang meningkatkan pengalaman pengguna.

    Mengapa kami menyukainya:

    • Indikator kemajuan
    • Hapus daftar langkah
    • Navigasi yang mudah
    • Opsi mode terang / mode gelap
    • Logika bersyarat untuk opsi berdasarkan negara tempat tinggal

    3. Ubersuggest - Magnet timah

    Contoh formulir multi-langkah untuk Ubersuggest oleh Neil Patel

    Neil Patel, raja SEO dan pemasaran digital, berhasil mengalahkannya (seperti biasa) dengan formulir pembuatan prospek halaman arahan ini.

    Tata letak formulir kuis multi-langkah ini mengatasi kekacauan tanpa membuat Anda merasa tersesat atau sendirian. Neil siap memandu Anda, dengan penjelasan yang meyakinkan dan alasan yang jelas di balik setiap pertanyaan. Sebagai imbalannya, agensinya mendapatkan banyak sekali prospek berkualitas!

    Mengapa kami menyukainya:

    • Desain bersih dan minimalis
    • Indikator kemajuan
    • Hapus opsi formulir
    • Format formulir percakapan satu pertanyaan pada satu waktu
    • Wajah ramah dan penjelasannya

    4. Stripe - Pendaftaran akun dan orientasi pengguna

    Formulir orientasi bergaris

    Contoh formulir multi-langkah dari Stripe ini membantu Anda mengatur akun Anda tanpa kerumitan sambil tetap menawarkan kepastian dan umpan balik yang Anda inginkan dan butuhkan.

    Sejak awal, Anda dapat mengetahui bahwa Anda berada di tangan yang tepat dengan formulir yang ditata dengan cerdas, mencantumkan dengan jelas untuk siapa layanan tersebut, dan menyimpan semua informasi keuangan penting dengan aman.

    Mengapa kami menyukainya:

    • Umpan balik di setiap langkah
    • Mengingatkan pengguna akan manfaat layanan
    • Bukti sosial
    • Desain ramping dan sederhana

    5. Biasa - Kuis produk

    Contoh formulir multi-langkah biasa untuk rekomendasi produk perawatan kulit

    Pembuat rejimen The Ordinary lebih terasa seperti mengobrol dengan spesialis perawatan kulit atau pembelanja pribadi daripada formulir multi-langkah. Tapi hanya itu saja, sebuah bentuk!

    Dengan mengajukan pertanyaan tertutup dan memberi mereka opsi langsung seperti penggeser, Anda dapat melengkapi formulir dalam waktu singkat dan tanpa banyak usaha. Dan setelah selesai, Anda dapat mengklik untuk langsung menambahkan produk yang disarankan ke keranjang Anda.

    Andai saja semua pengalaman berbelanja semudah dan semenyenangkan ini!

    Mengapa kami menyukainya:

    • Saatnya mengisi formulir yang tertera pada langkah pertama
    • Rekomendasi produk yang dipersonalisasi
    • Logika bersyarat
    • Format percakapan
    • Desain bentuk minimalis sesuai dengan misi merek

    6. Paspor Kecil - Kuis produk dan pembayaran

    Contoh formulir multi halaman kotak langganan Paspor Kecil

    Little Passports mengubah pengisian formulir menjadi petualangan memilih sendiri yang menyenangkan. Proses checkout mereka memiliki beberapa langkah yang menarik Anda, menampilkan perlengkapan berbeda untuk memicu rasa ingin tahu anak-anak. Setiap bagian formulir dirancang untuk membuat pemilihan kotak berlangganan sama menariknya dengan mendapatkannya.

    Mengapa kami menyukainya:

    • Personalisasi
    • Logika bersyarat
    • Indikator kemajuan
    • Desain yang menyenangkan dan penuh warna

    7. Geico - Permintaan penawaran

    Contoh formulir penawaran asuransi Geico

    Formulir penawaran asuransi multi-langkah Geico membuat semuanya jelas, ramah, dan cepat. Maskot tokek kecil mereka yang ramah hadir untuk menyemangati Anda saat Anda mengeklik pilihan Anda. Tiba-tiba, urusan asuransi menjadi tidak terlalu menakutkan!

    Formulir ini cepat dan bermanfaat. Dan pada akhirnya, Anda mendapatkan penawaran harga instan sementara teman reptil kami mengumpulkan petunjuk yang memenuhi syarat untuk ditindaklanjuti nanti.

    Mengapa kami menyukainya:

    • Tombol radio besar dengan gambar untuk aksesibilitas
    • Desain responsif
    • Produk atau layanan yang dipersonalisasi
    • Pilihan produk sebelum meminta informasi pribadi

    Kunci desain formulir multi-langkah yang baik

    Jadi, apa yang bisa kita pelajari dari contoh-contoh ini?

    Jika kita melihat kesamaannya, beberapa praktik terbaik UX multi-langkah menjadi jelas:

    • Indikator kemajuan - bilah kemajuan, garis akar, langkah bernomor, perkiraan waktu, dll.
    • Umpan balik bidang yang jelas dan ramah - bidang yang wajib diisi, pesan kesalahan, pesan konfirmasi
    • Personalisasi - bidang dinamis dan rekomendasi yang disesuaikan
    • Desain responsif - formulir harus terlihat bagus dan mudah digunakan pada layar ukuran apa pun
    • Batasi pertanyaan terbuka - gunakan dropdown, tombol, penggeser, dan tombol alih alih-alih kolom teks

    Kami juga mencoba memasukkan elemen ini ke dalam formulir di situs kami. Beginilah hasil formulir pembayaran multi-halaman kami. Bagaimana menurutmu? Jangan ragu untuk mencobanya sendiri di sini.

    Formidable Forms formulir pembayaran multi-langkah checkout online dengan indikator kemajuan dan bukti sosial

    Siap membuat formulir multi-langkah Anda sendiri?

    Sekarang Anda sudah penuh dengan pengetahuan dan inspirasi, inilah waktunya untuk bertindak! Namun bagaimana Anda mengubah bentuk multi-langkah mengagumkan yang ada dalam pikiran Anda menjadi kenyataan?

    Anda mengambil plugin kami, tentu saja!

    Kami mungkin sedikit bias, tetapi Formidable Forms benar-benar merupakan pembuat formulir multi-langkah terbaik untuk WordPress. Ini memungkinkan Anda menambahkan dan menyesuaikan bilah kemajuan, tombol formulir, dan 30+ jenis bidang formulir.

    Formulir yang Tangguh memungkinkan kita membuat formulir multi-langkah yang rumit dengan mudah. Fitur Formulir Percakapan memungkinkan kami memandu pelanggan melalui apa yang tampak berlebihan di satu halaman. Lori S.

    Anda bahkan dapat membuat formulir percakapan, kuis rekomendasi produk, kalkulator, dan survei dengan Formidable Forms. Ya, Anda mendapatkan semua itu dalam satu plugin!

    Jadi klik di bawah ini untuk mendapatkan pembuat formulir WordPress Anda dan mulai membuat karya multi-langkah Anda.

    Mulailah dengan Formulir yang Tangguh!

    Coba Formidable Pro tanpa risiko dengan jaminan uang kembali 14 hari kami, atau mulai dengan plugin pembuat formulir gratis kami.

    Untuk kesenangan formulir online lainnya, ikuti kami di Facebook, Twitter, dan YouTube. Sampai Lain waktu!


    Pelajari selengkapnya tentang desain formulir multi-langkah