Cara Membuat Formulir Kontak Divi Serbaguna dengan Logika Bersyarat

Tidak setiap pengunjung datang ke situs Anda untuk alasan yang sama. Anda mungkin menawarkan berbagai produk atau layanan, bukan hanya satu pilihan untuk pelanggan dan klien. Itulah mengapa memiliki beberapa formulir kontak yang ditargetkan dapat membantu memperlancar UX situs Anda sehingga pelanggan Anda (dan calon) dapat menghubungi Anda tentang apa yang mereka butuhkan dengan sesedikit mungkin gesekan. Menggunakan modul formulir kontak Divi dan fitur logika bersyarat kami, kami akan memandu Anda dalam membuat saluran terbaik antara Anda dan pengguna Anda.

Pratinjau Formulir Kontak Bersyarat

Ketika semuanya dikatakan dan dilakukan, Anda akan memiliki sesuatu yang mirip dengan ini di situs Anda, siap untuk digunakan pengunjung Anda.

Desktop

Seluler

Apa itu Logika Bersyarat?

Pertama, kami ingin membahas secara singkat apa yang kami maksud dengan logika kondisional . Apa yang akan kita lakukan dalam tutorial ini adalah menyiapkan serangkaian formulir kontak yang muncul berdasarkan pilihan yang dibuat atau tidak dibuat oleh pengguna.

Misalnya, Anda dapat memiliki satu formulir kontak yang menyesuaikan berdasarkan layanan atau produk apa yang dibutuhkan pengunjung. Dengan begitu, Anda bisa mendapatkan informasi dalam format yang Anda butuhkan daripada mereka harus menuliskannya. Logika bersyarat pada formulir kontak dapat meningkatkan komunikasi dan mempercepat kemampuan Anda untuk menyediakan bagi pengguna Anda.

Dengan mengingat hal itu, mari gali pembuatan formulir kontak yang ditargetkan.

Cara Membuat Formulir Kontak Menggunakan Logika Bersyarat

Muat Pembuat Divi

Karena kita menggunakan modul Divi Contact Form, kita harus masuk ke Divi Builder. Kita akan menggunakan paket tata letak Pemeliharaan Lansekap sebagai contoh dalam tutorial ini. Anda dapat menggunakan tata letak atau desain apa pun yang Anda inginkan, tetapi Anda harus dapat menggunakan dan menata Modul Formulir Kontak Divi.

Untuk memulai dengan masuk ke Divi Builder dari backend situs WordPress Anda. Di dalam Editor Halaman, Anda akan melihat tombol ungu yang bertuliskan Gunakan Divi Builder (atau Edit dengan Divi Builder jika Anda telah membuat Halaman).

Tambah atau Temukan Modul Formulir Kontak

Kemudian Anda akan ingin menemukan Modul Formulir Kontak yang sudah ada di halaman atau klik ikon Hitam + Lingkaran dan temukan Formulir Kontak di menu tarik-turun.

Masuk ke Pengaturan Formulir Kontak

Modul Formulir Kontak Divi dilengkapi dengan 3 bidang secara default: Nama , Email , dan Pesan . Apa yang akan kami lakukan adalah membuat formulir kontak di mana opsi tersebut tidak muncul sampai pengunjung memberi kami informasi yang cukup untuk dapat mengarahkan kueri mereka.

Tambahkan Pertanyaan Bersyarat Pertama

Di bawah tab Konten dan di bawah bidang apa pun yang sudah ada di formulir, Anda akan melihat tombol Tambahkan Bidang Baru . Klik itu.

Melakukannya akan membuka jendela Pengaturan Bidang , dan Anda akan melihat tempat untuk entri ID Bidang dan Judul . ID Bidang adalah untuk Anda. Itulah yang muncul di dalam pengaturan modul untuk Anda pantau. Judul adalah teks yang akan dilihat pengunjung Anda di ujung depan formulir. (Judul akan muncul di email yang Anda dapatkan saat formulir dikirimkan juga.)

Kami telah memberi label pada Field ID dengan “Bersyarat” karena ini adalah pertanyaan pertama yang akan dilihat pengunjung pada formulir. Tanggapan mereka terhadapnya akan menentukan apa yang mereka lihat selanjutnya. Ini adalah cara mudah untuk melacak alur pertanyaan dan jawaban formulir.

Tambahkan Opsi Bidang

Selanjutnya, gulir di bawah Tab Konten ke bagian Opsi Bidang . Di sinilah Anda akan menambahkan pilihan untuk dipilih pengguna. Masing-masing akan menjadi pemicu untuk pertanyaan tindak lanjut tertentu. Untuk contoh ini, kami menggunakan Kotak centang sebagai jenis input kami. Ini berarti pengguna dapat memilih sebanyak yang mereka inginkan.

Selain Kotak Centang , Divi juga memungkinkan opsi lain: Bidang Input dan Area Teks untuk tanggapan yang diketik pengguna sendiri, Pilih Dropdown dan Tombol Radio untuk pilihan tunggal yang Anda berikan, serta Bidang Email untuk entri alamat email. Bidang Nama default adalah Bidang Input , dan Pesan adalah Textarea .

