Dalam sebuah website, kebutuhan form contact cukup penting. Kegunaannya juga beragam, yang paling utama biasanya untuk mengumpulkan contact email dari pengunjung website kita. Ini berguna jika kita ingin melakukan action lebih lanjut, misalnya contact email tsb akan kita jadikan target dalam pengiriman informasi produk atau jasa yang kita tawarkan ke mereka.
Di postingan kali ini, kita akan belajar cara membuat contact form menggunakan plugin yang populer, yaitu Contact Form 7. Untuk contoh kali ini, fungsi dari contact form ini kita tujukan untuk mendapatkan feedback dari pengunjung website ini.
Silahkan kamu install plugin Contact Form 7 melalui menu : Plugins – Add New, lalu lakukan aktivasi dengan klik tombol Activate. Jika sudah, maka akan muncul menu Contact pada panel menu kiri. Langsung saja klik Menu Contact – Add New, maka akan muncul tampilan seperti gambar dibawah ini.
Untuk Contact Form contoh ini, kami memberi nama : Feedback Fom.
Nah, perhatikan di situ ada label, berikut kegunaan dari tiap label tsb :
- Your-name : untuk isian nama pengunjung website
- Your-email : untuk isian email pengunjung website
- Subject : untuk isian judul email
- Your message : untuk isian feedback atau pesan yang ingin disampaikan
Kita juga bisa menambahkan beberapa isian baru, misal jenis kelamin, umur dan upload file, yuk kita coba.
- Gender : menggunakan tag radio buttons
- Age : menggunakan tag number
- Photos :menggunakan tag file
Untuk jelasnya, bisa dilihat gambar di bawah ini.
Isian gender menggunakan tag radio buttons , attribute seperti gambar dibawah ini.
Isian Age menggunakan tag number, attribute seperti gambar dibawah ini. Untuk Required field yg dicentang, artinya wajib dipilih. Untuk range artinya hanya bisa diisi dengan angka antara 15 sampai 75. Kamu bebas menentukan sendiri isiannya ya.
Isian Your Photo (file) menggunakan tag file, attribute seperti gambar dibawah ini. Untuk Required field tidak dicentang, artinya tidak wajib diisi. Untuk file size limit (bytes) diisi 1.000.000 bytes artinya maksimal filesize yg diupload adalah 1Mb. Untuk Acceptable file types, diisi jpg, jpeg, gif & png , artinya hanya file dengan tipe-tipe tsb yang bisa diupload, selain itu ditolak.
Hasil dari tambahan isian tsb dapat dilihat pada gambar dibawah ini. Perhatikan kotak warna merah, itu untuk tambahan tab table title di setiap isian yang baru kita buat. Title disesuaikan dengan fungsi dari tiap-tiap isian baru tsb. Khusus untuk isian Your gender ( kotak warna orange ) , karena itu adalah isian multiple, maka tidak menggunakan tab label. Jangan lupa untuk menyimpan Form Contact yang baru saja kita buat ini, dengan klik tombol Save sesuai gambar dibawah.
Sampai sini apakah sudah selesai ? ternyata belum 🙂 Kita masih harus meng-connect-kan form utama yang barusan kita susun ke dalam body email yang akan terkirim ke email kita disaat pengunjung website kita mengisi Form Contact tsb. Caranya dengan masuk ke settingan Mail seperti gambar dibawah ini.
Berikut keterangan dari tiap element pada tab Mail tsb.
- To : semua isian pada Contact Form akan terkirim ke isian To, settingan default akan mengambil alamat email dari admin website. Kamu bisa juga mengisinya dengan alamat email yang lain.
- Form : akan terisi site title dari website tsb dan akun email default dari wordpress.
- Subject : akan terisi dari isian Subject
- Additional headers : akan terisi dari isian email pengunjung website
- Message Body : akan terisi oleh isian-isian sesuai dengan element Form Contact yang sudah dibuat sebelumnya.
Form Contact baru ini akan tampil pada list Contact Form, klik menu Contact – Contact Forms pada panel menu kiri. Hasilnya seperti gambar di bawah ini. Perhatikan pada kolom Shortcode, ini akan kita siapkan untuk di copy-paste ke page baru saat kita akan menampilkan Feedback Form tsb untuk bisa digunakan pengunjung website.
Kemudian kita akan membuat Page baru untuk disisipkan Form Contact ini. Pilih menu Pages – Add New, beri nama page tsb, misal Feedback Pengunjung. Lalu sisipkan shortcode Feedback Form (Form Contact) yang baru saja kita buat pada page Feedback Pengunjung. Sisipkan shortcode tsb di body page dengan sebelumnya pilih tab Text. Jangan lupa untuk menyimpan dengan klik tombol Publish ( panah orange) dan kita bisa test untuk melihat hasil akhir dari pembuatan Contact Form ini dengan mengakses URL pada Permalink yang ditunjukkan panah hijau Contoh seperti gambar dibawah ini.
