Cara Membuat Formulir Multi-Langkah WordPress dengan Progress Bar

Rifat Tutorial WordPress Jun 21, 2023

Membuat formulir yang menarik dan mudah digunakan adalah aspek penting dari kesuksesan situs web mana pun, terutama dalam hal mengumpulkan informasi berharga atau menghasilkan arahan. Salah satu pendekatan efektif untuk meningkatkan pengalaman pengguna dan meningkatkan tingkat penyelesaian formulir adalah dengan menerapkan formulir multi-langkah dengan bilah kemajuan. Desain formulir dinamis ini memecah proses yang panjang atau rumit menjadi langkah-langkah yang dapat dikelola, memandu pengguna melalui setiap tahap sambil memberikan indikasi yang jelas tentang kemajuan mereka.

Jika Anda adalah pengguna WordPress dan tertarik untuk menggabungkan fitur formulir canggih ini ke situs web Anda, Anda berada di tempat yang tepat. Dalam panduan ini, kami akan memandu Anda melalui proses pembuatan formulir multi-langkah dengan progress bar menggunakan kemampuan serbaguna WordPress.

Dengan memanfaatkan fleksibilitas WordPress dan ekosistem plugin dan alatnya yang luas, Anda dapat dengan mudah membuat dan menyesuaikan formulir multi-langkah agar sesuai dengan kebutuhan spesifik Anda. Apakah Anda ingin mengumpulkan umpan balik pengguna, mengumpulkan informasi pelanggan, melakukan survei, atau memfasilitasi pembelian online, formulir multi-langkah dengan bilah kemajuan dapat secara signifikan meningkatkan pengalaman pengguna dan meningkatkan tingkat penyelesaian formulir.

Pentingnya Formulir Multi-langkah

Formulir multi-langkah telah mendapatkan popularitas yang signifikan dalam desain dan pengembangan web karena keefektifannya dalam meningkatkan pengalaman pengguna dan meningkatkan tingkat konversi. Tidak seperti formulir satu halaman tradisional, formulir multi-langkah memecah proses kompleks menjadi bagian yang lebih kecil dan lebih mudah dikelola, memandu pengguna melalui serangkaian langkah berurutan.

Buat Situs Web Luar Biasa

Dengan Elementor pembuat halaman gratis terbaik

Mulai sekarang

Alasan utama mengapa formulir multi-langkah menjadi begitu populer adalah kemampuannya untuk meningkatkan tingkat keterlibatan dan penyelesaian pengguna. Dengan menyajikan informasi secara terstruktur dan progresif, bentuk-bentuk ini mengurangi kelebihan kognitif dan menjadikan keseluruhan pengalaman lebih intuitif dan mudah digunakan. Pengguna cenderung merasa tidak terlalu kewalahan saat menghadapi formulir yang panjang dan mengintimidasi, menghasilkan tingkat penyelesaian yang lebih tinggi dan pengurangan pengabaian formulir.

Selain itu, formulir multi-langkah memberikan peluang bagus untuk mengumpulkan informasi yang lebih detail dan akurat dari pengguna. Dengan membagi formulir menjadi beberapa bagian logis, masing-masing berfokus pada detail spesifik, pengguna lebih cenderung memberikan respons yang akurat dan melengkapi seluruh formulir. Ini mengarah pada kualitas data yang lebih baik dan memungkinkan bisnis untuk membuat keputusan yang lebih tepat berdasarkan informasi yang dikumpulkan.

Selain manfaat pengalaman pengguna, formulir multi-langkah dapat memengaruhi tingkat konversi secara signifikan. Dengan memecah proses konversi menjadi langkah-langkah yang lebih kecil, bisnis dapat secara strategis memposisikan ajakan bertindak (CTA) yang menarik di akhir setiap bagian. Pendekatan ini memungkinkan penargetan yang lebih baik, karena CTA dapat disesuaikan agar selaras dengan kemajuan dan niat pengguna. Selain itu, dengan menyediakan bilah atau indikator progres, pengguna termotivasi untuk melanjutkan langkah-langkah tersebut, sehingga meningkatkan kemungkinan konversi yang berhasil.