Dengan memilih Kotak centang , kami akan memasukkan pilihan yang kami inginkan untuk memicu opsi yang berbeda nanti. Kami kemudian ingin memastikan ini adalah Bidang yang Diperlukan sehingga pengguna tidak dapat mengirimkan formulir sebelum waktunya.

Penting untuk dicatat di sini bahwa kami tidak menambahkan Logika Bersyarat ke langkah ini. Ini adalah pemicunya, jadi itu tampak bagi pengguna.

Tambahkan Bidang Baru untuk Tanggapan Bersyarat

Namun, selanjutnya, kami akan menambahkan Logika Bersyarat untuk Bidang baru yang kami tambahkan sebagai tanggapan tindak lanjut. Karena kami menyertakan 3 opsi untuk pertanyaan awal, kami akan menambahkan 3 bidang baru yang sesuai ke formulir . Anda akan mengulangi langkah-langkah berikut untuk masing-masing.

Beri nama Tanggapan Bersyarat di Bidang Baru

Perhatikan bahwa kami telah menggunakan konvensi penamaan Bersyarat 1 (untuk menunjukkan pemicu bersyarat pertama) dan kemudian 1a , 1b , dan 1c untuk tanggapan tindak lanjut. Kami juga telah memberi label dengan tepat sehingga kami dapat melacaknya.

Seperti pertanyaan pertama, kita juga akan memasukkan Judul sebagai pertanyaan yang akan dilihat pengunjung.

Tambahkan Logika Bersyarat ke Bidang Respons

Setelah itu, gulir ke bawah ke bagian Logika Bersyarat di bawah tab Konten bidang itu. Aktifkan sakelar untuk Logika Bersyarat . Kemudian, pilih Relasi untuk yang ini, artinya Anda dapat mengaturnya ke mana saja (sejumlah respons dapat membuat opsi ini muncul) atau semua (hanya kombinasi respons tertentu yang membuat bidang ini muncul).

Jika Anda hanya menggunakan satu aturan pemicu seperti kami, salah satu atau semuanya akan berfungsi.

Di bawah Aturan , Anda akan melihat bidang yang memicu yang ini, dan di sebelah kanan, Anda dapat memilih pilihan mana yang akan memicunya. Pusat adalah kualifikasi, seperti sama, tidak sama, kurang dari, lebih besar dari , dan seterusnya. Untuk bidang khusus ini, kami memilih pertanyaan yang kami tetapkan sebagai Bersyarat 1 dan kemudian opsi di dalamnya yang secara khusus memicu bidang ini untuk muncul.

Ulangi ini untuk Semua Tanggapan Bersyarat

Karena kami menambahkan tiga respons berbeda ke pertanyaan bersyarat tunggal kami, kami juga akan mengulangi proses yang tepat ini untuk bidang lain. Hanya membuat tanggapan korelatif yang sesuai untuk pilihan tersebut.

Atur 'Nama/Email/Pesan' Formulir Kontak untuk Muncul

Setelah Anda mengatur tanggapan untuk logika bersyarat, kami ingin pengunjung benar-benar dapat mengirimkan formulir. Untuk itu, kita akan menyesuaikan logika Bersyarat di bidang Nama , Email , dan Pesan . Pengaturan untuk masing-masing ini persis sama, jadi sekali lagi, Anda akan mengulanginya 3 kali.

Di dalam pengaturan bidang Name , Email , dan Message , masuk ke Conditional Logic . Aktifkan dan tambahkan sebanyak yang Anda punya tanggapan akhir untuk pertanyaan tindak lanjut bersyarat Anda. Dalam kasus kami, kami memiliki 3 pertanyaan lanjutan, jadi kami menggunakan 3 aturan.

Untuk setiap aturan, pilih pertanyaan lanjutan sebagai pemicu. Atur qualifer menjadi tidak kosong , artinya selama pengunjung menjawab pertanyaan maka syaratnya terpenuhi. Itu akan membuat kotak terakhir berwarna abu-abu, menunjukkan bahwa jawaban apa pun sudah cukup.

Simpan perubahan Anda, dan ulangi ini untuk bidang apa pun yang ingin Anda tampilkan untuk mengizinkan pengiriman formulir . Dan itu saja! Formulir Anda akan segera menyesuaikan diri dengan kebutuhan pengguna Anda.

Hasil Akhir

Anda dapat melihat di bawah ini bagaimana logika kondisional bekerja dalam praktiknya.

Desktop

Seluler

Membungkus

Formulir kontak adalah salah satu elemen paling umum dari sebuah situs web. Hampir setiap situs memilikinya, dan hampir setiap situs membutuhkannya. Tetapi tidak setiap pengguna datang ke situs Anda untuk alasan yang sama. Dengan menggunakan fitur logika kondisional Divi, Anda dapat menyesuaikan formulir kontak Anda menjadi alat serbaguna untuk berkomunikasi dengan pengguna Anda.

Formulir apa saja yang sudah Anda buat menggunakan fitur Divi Conditional Logic?

Gambar unggulan artikel oleh Kubko / shutterstock.com