Cara Integrasi/Hubungkan Contact Form 7 dengan Google CAPTCHA

Sebagai salah satu form input, halaman kontak perlu dilindungi dari spambots. Dan salah satu yang efektif mencegahnya yaitu menggunakan reCAPTCHA, dan yang sedang populer adalah reCAPTCHA besutan google, “Saya bukan robot (I’m not robot)”.

versi-2
Version 2 dengan warna terang (light)

Catatan: untuk penambahan reCaptcha Google lihat informasi catatan update di akhir artikel ini sebelum mulai.

Anda juga dapat menggunakan cara lain untuk memfilter spam yaitu dengan Akismet, baca di Hubungkan Akismet dengan Contact Form 7, Saring Spam

Contact Form 7 sebagai salah satu plugin yang populer dan gratis telah mendukung penggunaan reCAPTCHA pada inputan formnya. Untuk cara penggunaannya dapat di baca di cara membuat formulir kontak dengan Contact Form 7. Sedangkan kali ini tutorial akan membahas cara mengintegrasikan dengan Google reCAPTCHA.

Tetapi untuk mengintegrasikan Contact Form 7 dengan Google CAPTCHA sebelumnya Anda harus melakukan sedikit registrasi untuk mendapatkan API key dari Google CAPTCHA, yang dibutuhkan Site Key dan Secret Key, cukup dua kata kunci tersebut.

Cara mendapatkan API key tersebut juga tidak sulit, Anda hanya perlu melalukan beberapa langkah, pertama masuk ke Contact >> Integration pada halaman administrator WordPress Anda. Klik url yang ada di pojok kanan atas google.com/recaptcha.

integrasi CF7 - recaptcha1

Anda akan di bawa ke halaman Google reCAPTCHA, klik Get reCAPTCHA.

integrasi CF7 - recaptcha2

Untuk cara mendapatkan key selanjutnya dapat Anda baca di Cara dapatkan API Key Google CAPTCHA.

Setelah Anda mendapatkan Site Key dan Secret Key kembali ke Contact >> Integration di admin WordPress Anda, lalu klik Configure Keys yang akan membuka isian Site Key dan Secret Key. Masukkan kedua key yang telah Anda dapatkan dari Google tersebut dan klik Save.

integrasi CF7 - recaptcha3integrasi CF7 - recaptcha4

Menambahkan CAPTCHA pada form input

Untuk menambahkan CAPTCHA pada form isian kontak, klik menu Contact. Pilih kontak form yang ingin ditambahkan CAPTCHA.

integrasi CF7 - recaptcha5

Pada Form, taruh kursor sebelum submit dan beri jarak enter, klik tombol tag reCAPTCHA di atas. Akan tampil popup pengaturan tampilan reCAPTCHA, pilih size dan Theme. Kemudian klik Insert Tag.

integrasi CF7 - recaptcha6

Tambahkan diantaranya <label></label>, Kurang lebih akan seperti ini:

integrasi CF7 - recaptcha7

Jangan lupa klik Save untuk menyimpan form kontak. Kalau sudah silahkan cek kontak form Anda, lihat sebelum tombol submit.

Cara membuat Form Kontak dengan Contact Form 7.

Catatan Update!

Pada Contact Form 7 versi 5.01 terjadi beberapa permasalah terhadap penambahan reCaptcha Google ini, ikuti link di bawah ini jika ingin menambahkan reCaptcha.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *