How to Add Google reCaptcha To Contact Form 7 In Flatsome WooCommerce Theme

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.

contact form wpcred

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.

activated contact form7

After the installation and activation of Contact Form 7 Captcha, navigate to the plugin settings page.

contact form 7 captcha setting

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.

contact form 7 captcha shortcode

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.

contact form 7 captcha shortcode inside forms

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.

contact form 7 captcha shortcode not working

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.

contact form 7 captcha site key and secret key

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.

contact form 7 recaptcha api setting

After clicking the submit button, you would have the Site Key and Secret. 

Google reCaptcha API site and secret key.

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.

working contact form with google reCaptcha enabled

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.