Panduan Membuat Form Kontak di WordPress Dengan Contact Form 7

panduan wordpress contact form 7

Form kontak mempunyai manfaat yang sangat besar. Dengan tersedianya form kontak di website, pengunjung bisa menghubungi kita 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 kita 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 kita 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?

wordpress 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 kita 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.

search contact form 7

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.

install contact form 7

WordPress akan mendownload dan menginstall plugin Contact Form 7 di website kita. 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.

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 kita klik judul form kontak maka akan muncul halaman editor form kontak tersebut seperti gambar di bawah ini.

edit contact form 7

Kita 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 kita 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 kita tampilkan lalu sisipkan di editor halaman website seperti contoh pada gambar di bawah ini.

shortcode contact form 7

Cukup itu saja caranya. Nah, setelah mengklik tombol Publish, kita akan bisa melihat tampilan form kontak tersebut seperti gambar di bawah ini.

tampilan contact form 7

Mengatur Konfigurasi Form

Klik tab Form pada halaman editor form kontak untuk mengatur konfigurasi form seperti contoh di bawah ini.

contact form 7 configuration

Perhatikan gambar di atas.

Pada bagian atas terdapat tombol-tombol untuk menyisipkan kode-kode tertentu yang disebut dengan tag pada form kontak. Jika kita klik tombol tersebut maka akan muncul sebuah kotak dialog yang akan memudahkan kita 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.

Kita bisa mengubah tampilan setiap kolom isian tersebut dengan mengatur atribut yang dimiliki oleh setiap tag yang digunakan. Kita 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.

contact form 7 mail

Pada bagian konfigurasi Mail ini juga terdapat tag atau kode yang bisa kita 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. Kita 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 kita. Kolom ini tidak boleh dikosongkan. Contohnya yaitu [your-subject].
  • Additional Headers – Biasanya isinya yaitu Reply-To: [your-email]. Kita 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 kita.

Sebagai catatan, alamat email pada kotak isian From harus menggunakan nama domain yang sama dengan alamat website kita. Standarnya adalah wordpress@namadomain.com. Jika bingung, kita 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.

contact form 7 message

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-subjectmerupakan 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 kita dalam mengatur atribut dari tag-tag tersebut. Klik saja tombol tag di bagian konfigurasi Form dan selanjutnya akan muncul template yang tinggal kita isi. Contohnya bisa dilihat pada gambar di bawah ini.

contact form 7 tag generator

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 kita hadapi apabila memiliki form kontak di WordPress. Spam biasanya dikirim secara otomatis menggunakan software khusus yang disebut dengan spambot.

Untuk mencegah adanya spam, kita harus melengkapi form kontak dengan pengaman atau filter. Ada beberapa cara yang bisa digunakan yaitu metode Quiz, Akismet, reCAPTCHA dan HoneyPot. Kita bisa memilih salah satu dari beberapa metode tersebut untuk mencegah spam di form kontak kita.

1. Metode Quiz

Quiz merupakan metode yang sederhana untuk mencegah adanya spam dengan cara memberikan pertanyaan kepada pengunjung ketika mereka mengisi form kontak di website kita. 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 kita adalah mengisi kotak masukan sesuai dengan yang diminta.

Contohnya bisa dilihat pada gambar di bawah ini:

contact form 7 quiz

Bagian yang diberi tanda nomor 1 adalah nama tag. Kita 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 |.

Kita 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

Kita 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.

contact form 7 quiz

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.

2. Metode reCAPTCHA

Untuk menggunakan cara ini kita harus membuat akun Google terlebih dahulu lalu mendaftarkan website yang akan kita pasangi kode reCAPTCHA tersebut untuk memperoleh kode API.

Pertama, kunjungi halaman administrasi Google reCAPTCHA. Klik tombol Get reCAPTCHA lalu daftarkan website kita.

recaptcha admin

Selanjutnya kita akan memperoleh dua kode API yaitu Site Key dan Secret Keyseperti contoh pada gambar di bawah ini.

recaptcha key

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.

wordpress recaptcha

Terakhir, edit form kontak lalu klik tombol reCAPTCHA untuk menambahkan reCAPTCHA ke dalam form kontak tersebut. Contohnya bisa dilihat pada gambar di bawah ini.

contact form 7 recaptcha

3. Metode Honeypot

contact form 7 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.

edit form honeypot

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.

Leave a Reply

Your email address will not be published. Required fields are marked *