Form kontak mempunyai manfaat yang sangat besar. Dengan tersedianya form kontak di website, pengunjung bisa menghubungi Anda dengan mudah. Mereka bisa langsung mengirim pesan tanpa harus repot membuka aplikasi email.
Ada banyak sekali plugin di WordPress baik itu yang gratis maupun premium yang bisa Anda gunakan untuk membuat form kontak di WordPress. Plugin premium atau berbayar contohnya yaitu WPForms, Gravity Forms, Pirate Forms, Ninja Forms, dan Formidable Pro. Sedangkan yang gratisan lebih banyak lagi jumlahnya.
Pada artikel ini saya akan membahas cara membuat form kontak di WordPress dengan salah satu plugin gratisan yang sangat populer yaitu Contact Form 7.
Apa Itu Contact Form 7?
Contact Form 7 merupakan plugin yang paling banyak digunakan untuk membuat form kontak di WordPress. Tampilannya sangat sederhana dan mudah digunakan. Selain itu plugin Contact Form 7 ini juga bisa didownload secara gratis dari situs WordPress.org.
Fitur yang ditawarkan oleh Contact Form 7 yaitu sebagai berikut:
- Tampilan sangat sederhana dan mudah digunakan.
- Adanya shortcode menjadikan form kontak bisa ditampilkan di mana saja, baik itu Page, Post maupun sidebar.
- Perlindungan terhadap spam cukup baik, dengan metode Akismet, quiz, reCAPTCHA maupun plugin tambahan lain seperti HoneyPot.
- Tampilan tiap form dan setting email bisa dimodifikasi dengan tag atau kode yang mudah dipahami.
- Bisa digunakan dalam berbagai bahasa dengan mudah.
- Jumlah form kontak yang bisa Anda buat di satu halaman website tidak dibatasi.
- Tersedia banyak sekali plugin tambahan yang bisa dipakai untuk meningkatkan fungsionalitas Contact Form 7.
Instalasi Contact Form 7
Plugin Contact Form 7 bisa diinstall secara langsung lewat panel administrasi WordPress. Setelah login ke panel administrasi WordPress, klik menu Plugins > Add New. Selanjutnya ketikkan “contact form 7” pada kolom pencarian seperti contoh di bawah ini lalu tekan enter.
Selanjutnya akan muncul plugin yang dimaksud serta berbagai macam plugin WordPress lainnya yang berkaitan dengan Contact Form 7. Klik tombol Install Now pada plugin Contact Form 7 untuk memulai proses instalasi. Contohnya bisa dilihat pada gambar di bawah ini.
WordPress akan mendownload dan menginstall plugin Contact Form 7 di website Anda. Tunggu hingga proses instalasi selesai. Selanjutnya akan muncul tombol Activate. Klik tombol tersebut untuk mengaktifkan plugin Contact Form 7.
Sekilas Tampilan Admin Contact Form 7
Setelah plugin Contact Form 7 tersebut aktif, pada daftar menu administrasi WordPress akan muncul menu baru dengan nama “Contact”. Klik menu Contact > Contact Forms untuk melihat daftar form kontak yang ada di WordPress.
Berikut ini tampilan halaman depan admin Contact Form 7.
Di bagian atas terdapat tombol Add New yang berfungsi untuk membuat form kontak baru. Di bawahnya terdapat tabel yang memuat daftar form kontak yang sudah dibuat. Sebagai informasi, pada saat instalasi secara otomatis akan dibuatkan sebuah form kontak dengan judul “Contact Form 1”.
Setiap form kontak mempunyai judul dan shortcode. Shortcode merupakan kode khusus yang akan kita gunakan untuk menampilkan form kontak di halaman website baik itu Post, Page maupun sidebar.
Jika Anda klik judul form kontak maka akan muncul halaman editor form kontak tersebut seperti gambar di bawah ini.
Anda bisa mengatur konfigurasi form kontak dengan mengklik tab yang ada di bagian atas.
- Form – Tab ini digunakan untuk mengatur tampilan form kontak.
- Mail – Tab ini digunakan untuk mengatur konfigurasi email.
- Messages – Tab ini digunakan untuk mengatur pesan kesalahan dan notifikasi.
- Additional Settings – Tab ini digunakan untuk menambahkan konfigurasi lain.
Menampilkan Form Kontak
Seperti yang sudah saya singgung di atas, setiap form kontak mempunyai sebuah shortcode yang berfungsi untuk menampilkan form kontak tersebut pada halaman website, baik itu Page, Post maupun sidebar.
Untuk menampilkan form kontak caranya sangat mudah. Kopikan shortcode pada form kontak yang ingin Anda tampilkan lalu sisipkan di editor halaman website seperti contoh pada gambar di bawah ini.
Cukup itu saja caranya. Nah, setelah mengklik tombol Publish, Anda akan bisa melihat tampilan form kontak tersebut seperti gambar di bawah ini.
Mengatur Konfigurasi Form
Klik tab Form pada halaman editor form kontak untuk mengatur konfigurasi form seperti contoh di bawah ini.
Perhatikan gambar di atas.
Pada bagian atas terdapat tombol-tombol untuk menyisipkan kode-kode tertentu yang disebut dengan tag pada form kontak. Jika Anda klik tombol tersebut maka akan muncul sebuah kotak dialog yang akan memudahkan Anda dalam mengatur konfigurasi tag.
Di bawah tombol-tombol tag tersebut terdapat sebuah editor HTML yang berfungsi untuk mengatur susunan tag yang digunakan pada form kontak tersebut.
Pada contoh form kontak di atas terdapat 4 kolom isian dengan label Your Name, Your Email, Subject dan Your Message serta sebuah tombol Send. Sedangkan tag yang digunakan yaitu text, email, textarea dan submit.
Anda bisa mengubah tampilan setiap kolom isian tersebut dengan mengatur atribut yang dimiliki oleh setiap tag yang digunakan. Saya akan membahas lebih jauh apa saja atribut yang dimiliki oleh setiap tag tersebut di bagian akhir artikel ini.
Mengatur Konfigurasi Mail
Klik tab Mail untuk mengatur konfigurasi mail pada form kontak.
Pada bagian konfigurasi Mail ini juga terdapat tag atau kode yang bisa Anda masukkan ke dalam kolom pengaturan. Namun demikian tag tersebut berbeda dengan tag yang digunakan di bagian konfigurasi Form. Daftar tag yang bisa dipakai menyesuaikan dengan tag yang dipakai di bagian konfigurasi Form. Anda bisa melihat daftar tag di bagian atas konfigurasi Mail tersebut.
Pada contoh form kontak ini, tag yang tersedia dan bisa dipakai di konfigurasi Mail yaitu [your-name], [your-email], [your-subject] dan [your-message]. Perhatikan bahwa tag pada bagian konfigurasi Mail tersebut sama persis dengan nama dari setiap tag yang digunakan di bagian konfigurasi Form. Misalnya your-name merupakan nama dari tag [text* your-name].
Berikut ini beberapa kolom pengaturan yang perlu diperhatikan:
- To – Alamat email yang akan digunakan untuk menerima pesan pada saat form tersebut dikirim. Silakan gunakan alamat email yang masih aktif di kolom isian ini.
- From – Alamat email yang nantinya menjadi identitas pengirim pesan.
- Subject – Judul pesan yang akan dikirimkan ke alamat email Anda. Kolom ini tidak boleh dikosongkan. Contohnya yaitu [your-subject].
- Additional Headers – Biasanya isinya yaitu Reply-To: [your-email]. Anda tidak perlu mengutak-atik kolom ini. Biarkan saja apa adanya.
- Message Body – Gunakan tag atau kode yang ada di bagian atas konfigurasi Mail untuk mengatur format pesan yang akan dikirimkan ke alamat email Anda.
Sebagai catatan, alamat email pada kotak isian From harus menggunakan nama domain yang sama dengan alamat website Anda. Standarnya adalah wordpress@namadomain.com.
Jika bingung, Anda tidak perlu mengutak-atik kolom isian ini. Biarkan saja apa adanya, tidak perlu diubah.
Mengatur Konfigurasi Messages
Klik tab Messages untuk mengatur tampilan pesan kesalahan dan notifikasi pada form kontak.
Lebih Lanjut Dengan Tag Form
Seperti yang sudah disinggung di atas, tampilan form pada Contact Form 7 diatur dengan kode-kode tertentu yang disebut dengan tag. Setiap tag harus ditulis di dalam tanda []. Secara umum penulisan tag mengikuti pola sebagai berikut:
[TAG ID-TAG]
Contohnya yaitu: [text your-subject]
Pada contoh di atas, text merupakan kode tag sedangkan your-subject merupakan ID tag. ID tag selanjutnya digunakan untuk menyimpan data yang dimasukkan oleh user lewat kolom isian tersebut.
Contact Form 7 sudah menyediakan template untuk memudahkan Anda dalam mengatur atribut dari tag-tag tersebut. Klik saja tombol tag di bagian konfigurasi Form dan selanjutnya akan muncul template yang tinggal Anda isi. Contohnya bisa dilihat pada gambar di bawah ini.
Ada 15 tag standar yang disediakan oleh Contact Form 7, yaitu text, email, url, tel, number, date, textarea, select, checkbox, radio, acceptance, quiz, recaptcha, file dan submit. Dari sekian tag standar tersebut hanya sedikit yang biasa digunakan yaitu text, email, textarea, dan submit.
Mencegah Spam Pada Form Kontak
Spam atau pesan-pesan sampah adalah gangguan serius yang akan Anda hadapi apabila memiliki form kontak di WordPress. Spam biasanya dikirim secara otomatis menggunakan software khusus yang disebut dengan spambot.
Untuk mencegah adanya spam, Anda harus melengkapi form kontak dengan pengaman atau filter. Ada beberapa cara yang bisa digunakan yaitu metode Quiz, Akismet, reCAPTCHA dan HoneyPot. Anda bisa memilih salah satu dari beberapa metode tersebut untuk mencegah spam di form kontak Anda.
Metode Quiz
Quiz merupakan metode yang sederhana untuk mencegah adanya spam dengan cara memberikan pertanyaan kepada pengunjung ketika mereka mengisi form kontak di website Anda. Jika jawabannya salah maka form kontak tidak akan terkirim.
Caranya yaitu klik tombol Quiz pada editor Form. Selanjutnya akan muncul tampilan wizard untuk mengatur tampilan Quiz. Tugas Anda adalah mengisi kotak masukan sesuai dengan yang diminta.
Contohnya bisa dilihat pada gambar di bawah ini:
Bagian yang diberi tanda nomor 1 adalah nama tag. Anda bisa mengubahnya bisa juga tidak. Nomor 2 adalah daftar pertanyaan yang harus dijawab oleh pengunjung beserta jawabannya. Antara pertanyaan dan jawaban harus dipisahkan dengan tanda |.
Anda bebas menentukan pertanyaan yang harus dijawab oleh pengunjung. Bisa berupa hitung-hitungan matematika, pertanyaan dengan jawaban singkat, dan sebagainya. Yang penting jawaban dari pertanyaan tersebut harus pasti dan tidak membingungkan.
Berikut ini contoh daftar pertanyaan dan jawabannya:
Berapa 2 x 12|24
Apa nama ibukota Perancis|Paris
Siapa presiden pertama Republik Indonesia?|Sukarno
Bulan apa Indonesia merdeka?|Agustus
Anda bisa memasukkan pertanyaan sebanyak-banyaknya pada kotak tersebut dengan ketentuan satu baris untuk satu pertanyaan dan jawaban. Nantinya pertanyaan tersebut akan muncul pada form kontak secara acak.
Bagian yang diberi tanda nomor 3 adalah kode yang digunakan untuk menampilkan Quiz pada form kontak. Klik tombol Insert Tag untuk menyisipkan kode tersebut pada editor Form.
Selanjutnya pada editor Form Kontak secara otomatis akan disisipkan kode untuk menampilkan Quiz tersebut. Contohnya bisa dilihat pada gambar di bawah ini.
Klik tombol Save untuk menyimpan setting form kontak tersebut. Selanjutnya buka halaman web yang memuat form kontak tersebut untuk melihat hasilnya. Contohnya bisa dilihat pada gambar di bawah ini.
Metode reCAPTCHA
Untuk menggunakan cara ini Anda harus membuat akun Google terlebih dahulu lalu mendaftarkan website yang akan Anda pasangi kode reCAPTCHA tersebut untuk memperoleh kode API.
Pertama, kunjungi halaman administrasi Google reCAPTCHA. Klik tombol Get reCAPTCHA lalu daftarkan website Anda.
Selanjutnya Anda akan memperoleh dua kode API yaitu Site Key dan Secret Key seperti contoh pada gambar di bawah ini.
Langkah selanjutnya yaitu klik menu Contact > Integration pada panel administrasi WordPress. Pada halaman “Integration with Other Services” klik tombol Configure Keys lalu masukkan kedua kode API tersebut ke kolom isian reCAPTCHA di WordPress. Contohnya bisa dilihat pada gambar di bawah ini.
Terakhir, edit form kontak lalu klik tombol reCAPTCHA untuk menambahkan reCAPTCHA ke dalam form kontak tersebut. Contohnya bisa dilihat pada gambar di bawah ini.
Metode Honeypot
Contact Form 7 Honeypot adalah plugin WordPress yang berfungsi untuk mencegah spam pada Contact Form 7 dengan cara menambahkan kolom isian yang tersembunyi pada form kontak yang tidak bisa dilihat oleh manusia.
Prinsip kerjanya sangat sederhana yaitu memanfaatkan kelemahan robot spam yang biasanya akan mengisi semua kolom isian pada form yang menjadi targetnya, termasuk kolom isian yang tersembunyi (hidden).
Dengan memasang plugin Honeypot, jika kolom isian yang tersembunyi tersebut ada isinya maka akan dianggap sebagai spam dan pesan tidak akan terkirim.
Bagaimana cara menggunakan plugin tersebut?
Pertama, install dan aktifkan plugin Contact Form 7 Honeypot di WordPress. Selanjutnya edit form kontak dan tambahkan Honeypot dengan mengklik tombol Honeypot pada Form Tag Generator.
Contohnya bisa dilihat pada gambar di bawah ini.
Itulah beberapa cara untuk menangkal spam di Contact Form 7. Silakan dipilih mana cara yang dianggap paling mudah.
Contact Form 7 bisa dipakai untuk membuat berbagai macam form, tidak hanya form kontak saja. Contoh lainnya yaitu form konfirmasi pembayaran, form untuk upload dokumen, dan sebagainya.
