Cara Menambahkan Formulir Kontak Menggunakan Plugin – P2: Gunakan WPForms

Dalam artikel seri “Formulir Kontak” sebelumnya, kita telah mempelajari apa itu formulir kontak dan bagaimana menggunakan plugin Formulir Kontak 7. Seperti yang dijanjikan, saya menulis tutorial lain dengan WPForms dan akan saya tunjukkan di artikel ini.

WPForms adalah plugin formulir kontak seret dan lepas freemium dengan pratinjau waktu nyata. Dalam pengalaman saya, mudah dan nyaman untuk bekerja dengan plugin ini.

Apakah Anda ingat contoh formulir pendaftaran universitas yang kami buat di bagian 1 seri ini? Sekarang, kita akan membuat yang sama dengan WPForms.

Langkah 1: Instal dan Aktifkan Plugin WPForms

Plugin ini memiliki versi gratis di wordpress.org, jadi Anda hanya perlu menginstal dan mengaktifkan plugin langsung di Dasbor Admin .

Formulir Kontak oleh WPForms – Drag & Drop Form Builder untuk WordPress

Penulis: WPForms

Versi Saat Ini: 1.7.1.2

Terakhir Diperbarui: 18 November 2021

wpforms-lite.1.7.1.2.zip

98% Peringkat 5.000.000+ Menginstal WP 4.9+ Membutuhkan

Langkah 2: Buat Formulir Kontak Baru dan Pilih Template

Di Dasbor Admin Anda, buka WPForms > Add New .

Berikut adalah antarmuka yang harus Anda gunakan:

Di bilah sisi kiri, Anda dapat melihat 5 bagian:

1. Setup : Beri nama formulir kontak dan pilih templatnya.
2. Bidang : Menambahkan dan menyesuaikan bidang untuk formulir kontak.
3. Pengaturan : Mengonfigurasi pemberitahuan, konfirmasi, dan pengaturan umum.
4. Pemasaran : Tautkan dengan alat pemasaran email seperti Kontak Konstan, Monitor Kampanye, Mailchimp, …
5. Pembayaran : Tambahkan pembayaran dari PayPal Standard, Stripe, dan Authorize.Net.

Catatan : Saya tidak menjalankan kampanye pemasaran email dan formulir saya tidak memerlukan informasi pembayaran. Oleh karena itu, saya tidak memerlukan bagian Pemasaran dan Pembayaran .

Di bagian Setup , masukkan nama formulir Anda dan pilih template yang Anda inginkan.

Ada empat template default:

• Formulir Kontak Sederhana
• Formulir Pendaftaran Buletin
• Saran Untuk
• Formulir kosong

Tidak termasuk Formulir Kosong , templat lain memiliki bidang pra-bangunnya sendiri yang dapat Anda manfaatkan untuk membuat formulir kontak lebih cepat. Selain itu, Anda dapat menginstal add-on WPForms (hanya tersedia pada versi berbayar) untuk mendapatkan lebih banyak template.

Pada artikel ini, saya memilih template Formulir Kosong untuk membuat formulir kontak langkah demi langkah dari awal. Ini akan membantu Anda memahami segalanya dengan lebih mudah dan mendalam.

Langkah 3: Tambahkan Bidang untuk Formulir Kontak

Tambahkan Bidang

Setelah memilih template Formulir Kosong pada langkah 2, Anda akan dipindahkan ke bagian Bidang .

Untuk menambahkan bidang untuk formulir kontak Anda, seret bidang yang diinginkan dari tab Tambah Bidang dan jatuhkan ke formulir kontak.

Selanjutnya, untuk menyesuaikan bidang, klik bidang tersebut, lalu edit parameternya di tab Opsi Bidang .

Selain itu, Anda dapat menghapus atau menggandakan bidang dengan mengarahkan kursor ke bidang tersebut dan mengeklik tombol yang diinginkan.

Dalam artikel ini, saya perlu menambahkan bidang berikut:

Setelah menambahkan semua bidang ini, Anda perlu menyesuaikan setiap bidang di langkah selanjutnya.

Sesuaikan Opsi Umum untuk Setiap Bidang

Secara umum, ada dua jenis opsi untuk menyesuaikan setiap bidang:

Opsi dasar : semua bidang berisi opsi ini dan Anda harus benar-benar bekerja dengannya untuk membuat formulir kontak Anda jelas dan dapat dimengerti.

• Label : Masukkan nama field yang ingin ditampilkan.
• Deskripsi : Ini adalah tampilan teks di bawah bidang untuk memberi tahu pengguna apa yang harus dilakukan.
• Diperlukan : Ini opsional! Centang untuk membuat kolom ini wajib diisi.

Pada langkah selanjutnya, ketika saya menyebutkan "informasi dasar", itu berarti Anda harus berurusan dengan opsi dasar ini.

Opsi lanjutan : ada beberapa fitur lanjutan untuk setiap bidang. Ini opsional bagi Anda untuk berurusan dengan mereka, tetapi ada beberapa hal penting yang harus Anda perhatikan:

• Teks placeholder : Menampilkan teks di dalam bidang sebelum pengguna memasukkan data. Teks ini dapat digunakan sebagai panduan atau contoh untuk membantu pengguna dengan mudah memahami apa yang harus mereka isi. Misalnya, Anda dapat mengatur teks Placeholder dari bidang email sebagai "Masukkan email Anda".
• Nilai default : Jika ada banyak orang yang memiliki jawaban yang sama, Anda dapat mengatur jawaban default untuk menghemat waktu dan tenaga pengguna. Misalnya, Anda membuat formulir kontak untuk orang yang tinggal di New York, sehingga Anda dapat memasukkan nilai default "New York" di bidang "Lokasi".
• Kelas CSS : Masukkan kelas CSS di kotak ini untuk memberi gaya pada bidang. Pada langkah selanjutnya, saya akan memasukkan kode di bagian ini untuk menata formulir kontak.

Catatan :

• Di Formulir Kontak 7, Anda bisa menggunakan nilai default sebagai teks placeholder. Tetapi lebih nyaman di WPForms karena Anda memiliki bagian Teks Placeholder yang terpisah. Selain itu, WPForms memiliki bagian Deskripsi yang menampilkan teks di bawah bidang. Saya menggunakan cara ini karena membuat formulir kontak saya terlihat lebih baik.

• Anda dapat mengklik tombol tanda tanya di sebelah opsi / bidang untuk membaca instruksi WPForms untuk mereka.

Selain itu, ada beberapa opsi berbeda tergantung pada masing-masing bidang. Mari kita cari tahu apa itu!

Sesuaikan Bidang "Nama Anda"

Pilih bidang Teks Garis Sederhana dan cukup isi informasi dasar:

Di bidang ini, ada 2 opsi lagi di bagian Opsi Lanjutan :

• Panjang batas : Centang untuk memilih batas maksimum karakter yang dapat dimasukkan ke dalam bidang.
• Input Mask : Masukkan input mask untuk meminta format khusus untuk bidang tersebut. Baca lebih detail di sini.

Sesuaikan Bidang “Nomor Telepon Anda”

Bidang ini tidak ada yang istimewa. Cukup pilih bidang Angka dan isi informasi dasar:

Sesuaikan Bidang "Email Anda"

Pilih bidang Email dan isi informasi dasar untuk bidang tersebut:

Bidang ini memiliki satu opsi dasar lagi: Aktifkan Konfirmasi Email . Anda dapat memeriksanya untuk meminta pengguna memberikan alamat email mereka dua kali. Ini memastikan bahwa email mereka benar.

Sesuaikan Bidang "Lokasi untuk Belajar" dan "Utama"

Pertama, pilih bidang Dropdown . Di bagian Pilihan, masukkan opsi untuk bidang tersebut. Anda dapat mengklik (+) (-) untuk menambah/menghapus pilihan.

Selain itu, Anda juga dapat mengklik tombol Massal Add untuk menambahkan banyak pilihan sekaligus. Pada kotak Add Choices isikan pilihan sesuai urutan yang diinginkan (setiap pilihan berbentuk garis) kemudian klik Add New Choices .

Selain itu, di bidang ini, ada 2 opsi lanjutan yang harus Anda perhatikan:

• Gaya : Anda dapat menata menu tarik-turun dengan dua opsi: klasik dan modern. Gaya modern memungkinkan Anda mencari berdasarkan kata kunci. Oleh karena itu, ini berfungsi dengan baik pada menu dengan banyak opsi (lebih dari 10 opsi).
• Pilihan Dinamis : Memungkinkan pengguna untuk memilih pilihan dari jenis posting atau taksonomi. Misalnya, jika Anda memilih Dynamic Post Type Source sebagai Posts , setiap pilihan di menu tarik-turun adalah postingan di situs web Anda.

Sesuaikan "Daftar ke" Bidang

Pilih bidang Kotak centang dan masukkan pilihan seperti bidang Dropdown .

Di bidang ini, ada 2 opsi lanjutan yang harus Anda perhatikan:

• Gunakan pilihan gambar : Anda dapat menggunakannya untuk mengilustrasikan pilihan Anda dan membuat formulir kontak Anda lebih menarik dan divisualisasikan.
• Pilihan Acak : Ini dapat menghindari orang memilih pilihan hanya karena itu yang pertama.

Langkah 4: Konfigurasikan Formulir Kontak

Setelah membuat formulir kontak, kita perlu mengkonfigurasinya. Dalam versi gratis WPForms, Anda dapat mengonfigurasi tiga bagian di bawah ini:

Konfigurasikan Pengaturan Umum

Plugin WPForms memiliki instruksi khusus untuk setiap opsi di bagian ini. Anda harus mengklik tombol tanda tanya, membacanya dengan seksama, dan memperhatikan bidang-bidang ini:

• Kirim Teks Tombol : Di Formulir Kontak 7, Anda harus membuat bidang Kirim . Tetapi di WPForms, tombol kirim sudah ada di dalamnya. Anda dapat mengubah teks tombol ini di bagian ini menjadi apa pun yang Anda inginkan, seperti Daftar ke, Kirim Email, …
• Aktifkan perlindungan anti-spam : Terkadang spammer mungkin mengganggu Anda melalui banyak "formulir sampah". Dalam hal ini, Anda harus mengaktifkan fitur anti-spam ini.

Konfigurasikan Notifikasi

Jika Anda ingin menerima pemberitahuan email setiap kali pengguna mengirimkan formulir kontak, pindah ke Pengaturan > Pemberitahuan .

Anda dapat menambahkan "tag pintar" atau teks ke bidang di bagian ini untuk mengelola email yang Anda terima saat pengguna mengirimkan formulir kontak dengan lebih mudah.

Catatan : Tag pintar dapat menambahkan informasi ke pemberitahuan formulir kontak Anda secara otomatis.

Ini adalah contoh pengaturan saya:

Konfigurasi Konfirmasi

Di bagian Konfirmasi , Anda dapat mengonfigurasi pesan yang diterima pengguna setelah mereka mengirimkan formulir kontak.

Ketika Anda menyelesaikan semua konfigurasi, cukup klik Simpan .

Langkah 5: Tampilkan Formulir di Halaman / Posting

Untuk menampilkan formulir Anda di halaman/postingan, ada 2 cara.

Cara pertama adalah mengklik Sematkan untuk menampilkan formulir Anda di halaman:

Setelah itu, sematkan formulir kontak di halaman baru atau halaman yang sudah ada di situs Anda.

Cara kedua adalah menyisipkan shortcode form kontak ke halaman/postingan. Saya menyarankan Anda untuk memilih cara kedua karena dapat menampilkan formulir kontak baik pada posting maupun halaman . Untuk melakukannya, di Dasbor Admin , buka WPForms > Semua Formulir , temukan formulir kontak Anda, dan salin kode pendeknya.

Selanjutnya, paste shortcode ini ke postingan/halaman yang diinginkan.

Dan inilah hasilnya:

Itu belum terlihat seperti contoh formulir kontak, jadi saya harus menatanya sedikit.

Langkah 6: Gaya Formulir

Di Dasbor Admin , buka WPForms > Semua Formulir , temukan formulir kontak Anda, lalu klik Edit .

Sekarang, klik setiap bidang, buka Opsi Lanjutan > Kelas CSS , dan tambahkan nilai berikut:

• Nama Anda dan Daftarkan ke : ip-100
• Nomor Telepon Anda , Email , Lokasi Belajar , Jurusan : ip-50

Selanjutnya, buka Customizer > Addition CSS , tambahkan kode ini:

 .wpforms-field-container {
    tampilan: fleksibel;
    bungkus fleksibel: bungkus;
		justify-content: ruang-antara
}

.ip-50 {
    lebar: 48%!penting;
}

.ip-100{
		lebar: 100%!penting;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium {
	lebar maksimum: 100%;
}

.ip-100 ul {
	tampilan: fleksibel;
	justify-content: ruang-antara;
}

div.wpforms-container-full {
    margin-bawah: 24px;
    latar belakang: #eeeeee;
    bantalan: 20 piksel;
}

Terakhir, klik Publikasikan .

Dan inilah hasil akhirnya:

Formulir kontak terlihat lebih baik sekarang, bukan? Nah, kita baru saja menyelesaikan langkah terakhir untuk memiliki bentuk yang benar-benar mirip dengan sampel saya.

Kata-kata terakhir

Dalam pengalaman saya, menggunakan antarmuka seret dan lepas seperti di WPForms lebih mudah dan lebih cepat daripada menggunakan Formulir Kontak 7. Selain itu, ia memiliki tombol kirim yang sudah dibuat sebelumnya dan 2 bagian yang lebih berguna sebagai Teks dan Deskripsi Placeholder . Pratinjau langsung juga sangat nyaman. Ini membantu saya mendeteksi kesalahan dengan lebih mudah saat membuat dan menyesuaikan formulir.

Untuk mempelajari cara menggunakan lebih banyak plugin formulir kontak, ikuti artikel kami yang akan datang dari seri ini! Jika Anda memiliki pertanyaan tentang WPForms atau menyarankan plugin formulir kontak, jangan ragu untuk meninggalkannya di bagian komentar.