Mempertimbangkan pentingnya formulir multi-langkah dalam meningkatkan pengalaman pengguna, meningkatkan tingkat penyelesaian, dan meningkatkan tingkat konversi, sangat penting bagi individu yang terlibat dalam pengembangan web, khususnya di WordPress, untuk memiliki pengetahuan dan keterampilan untuk membangun formulir tersebut. Mampu membuat formulir multi-langkah dengan bilah kemajuan di WordPress memberdayakan pengembang dan pemilik situs web untuk mengoptimalkan formulir online mereka, menghasilkan kepuasan pengguna yang lebih tinggi, peningkatan konversi, dan pada akhirnya, hasil bisnis yang lebih baik.

Bangun Formulir Multi-Langkah dengan Bilah Kemajuan di WordPress

Saat membuat formulir multi-langkah di WordPress, memanfaatkan salah satu plugin WordPress yang tersedia adalah solusi paling sederhana. Di antara banyak opsi, WPForms menonjol sebagai alat utama untuk pekerjaan itu, menjadikannya plugin formulir kontak WordPress terbaik di pasar.

Terkenal karena pendekatannya yang ramah bagi pemula, WPForms telah berhasil di lebih dari 5 juta situs web. Plugin yang kuat ini memberdayakan Anda untuk membuat formulir WordPress untuk berbagai tujuan dengan mudah, menghilangkan kebutuhan akan pengkodean. Apakah Anda mencari formulir pendaftaran yang mudah digunakan, formulir pendaftaran, formulir survei, formulir unggah file, formulir pemesanan, atau formulir aplikasi, WPForms siap membantu Anda.

Berkat pembuat formulir seret-dan-lepas yang intuitif dan berbagai templat formulir siap pakai, membuat formulir yang disesuaikan menjadi sangat mudah. Selain itu, WPForms menawarkan add-on yang nyaman untuk pemroses pembayaran populer seperti Stripe dan PayPal, memungkinkan penerimaan pembayaran tanpa hambatan di toko WooCommerce Anda.

Selain itu, WPForms terintegrasi dengan mulus dengan plugin pembuat halaman WordPress terkemuka seperti Elementor, Divi, dan SeedProd. Hal ini memastikan tampilan formulir bebas repot di bagian depan situs web Anda, menghilangkan kebutuhan akan pengkodean manual atau CSS.

Sementara versi gratis WPForms cukup untuk formulir kontak dasar, versi WPForms Pro membuka fungsi lanjutan. Dengan memutakhirkan ke WPForms Pro, Anda mendapatkan akses ke fitur-fitur seperti logika kondisional, formulir survei, templat formulir lanjutan, dan, yang terpenting, formulir multi-langkah—penting untuk tutorial kami.

Untuk panduan ini, kami akan menggunakan versi WPForms Pro , dilengkapi dengan semua alat yang diperlukan untuk membuat formulir multi-langkah di WordPress dengan mudah.

Buat Formulir Multi-Langkah Baru di WordPress

Setelah berhasil menginstal plugin WPForms, Anda dapat dengan mudah mengakses fitur-fiturnya dengan menavigasi ke bagian WPForms » Add New di dasbor WordPress Anda. Tindakan ini akan segera menampilkan halaman Templat formulir, memberi Anda pilihan beragam jenis formulir untuk dipilih.

Memisahkan formulir apa pun menjadi formulir multi-langkah dapat dilakukan dengan mudah menggunakan plugin WPForms. Untuk menjelaskan proses ini, kami akan fokus pada mengubah formulir kontak.

Mulailah dengan menetapkan nama ke formulir yang baru dibuat, lalu lanjutkan dengan memilih templat "Formulir Kontak Sederhana".


Setelah dipilih, WPForms akan melanjutkan untuk memuat template yang ditunjuk ke pembuat formulir drag-and-drop yang intuitif.

Setelah diamati, ternyata formulir kontak dasar sudah memasukkan bidang formulir untuk Nama, Email, dan Komentar atau Pesan. Dengan menggunakan fungsionalitas klik, seret, dan lepas, Anda memiliki fleksibilitas untuk mengubah urutan bidang ini sesuai dengan preferensi Anda.

Selain itu, proses penambahan bidang teks tambahan ke formulir menjadi mudah. Hal ini dapat dilakukan dengan menggunakan panel sebelah kiri untuk memilih bidang teks yang diinginkan dan kemudian menempatkannya di sisi kanan formulir. Penunjukan bidang wajib dapat dilakukan dengan memilih bidang dan menyesuaikan pengaturan yang sesuai.

Setelah puas dengan pengaturan dan pemilihan bidang, silakan lanjutkan untuk menyimpan modifikasi dan lanjutkan ke langkah berikutnya.

Pisahkan Formulir Anda menjadi Beberapa Langkah

Untuk mempartisi formulir Anda menjadi tahapan yang berbeda, Anda perlu menggunakan bidang formulir Page Break.

Untuk melakukannya, lanjutkan ke bagian Fancy Fields yang terletak di panel sebelah kiri, dan lanjutkan untuk memilih bidang Page Break. Selanjutnya, seret bidang yang dipilih ke lokasi yang diinginkan dalam formulir Anda.

Untuk membagi formulir Anda pada titik tertentu, Anda memiliki opsi untuk menempatkan Page Break secara strategis.

Harap ikuti prosedur yang disebutkan di atas untuk menerapkan jeda halaman yang diinginkan dalam formulir Anda. Selanjutnya, Anda dapat menambah bagian masing-masing dengan memasukkan bidang tambahan untuk menyelesaikan proses pembuatan formulir.

WPForms memungkinkan Anda fleksibilitas untuk menghasilkan beberapa halaman formulir sesuai dengan kebutuhan Anda. Meskipun demikian, disarankan untuk berhati-hati dan menghindari membanjiri pengunjung situs web Anda dengan terlalu banyak bagian formulir. Direkomendasikan untuk memasukkan hanya permintaan informasi penting, karena rincian tambahan dapat dikumpulkan kemudian pada tahap selanjutnya.

Sesuaikan Multi-Halaman Anda Dari Bilah Kemajuan

Untuk memenuhi persyaratan bisnis dan situs web khusus Anda, Anda dapat mempertimbangkan untuk menerapkan bilah kemajuan pada formulir Anda. Indikator kemajuan melayani tujuan untuk memberi tahu pengguna tentang tahap saat ini mereka berada di dalam formulir dan memperkirakan sisa waktu yang diperlukan untuk menyelesaikannya.

Dengan menampilkan kemajuan kepada pengguna, Anda memberi mereka gambaran visual tentang kemajuan mereka, yang dapat memotivasi mereka secara signifikan untuk menyelesaikan dan mengirimkan formulir. Pendekatan ini secara efektif mengatasi kecenderungan umum individu untuk menghindari meninggalkan tugas yang tidak lengkap.


WPForms menawarkan tiga bilah kemajuan berbeda yang dapat dimasukkan ke dalam formulir multi-bagian Anda. Opsi ini meliputi:

  1. Konektor: Gaya ini menyerupai bilah remah roti, yang secara visual menghubungkan berbagai bagian formulir Anda melalui serangkaian bilah yang menampilkan judul halaman yang sesuai.
  2. Lingkaran: Alternatif ini menampilkan lingkaran individual, masing-masing diberi label dengan judul langkah formulir masing-masing. Pengguna dapat dengan mudah melacak kemajuan mereka dengan mengamati lingkaran yang terisi.
  3. Bilah Kemajuan: Dengan opsi ini, bilah berwarna sebagian digunakan untuk menggambarkan kemajuan pengguna dalam formulir Anda. Alat bantu visual yang dinamis ini memberikan indikasi yang jelas tentang posisi mereka saat ini.

