Cara Menambahkan Formulir Multi Langkah Di WordPress Dalam 5 Langkah Mudah

Tahukah Anda bahwa mengubah bentuk WordPress satu langkah menjadi bentuk multi langkah WordPress dapat meningkatkan konversi Anda hampir 60% ? Bahkan, dalam beberapa kasus, tingkat konversi bisa mencapai 300% .

Ya. Karena saat ini, orang terlalu sibuk dan memiliki rentang perhatian yang pendek. Selain itu, jika Anda meminta mereka untuk mengisi formulir panjang satu langkah, kemungkinan besar mereka akan meninggalkan situs web Anda, meninggalkan formulir yang tidak lengkap.

Namun, Anda dapat mengubah skenario ini dengan menggunakan formulir multi langkah untuk situs WordPress Anda. Tapi pertanyaannya adalah bagaimana?

Nah, itulah mengapa saya di sini untuk menunjukkan kepada Anda panduan langkah demi langkah tentang cara menambahkan formulir multi langkah di WordPress.

Teruslah membaca untuk mengetahui bagaimana Anda dapat dengan mudah membuat formulir multi langkah di situs WordPress hanya dalam beberapa menit….

Apa itu Formulir Multi Langkah?

Yah, seperti namanya, ini adalah formulir dengan beberapa langkah di mana bidang pertanyaan/masukan dibagi menjadi beberapa langkah berbeda daripada memasukkan semuanya hanya dalam satu langkah. Jika Anda mencari definisi, berikut adalah cara HubSpot mendefinisikan formulir multi langkah.

Formulir multi-langkah adalah formulir panjang yang dipecah menjadi beberapa bagian. Mereka terbiasa membuat formulir panjang tidak terlalu menakutkan dan menakutkan.

– Hubspot

Formulir multi-langkah pada dasarnya adalah pengganti formulir panjang dengan terlalu banyak bidang input. Jika Anda memiliki formulir yang relatif lebih kecil, Anda dapat menggunakan formulir satu langkah.

Sekarang setelah Anda mengetahui apa itu formulir multi-langkah, mari kita lihat beberapa alasan mengapa Anda harus mempertimbangkan untuk menambahkan formulir multi-langkah ke situs WordPress Anda.

Mengapa Menggunakan Formulir Multi Langkah Di WordPress?

Jawaban sederhananya adalah dengan meroketkan tingkat konversi Anda. Formulir multi-langkah saat ini menjadi sangat populer di situs web dengan penggunaan seperti formulir pendaftaran, formulir pemesanan, formulir pemesanan makanan, dll. Beberapa alasan mengapa Anda juga harus mempertimbangkan untuk menggunakan formulir multi-langkah di situs web Anda meliputi:

• Formulir multi-langkah berfungsi lebih baik dalam hal menarik perhatian pengguna. Akibatnya, orang lebih sering terlibat dan menyelesaikan pengiriman formulir mereka.
• Pengguna menemukan multistep lebih ramah pengguna dan memberikan kemudahan penggunaan yang lebih baik daripada formulir satu langkah yang panjang tidak.
• Karena ada bilah navigasi/ bilah kemajuan dengan formulir multi langkah, pengguna merasa lebih terdorong untuk melengkapi formulir multi langkah.
• Formulir multi langkah bersyarat sangat bagus untuk mengumpulkan hanya data relevan yang Anda butuhkan.
• Sebagai hasil dari semua sisi positif yang disebutkan di atas, formulir multi-langkah meningkatkan tingkat konversi.

Sekarang Anda tahu bahwa Anda harus menggunakan formulir multi langkah di situs WordPress, saatnya untuk membuat pengaturan sempurna yang Anda butuhkan untuk membuat formulir multi-bagian Anda.

Siapkan yang Anda butuhkan untuk membuat Formulir Multi Langkah WordPress

Seiring dengan WordPress, Anda akan membutuhkan dua plugin lagi untuk membuat formulir multi-langkah di WordPress dengan mudah. Plugin WordPress tersebut adalah:

1. elemen (versi gratis)
2. MetForm ( Gratis dan Pro)

Elementor adalah pembuat halaman WordPress terbaik dan MetForm adalah salah satu plugin formulir multi-langkah WordPress yang tumbuh paling cepat. Jika Anda memerlukan bantuan untuk menginstal MetForm, Anda dapat melihat dokumentasi kami tentang cara menginstal MetForm.

Setelah selesai menginstal, Anda perlu membuat halaman dengan pembuat halaman Elementor sebelum Anda dapat menggunakan Metform. Untuk itu, buka Dasbor Halaman Tambah Baru .

Sekarang, berikan Judul yang sesuai , Pilih Elementor Full Width sebagai Template, Klik Publis h. Setelah itu, klik Edit dengan Elementor.

Akhirnya, Anda siap untuk membuat formulir multi-langkah Anda. Jadi, mari kita beralih ke proses utama.

Catatan: Dalam tutorial ini, saya akan menunjukkan cara menambahkan formulir multi-langkah ke halaman. Tetapi Anda juga dapat menambahkan formulir yang dibuat dengan MetForm dalam popup modal dengan mudah.

Cara Membuat Formulir Multi Langkah Di WordPress

Di blog ini, Anda akan belajar membuat formulir multi-langkah yang tampak modern dari awal hanya dalam 5 langkah mudah:

Langkah 1: Seret dan Lepas MetForm

Setelah Anda berada dalam mode Edit dengan Elementor , cari MetForm dan seret dan lepas di tempat Anda ingin formulir itu muncul.

Langkah 2: Buat Formulir Baru

Klik pada bagian formulir untuk membuka opsi Edit MetForm . Klik pada Tombol Edit Formulir .

Setelah jendela baru muncul

• Pilih Baru (buat formulir baru)
• Berikan nama formulir untuk formulir
• Pilih template kosong,
• dan klik pada Edit Formulir

Langkah 3: Buat Formulir Multi Langkah Dari Awal Menggunakan MetForm dan Pembuat Halaman Elemen

Setelah Anda mengklik Edit Formulir, Anda akan mendapatkan akses ke jendela baru lainnya dengan pembuat halaman Elementor untuk membuat formulir Anda dari awal. Untuk membuat satu langkah dari formulir multi langkah, Anda harus mengikuti empat langkah berikut:

Tambahkan bagian baru

Seret dan jatuhkan bidang input sesuai dengan persyaratan

Seret dan lepas tombol Sebelumnya/Berikutnya/Kirim tergantung pada frasa formulir

Berikan nama yang tepat untuk bagian tersebut

Untuk blog ini, saya akan membuat demo 3 langkah Formulir Pemesanan Hotel Multi-langkah menggunakan langkah-langkah yang disebutkan di atas. Tiga langkah formulir akan mencakup Informasi Pribadi, Informasi Pemesanan, dan Informasi Tambahan

Formulir Pemesanan Langkah Satu – Informasi Pribadi:

• Untuk bagian Informasi Pribadi, klik ikon Elementor + dan pilih struktur dengan dua kolom yang sama .

• Cari bidang input Teks dan seret dan lepas bidang formulir di kolom kiri.

• Sekarang untuk mengedit atribut bidang input ini, klik tanda edit, buka Konten konten dan edit opsi berikut:
  • Tampilkan Label: Aktifkan opsi ini untuk menampilkan label bidang input.
  • Posisi: Anda dapat memilih untuk memposisikan label di atas atau kiri.
  • Label: Beri nama pada label Anda. Saya akan menggunakan "Nama depan".
  • Nama: Bidang nama wajib diisi dan harus unik. Jadi, pastikan untuk memberikan nama yang berbeda untuk setiap bidang dan ganti spasi dengan garis bawah/tanda hubung.
  • Placeholder: Menyediakan teks placeholder.
  • Teks Bantuan: Jika Anda ingin memberikan teks bantuan untuk pengguna, Anda dapat melakukannya di sini.

• Selanjutnya, buka Konten Pengaturan untuk mengubah opsi berikut:
  • Diperlukan: Untuk membuat bidang formulir ini diperlukan, aktifkan opsi ini.
  • Jenis validasi: Anda dapat mengatur berbagai jenis validasi untuk bidang teks berdasarkan panjang karakter, panjang kata, dan ekspresi.
  • Pesan peringatan: Di sini Anda dapat mengatur pesan peringatan yang akan muncul jika persyaratan tidak terpenuhi.

Catatan: Saya akan menggunakan fitur logika kondisional pada langkah kedua formulir ini.

Sama seperti Nama Depan, tambahkan bidang input Teks lain untuk nama belakang. Sebagai bagian dari langkah informasi pribadi, di sini saya akan menambahkan dua bidang lagi; Email dan nomor Handphone.

Setelah Anda selesai mengubah pengaturan bidang Email dan Nomor Ponsel. Cari dan seret dan lepas tombol Langkah Berikutnya . Anda dapat mengubah pengaturan tombol yang berbeda seperti Label, Perataan tombol, ikon, posisi ikon, dll.

• Sekarang bagian untuk langkah pertama sudah siap, untuk memberi nama yang tepat untuk langkah pertama
  • Klik pada ikon enam titik untuk membuka opsi pengaturan dan pergi ke tata letak multilangkah .
  • Berikan nama pada opsi Judul Tab Multistep
  • Pilih ikon dari perpustakaan atau unggah SVG.
  • Klik perbarui untuk menyimpan.

