Do you know why I am writing tutorial on “How to add reCaptcha to Contact Form 7 in Flatsome WooCommerce theme”?
For a couple of days, I get tons of spam email to my inbox. Regularly, I used to spend about a couple of minutes to clear them. Frankly speaking, the very first time, I didn’t have any that there is an automated system which filled a site contact form and sends emails. Consequently, you get many unwanted emails every day.
As I am using Contact Form 7 for wpcred.com, I started searching to protect my contact form from such emails. Thankfully, I found a free reCaptcha service brought by Google. Let me show you add reCaptcha to Contact Form 7 in Flatsome WooCommerce theme.
How To Add reCaptcha To Contact Form 7 In Flatsome Theme
Before head to the forward. Let me explain about reCaptcha server in short. reCaptcha is a free service by Google. it protects websites from spamming and other abuses.
It has an advanced risk analysis engine which detects abusive activists softwares. And try to restrict them throwing captchas.
Let enable reCaptcha on your Contact Form 7 powered forms. For demonstration purpose, I’ll enable reCaptcha on my Contact Me page. Currently, my contact form looks like the following screenshot.
Step 01: Activate Contact Form 7 Captcha
Besides Contact Form 7, you have to have Contact Form 7 Captcha plugin enabled. To enable the plugin, head to Plugins >> Add New and search for “Contact Form 7 Captcha“. Install and activated the indicated plugin in the following screenshot.
After the installation and activation of Contact Form 7 Captcha, navigate to the plugin settings page.
Step 02: Configure Contact Form 7 Captcha
If you are inside the plugin settings page, you must find the instruction to add this shortcode: [ cf7sr-simple-recaptcha ] to your desired contact form to implements “I’m not a robot” checkbox.
Step 03: Add Captcha Shortcodes inside Form Codes
Navigate to Contact >> Contact Forms and get inside your desired form codes. From the Form tab, add shortcode: [ cf7sr-simple-recaptcha ] before the submit button.
After adding the code, the frontend would look like the following screenshot. Don’t panic if you don’t see any “I’m not a robot” checkbox.
You might be worried to see the bare shortcodes. It happening we haven’t linked Contact Form 7 Captcha with Google reCaptcha API. The reCaptcha API comes with Site key and Secret key add add in the following fields. You can access the setting from Settings >> CF7 Simple Recaptcha.
Step 04: Generate Site Key and Secret Key
To generate Site key and Secret key, click here.
To generate keys, fill Label field your desired app title. I put my site name: wpcred. Make sure you have reCAPTCHA v2 and “I’m not a robot” Checkbox Select. Add domain name and accept the reCaptcha terms. Press Submit button to continue.
After clicking the submit button, you would have the Site Key and Secret.
Step 04: Fill Site Key and Secret Key
After having Site Key and Secret. Fill the Site Key and Secret Key field from the Settings >> Settings >> CF7 Simple Recaptcha. When keys are added, the contact form would look like the following screen.
Conclusion
Hopefully, you have understood my guideline on “How To add reCaptcha to Contact Form 7 in Flatsome WooCommerce theme“. If you find any difficulty to follow this tutorial let me know in the comment below.
Don’t forget to inform me in which topic, you want to have the next tutorial. I’ll write the next tutorial for you.