Untuk mengaktifkan dan menyesuaikan bilah kemajuan pada formulir multi-langkah Anda, cukup klik bagian Hentian Halaman Pertama. Dari sana, Anda dapat mengakses pengaturan yang diperlukan untuk memodifikasi tampilannya sesuai dengan preferensi Anda.

Setelah mengakses pembuat formulir, panel baru akan terlihat, memungkinkan Anda memilih gaya dan warna pilihan Anda untuk indikator progres.

Jika Anda memilih gaya indikator kemajuan Penghubung atau Lingkaran, Anda akan memiliki kemampuan untuk mengubah judul halaman, sehingga menunjukkan kepada pengguna tahap mana dari formulir mereka saat ini.

Alternatifnya, gaya Bilah Kemajuan menyediakan bilah kemajuan konvensional yang memandu pengguna melalui langkah-langkah yang tersisa yang diperlukan untuk melengkapi formulir.

Untuk mempersonalisasi judul halaman berikutnya dan tombol Berikutnya, yang mengarahkan pengguna ke bagian selanjutnya dari formulir, cukup klik bagian Hentian Halaman yang disisipkan selama penyetelan awal formulir. Opsi untuk penyesuaian akan ditampilkan di panel sebelah kiri pembuat formulir.


Untuk memberi pengguna opsi untuk menavigasi ke halaman sebelumnya, dimungkinkan untuk memasukkan tombol "Sebelumnya". Hal ini dapat dicapai dengan mengaktifkan kotak centang "Tampilkan Sebelumnya" dan selanjutnya menyesuaikan judul tombol agar sesuai dengan preferensi Anda.

Setelah Anda menyelesaikan penempatan jeda halaman dan indikator kemajuan sesuai keinginan Anda, disarankan untuk melanjutkan dengan memilih tombol "Simpan".

Konfigurasikan Pengaturan Formulir Multi-Langkah Anda

Dalam fase khusus ini, kami akan memeriksa opsi konfigurasi untuk formulir multi-bagian Anda. Awalnya, lanjutkan dengan mengklik tab "Pengaturan" dan kemudian memilih opsi "Umum".

Di dalam antarmuka ini, Anda memiliki kemampuan untuk menetapkan nama baru dan memberikan deskripsi untuk formulir Anda. Selain itu, penyesuaian tombol kirim juga dapat dilakukan, bersama dengan opsi untuk mengaktifkan fungsi anti-spam seperti Google Recaptcha.

Selain itu, Anda memiliki opsi untuk mengaktifkan pengaturan AJAX dan menonaktifkan penyimpanan informasi untuk memastikan kepatuhan terhadap peraturan GDPR.

Setelah Anda menyesuaikan pengaturan yang Anda inginkan dengan memuaskan, harap ingat untuk menyimpan perubahan Anda dengan mengeklik tombol "Simpan".

Siapkan Notifikasi Formulir Anda

Silakan navigasikan ke bagian Notifikasi yang terletak di sisi kiri halaman pengaturan di dalam WordPress. Di bagian ini, Anda akan menemukan opsi untuk mengonfigurasi notifikasi untuk formulir multi-halaman Anda.

Pemberitahuan mengacu pada pesan email yang dikirimkan kepada Anda setiap kali pengguna mengirimkan formulir di situs web Anda. Secara default, WPForms mengaktifkan notifikasi. Namun, jika Anda memilih untuk tidak menerima notifikasi email, Anda dapat memilih opsi "Nonaktif" dari menu tarik-turun.

Selain itu, Anda memiliki opsi untuk menggunakan Tag Cerdas, yang memungkinkan Anda mengirim email ke alamat email yang disediakan setiap pengguna setelah pengiriman formulir. Fitur ini dapat bermanfaat untuk meyakinkan pengguna bahwa tanggapan mereka telah diterima. Khususnya untuk formulir dengan beberapa tahapan, pengguna mungkin sangat menghargai konfirmasi ini, karena menghilangkan ketidakpastian tentang apakah pengiriman formulir mereka berhasil.

Setelah Anda mengonfigurasi pemberitahuan formulir yang Anda inginkan, ingatlah untuk mengeklik tombol Simpan untuk menerapkan perubahan.

