Cara Membuat Formulir Kontak di WordPress

Setiap jenis situs web termasuk toko online, blog, perusahaan, atau varian lainnya, biasanya memiliki struktur tertentu yang terdiri dari sejumlah halaman utama. Situs bisnis biasa biasanya memiliki beranda, tentang halaman, bagian tim atau staf, blog, dan tentu saja, halaman kontak tempat pengunjung dapat menemukan alamat email, nomor telepon, atau alamat fisik untuk dapat berhubungan dengan pemilik situs web. .

Setiap halaman 'Kontak' biasanya menyertakan formulir kontak dengan jumlah standar bidang yang harus diisi, dan tombol 'Kirim' untuk mengirim kueri. Jumlah dan jenis bidang ini dapat bervariasi tergantung pada preferensi pemilik situs web.

Seseorang ingin mengetahui lokasi pengunjung yang berhubungan, sehingga mereka menempatkan kotak centang yang diperlukan ke dalam formulir kontak, yang lain ingin mempelajari usia, jenis kelamin, pekerjaan, alasan menghubungi, atau beberapa data lain, sehingga mereka menambahkan bidang yang diperlukan pengunjung untuk mengisinya dengan informasi pribadi mereka sebelum mengklik tombol 'Kirim'.

Dalam posting ini saya akan menunjukkan cara membuat formulir kontak dengan bantuan 2 solusi berbeda. Saya akan menggunakan plugin Contact Form 7 tradisional yang termasuk dalam paket tema WP premium paling modern dan plugin WP Forms yang tersedia di repositori resmi WordPress.

Membuat Formulir 'Hubungi' dengan Formulir Kontak 7

Jadi, seperti biasa kita mulai dengan menginstal dan mengaktifkan kedua plugin. Mulai dari menginstal yang pertama, lalu masuk ke Kontak -> Tambah Baru untuk membuat formulir kontak baru.

Secara default, Anda sudah memiliki dua contoh formulir kontak di Kontak -> menu Formulir Kontak tersedia. Begini tampilan formulir kontak standar: ini adalah kumpulan kode pendek yang membuat struktur formulir yang biasanya Anda lihat di halaman Kontak.

Inilah formulir kontak ini secara langsung. Ini mencakup bidang-bidang seperti Nama, Email, Subjek, Pesan dan tombol 'Kirim Pesan'. Formulir kontak singkat seperti itu adalah cara termudah untuk menghubungi Anda.

Pengunjung tidak perlu mengisi banyak kolom yang bisa sangat membosankan bagi mereka. Jadi mereka dapat dengan mudah dan cepat menghubungi Anda hanya dengan mengisi beberapa bidang formulir kontak yang diperlukan dalam beberapa menit.

Seperti yang telah kami sebutkan, terkadang lebih banyak bidang diperlukan, sehingga Anda dapat dengan mudah menambahkannya ke formulir kontak Anda dengan bantuan kode pendek tambahan dari Formulir Kontak 7.

Menambahkan Kotak Centang di Formulir Kontak Anda

Misalnya, saya ingin menambahkan kotak centang pilihan negara ke dalam formulir kontak saya. Jadi saya memilih shortcode kotak centang, dan sekarang generator Form-tag terbuka.

Saya mencentang kotak 'Bidang wajib diisi' agar bidang ini wajib diisi sebelum mengirim pesan. Kemudian saya memilih nama kotak centang saya seperti "negara Anda" dan saya memasukkan 3 opsi ke jendela 'Opsi' untuk memungkinkan pengunjung saya memilih varian yang benar dari 3 yang tersedia (saya berharap pengunjung saya berasal dari AS, India atau Inggris Raya).

Tentu saja, Anda dapat menambahkan lebih banyak opsi untuk dipilih serta memasukkan opsi "Lainnya" alih-alih nama negara tertentu.

Setelah itu saya memilih opsi 'Bungkus setiap item dengan elemen label' dan, sebagai hasilnya, saya mendapatkan kode pendek seperti itu: [kotak centang* your-country use_label_element “USA” “India ” “Great Britain”]. Seperti yang Anda lihat, kotak centang ini wajib diisi (tagnya ditandai dengan *), berisi nama dan tiga opsi untuk dipilih.

Menambahkan Menu Drop-Down