Sekarang bagian pertama sudah siap, mari kita buat Langkah Kedua.

Formulir Pemesanan Langkah Kedua – Informasi Pemesanan:

• Untuk langkah kedua Anda harus memilih bagian baru. Saya akan memilih bagian baru dengan satu kolom dan kemudian menambahkan bagian dalam baru dengan dua kolom yang sama.
• Setelah memilih kolom, seret dan lepas bidang input 2 tanggal untuk opsi check-in dan check-out.

Aturan yang Harus Diikuti : Anda harus memilih bagian baru untuk memulai langkah baru , jika tidak, bidang input apa pun yang Anda tambahkan akan ditambahkan ke langkah sebelumnya. Jadi, selalu ingat, langkah baru memerlukan bagian baru meskipun memiliki tata letak yang sama.

• Seiring dengan opsi pengaturan yang disebutkan untuk bidang teks, Anda mendapatkan pengaturan berikut untuk bidang input Tanggal di bawah Konten Pengaturan
  • Atur tanggal saat ini sebagai tanggal minimum: Aktifkan opsi ini untuk mengatur tanggal saat ini sebagai tanggal minimum.
  • Atur tanggal minimum secara manual: Jika Anda tidak ingin mengatur tanggal saat ini sebagai tanggal minimum, Anda juga dapat mengatur tanggal minimum secara manual.
  • Atur tanggal maksimum secara manual: Di sini Anda dapat mengatur tanggal maksimum.
  • Nonaktifkan Daftar tanggal: Anda dapat menggunakan opsi ini untuk menonaktifkan beberapa tanggal. Untuk menonaktifkan tanggal apa pun, klik tombol +TAMBAHKAN ITEM dan pilih tanggalnya.
  • Input tanggal rentang: Dengan mengaktifkan opsi ini, Anda dapat mengaktifkan opsi kepada pengguna untuk memilih rentang tanggal. Tetapi untuk formulir ini, saya akan membiarkan opsi ini dimatikan.
  • Input tahun: Aktifkan opsi ini untuk mengambil satu tahun sebagai bagian dari input tanggal.
  • Input bulan: Untuk mengaktifkan bulan sebagai bagian dari input tanggal, aktifkan opsi ini.
  • Input tanggal: Aktifkan opsi ini untuk mengambil tanggal (hari) sebagai bagian dari input tanggal
  • Format tanggal: Atur format input tanggal di sini.
  • Lokalisasi: Pilih lokasi dari dropdown berdasarkan preferensi Anda.
  • Ingin memasukkan waktu dengannya: Aktifkan opsi ini untuk mengambil waktu bersama dengan data sebagai input. Jika Anda mengaktifkan opsi ini, Anda akan mendapatkan opsi lain yaitu Aktifkan waktu 24 jam. Dengan menggunakan opsi ini, Anda dapat mengaktifkan format 24 jam.

Sekarang, akhirnya, kita akan menggunakan fitur formulir bersyarat untuk bidang Check Out. Untuk membuat kolom check out hanya terlihat saat kolom check in kosong,

• Salin nilai bidang Nama dari bidang input Check-In.
• Lalu masuk ke Content Conditional , nyalakan opsi aktifkan
• Pilih DAN dari dropdown Kriteria kecocokan kondisi.
• Dari opsi tarik-turun Tindakan, pilih Perlihatkan Bidang Ini .
• Klik + ADD ITEM , pada bidang input if, tempel nilai nama bidang check-in yang Anda salin.
• Pilih " tidak kosong " dari drop-down Match ( perbandingan ).

Sekarang klik tombol pratinjau untuk melihat. Bidang check-out seharusnya hanya terlihat setelah Anda memilih tanggal Check-in.

Tambahkan bagian dalam baru sehingga formulir tidak terlihat buruk saat opsi bersyarat menyembunyikan check out pada awalnya. Seret dan lepas bidang formulir Angka dua kali untuk membuat dua bidang lagi untuk jumlah kamar dan jumlah Orang.

Dan karena ini adalah langkah tengah, kita perlu menyertakan Prev dan Next Buttons .

Setelah Anda selesai mengedit pengaturan untuk semua bidang yang ditambahkan untuk bagian ini, ubah nama bagian/langkah dari tata letak multilangkah seperti yang Anda lakukan dengan bagian pertama. Saya menamakannya Informasi Pemesanan.

Sekarang langkah kedua sudah siap, mari kita lanjutkan ke langkah ketiga

Formulir Pemesanan Langkah Tiga – Informasi Tambahan

Untuk langkah ketiga, mari tambahkan bagian baru dengan satu kolom. Dan tambahkan bidang teks dan beri nama Informasi Tambahan.

Selanjutnya, tambahkan bagian dalam dari dua kolom di dalam bagian tersebut. Setelah itu, seret dan lepas tombol sebelumnya dan kemudian tombol kirim untuk pengiriman formulir.

Catatan: Anda dapat menambahkan bagian dalam sebanyak yang Anda inginkan. Tetapi untuk membuat langkah baru, Anda harus menambahkan bagian baru.

Untuk memberi nama pada bagian ketiga, buka tata letak multilangkah dan tambahkan judul “ Informasi Tambahan ” dan tambahkan ikon.

Akhirnya, kami selesai membangun formulir multi langkah WordPress kami dengan 3 langkah. Sekarang klik perbarui untuk menyimpan dan tutup jendela untuk beralih ke pengaturan multi-langkah.

Langkah 4: Aktifkan Opsi Formulir Multi Langkah di MetForm

Sekarang setelah kita memiliki formulir, saatnya untuk mengubahnya menjadi formulir multi-langkah yang berfungsi. Untuk melakukannya

• Buka Konten Pengaturan Multilangkah
• Aktifkan opsi aktifkan Multi langkah untuk mengaktifkan opsi multi-langkah
• Aktifkan Display Multistep Nav sehingga menu Bagian muncul di atas. Anda juga dapat mengedit pengaturan yang berbeda seperti Tinggi Wadah Bentuk Adaptif, Aktifkan gulir ke atas, dll.
• Setelah membuat semua perubahan, klik perbarui untuk menyimpan

Langkah 5: Konfigurasi Konfirmasi, Pemberitahuan, dan Pengaturan Lainnya untuk Selesai

Sekarang Anda telah mendesain formulir multilangkah Anda. Mari konfigurasikan semua pengaturan formulir yang ditawarkan MetForm. Untuk mengubah pengaturan MetForm dari dasbor WordPress, buka MetForm Formulir Klik opsi Edit formulir yang baru saja Anda buat.

Catatan: Di sini Anda juga akan menemukan kode pendek dari formulir yang Anda buat yang baru saja Anda salin dan tempel untuk menambahkan formulir Anda di mana saja di situs web. Anda juga dapat mengakses pengaturan Formulir dari opsi Edit Formulir .

Di sini Anda akan menemukan pengaturan berikut:

Umum:

Sebagai bagian dari pengaturan umum, Anda dapat mengubah Judul, Pesan Sukses, Login yang Diperlukan, Hitung tampilan , dll. Anda juga dapat mengatur URL khusus apa pun yang Anda inginkan untuk digunakan pengguna setelah mengirimkan formulir.

Konfirmasi:

Anda dapat mengirim email konfirmasi kepada pengguna Anda dengan salinan formulir yang mereka kirimkan dengan plugin pembuat formulir ini. Aktifkan opsi konfirmasi kemudian Anda dapat mengatur Subjek Email, Email Dari, Dari email, Email Balas Ke, dan Pesan terima kasih.

Pengaturan pemberitahuan:

Anda juga dapat mengirim email pemberitahuan formulir ke admin dengan MetForm. Aktifkan opsi Notification mail to the admin. Kemudian atur Subjek Email, Email Ke, Email Dari, Catatan Admin , dll.

Setelah melakukan semua pengeditan, gulir ke bawah dan klik simpan perubahan untuk memperbarui pengaturan.

Terlepas dari pengaturan yang telah saya bahas di blog ini, Anda juga mendapatkan Integrasi seperti REST API, Mail Chimp, Google Sheet , dll. Juga, integrasi gateway pembayaran seperti PayPal, Stripe. Integrasi CRM yang mencakup HubSpot, Zoho, dll. Anda juga mendapatkan opsi autentikasi seperti login dan registrasi . Untuk detail lebih lanjut tentang pengaturan ini, lihat dokumentasi MetForm kami.

Jika Anda telah mengikuti langkah-langkah yang disebutkan dengan benar, Anda akan mendapatkan formulir pemesanan multi-langkah seperti di bawah ini:

Bungkus

Di sana, Anda baru saja membuat formulir multilangkah WordPress Anda dalam beberapa menit. Jika menurut Anda formulir ini sederhana maka jangan khawatir. Tujuan utama blog ini adalah untuk menunjukkan bagaimana Anda dapat membuat formulir multi-langkah di WordPress menggunakan MetForm.

Sekarang setelah Anda mengetahui cara membuat formulir multi-langkah WordPress, Anda dapat membuat formulir dan logika kustom Anda. Saya harap Anda menggunakan fitur MetForm untuk membuat formulir multi-langkah yang luar biasa. Jika Anda menghadapi masalah di sepanjang jalan, bagikan dengan kami, tim kami akan membalas secepatnya.

Jangan lupa untuk memeriksa semua fitur luar biasa yang ditawarkan MetForm.