Pesan konfirmasi

Langkah selanjutnya melibatkan pemilihan pesan konfirmasi untuk formulir multi-tahap Anda. Untuk mengakses opsi, arahkan ke halaman Pengaturan dan klik judul Konfirmasi.

Konfirmasi formulir berfungsi untuk memberi tahu pengguna bahwa pengiriman formulir mereka berhasil dan memberikan instruksi mengenai tindakan selanjutnya yang perlu mereka lakukan.

Di dalam WPForms, ada tiga jenis konfirmasi yang tersedia:

  1. Pesan: Ini adalah jenis konfirmasi default, yang menampilkan pesan sukses langsung setelah pengiriman formulir pengguna.
  2. Tampilkan Halaman: Dengan menggunakan jenis konfirmasi ini, pengguna akan diarahkan ke halaman lain di situs web Anda, seperti halaman terima kasih.
  3. Buka URL (Pengalihan): Dengan menggunakan pesan konfirmasi ini, Anda dapat mengalihkan pengguna ke halaman di situs web terpisah dari milik Anda.

Sekarang, lanjutkan untuk memilih jenis konfirmasi pilihan Anda dari menu tarik-turun yang disediakan dan lanjutkan untuk menyesuaikannya dengan menambahkan pesan atau URL yang Anda inginkan.

Setelah Anda puas dengan tampilan dan pengaturannya, silakan klik tombol Simpan.

Tambahkan Formulir Multi-Langkah ke WordPress

Setelah membuat formulir multi-langkah Anda, langkah selanjutnya adalah memasukkannya ke situs web WordPress Anda. WPForms menawarkan fleksibilitas untuk menambahkan formulir Anda ke berbagai bagian situs web Anda, seperti halaman, posting, sidebar, atau bahkan di dalam tema WordPress Anda dengan menggunakan kode pendek.

Pendekatan yang paling umum digunakan adalah menyematkan formulir di dalam posting atau halaman WordPress. Sekarang mari kita jelajahi proses untuk mencapai ini.

Untuk memulai, buat posting atau halaman baru di WordPress atau pilih yang sudah ada dan klik opsi "Edit". Setelah Anda berada di dalam editor WordPress, klik ikon plus (+) untuk menambahkan blok konten baru.

Gulir ke bawah menu popup hingga Anda mencapai bagian "Widget", lalu klik widget WPForms untuk menyematkan blok ke WordPress.

Setelah itu, klik menu tarik-turun dan pilih formulir multi-langkah yang Anda inginkan.

WPForms akan menyajikan formulir di dalam editor WordPress, memungkinkan Anda untuk melihat tampilannya sebelum diterbitkan.

Terakhir, klik "Publikasikan" atau "Perbarui" untuk menampilkan formulir Anda. Berikut adalah contoh bagaimana itu akan ditampilkan kepada pengguna Anda:

Membungkus


Formulir multi-langkah telah terbukti menjadi cara yang efektif untuk meningkatkan konversi formulir di ranah WordPress. Dengan membagi formulir ke dalam tahapan yang berbeda, pengguna diberikan pengalaman yang lebih mudah didekati dan dikelola, sehingga mengurangi perasaan kewalahan dan meningkatkan kemungkinan penyelesaian formulir. Penelitian empiris telah menunjukkan peningkatan substansial dalam tingkat konversi dengan penerapan formulir multi-langkah, khususnya ketika formulir terdiri dari lebih dari tiga bidang.

Kesimpulannya, kami percaya bahwa artikel ini telah membekali Anda dengan pengetahuan yang diperlukan untuk membuat formulir multi-langkah di WordPress. Yang lebih luar biasa lagi adalah Anda dapat mencapai ini tanpa perlu mempelajari satu baris kode pun! WPForms , plugin WordPress yang terkenal, menyediakan platform yang ramah pengguna untuk membuat formulir multi-langkah dengan mudah, menjadikan prosesnya lebih mulus dan nyaman.

Divi WordPress Theme