Jika Anda ingin mengetahui usia pengguna yang menghubungi Anda, Anda dapat memilih kode pendek menu tarik-turun yang dimulai dengan tag 'pilih'.

Generator form-tag-nya juga berisi nama menu Anda, opsinya, dan beberapa atribut yang dapat Anda pilih.

Saya menambahkan nama, beberapa opsi untuk dipilih dan mengklik opsi "Izinkan beberapa pilihan". Ini adalah bagaimana kode pendek menu tarik-turun saya [pilih kelipatan usia Anda "18-26" "26-35" "35-45"].

Dan beginilah tampilan formulir kontak saya dengan kotak centang tambahan yang baru saja saya buat. Jika Anda ingin menambahkan tombol radio, atau beberapa bidang tambahan lainnya ke dalam formulir kontak Anda, silakan baca detail selengkapnya di sini.

Menambahkan reCaptcha

Saat membuat formulir kontak, tentu Anda ingin melindungi situs web Anda dari pendaftaran palsu dan aktivitas robot. Inilah saatnya reCaptcha berguna.

Jangan ragu untuk menginstal dan mengaktifkan Contact Form 7 – plugin reCaptcha v2, lalu pergi ke Contact -> Integration dan klik tombol 'Setup Integration'.

Sekarang buka Konsol Google Anda -> Pengaturan untuk menemukan Situs dan Kunci Rahasia untuk reCaptcha.

Jika Anda belum menambahkan situs WP Anda ke Google dan Anda belum memiliki akun di Google Console, silakan lihat detail tentang cara mendaftarkan situs web Anda di Google di sini.

Salin kunci dan tempelkan ke kolom koresponden di dasbor Anda. Klik tombol Simpan Perubahan untuk membuat reCaptcha Anda berfungsi.

Sekarang, ketika integrasi diatur, buka Kontak -> versi reCaptcha dan pilih reCaptcha Versi 2 alih-alih Penggunaan Default.

Di sini Anda akan menemukan kode pendek reCaptcha yang harus Anda gunakan untuk memasukkan reCaptcha Anda jika diperlukan. Ini juga dikelola melalui generator Form-tag.

Jadi, sekarang ketika Anda membuka formulir kontak yang baru saja Anda buat di daftar Kontak -> Formulir Kontak dan klik formulir yang dipilih untuk membukanya,

Anda akan melihat kode pendek reCaptcha muncul.

Sekarang Anda dapat menyisipkannya sebelum tombol 'Kirim' agar pengunjung Anda mengonfirmasi bahwa mereka adalah manusia sebelum mereka mengirimkan pesan.

Beginilah tampilan reCaptcha Anda.

Sekarang setelah Anda selesai mengedit formulir kontak Anda, Anda dapat menyalin kode pendeknya dan menempelkannya di halaman Kontak Anda menggunakan menu Halaman -> Semua Halaman atau Halaman -> Tambah menu Baru jika halaman kontak Anda belum dibuat.

Membangun Formulir Kontak dengan Formulir WP

Prinsip membangun formulir kontak dengan solusi WP Forms WordPress agak mirip, meskipun sedikit lebih mudah, menurut saya.

Buka WP Forms -> Add New dan pilih formulir dari varian yang tersedia. Dengan demikian Anda dapat memilih formulir kosong, formulir kontak sederhana, formulir pendaftaran buletin, atau formulir saran. Saya memilih formulir kontak sederhana untuk melanjutkan.

Seperti yang Anda lihat, formulir kontak sederhana terdiri dari bidang untuk nama depan dan belakang, bidang untuk email, bidang untuk pesan dan tombol 'Kirim'. Anda dapat melengkapi formulir kontak Anda dengan kotak centang, pilihan menu tarik-turun, dan banyak lagi opsi lainnya.

Cukup pilih modul yang diperlukan dan seret-dan-lepaskan untuk dimasukkan ke dalam formulir kontak Anda jika diperlukan.

Ini adalah bagaimana kotak centang pilihan negara saya terlihat.

Setelah semua perubahan dibuat, klik tombol 'Simpan' untuk menyimpannya

dan salin kode pendek formulir kontak yang baru Anda buat untuk meletakkannya di halaman mana pun yang Anda inginkan.

Seperti yang Anda lihat, semuanya cukup mudah.

Jika Anda memiliki masalah, silakan tinggalkan di komentar.

Semoga ini bermanfaat,

Melani H.