Tag: Google reCAPtCHA In Contact Form 7

Uncaught ReferenceError Grecaptcha is not Defined Contact Form 7

Last day I have implemented Google ReCaptcha in Contact Form 7 plugin on our live MediHealth Premium WordPress Theme demo website.

But, the next day when I was checking the portfolio pages for the theme testing, I found filters are getting stuck after clicking on any single filter category. I have checked the console immediately for the issue and found the error as shown below in the screenshot.

Contact Form 7 Google ReCaptcha Error

Then I Googled the error using this error string: “Uncaught ReferenceError Grecaptcha is not Defined Contact Form 7″

But after spending couple of minutes and surfing some top Google search results, I realize there is no proper solution for this issue even on Contact Form 7 support forum.

So I have decided to figure it out myself. I thought there might be some clue at the Contact Form 7 ReCaptcha integration page.

I found there is a clear link to Google ReCaptcha v3 docs by the author.

After checking this, I realize that the Recaptcha key version was not properly configured and Google Recaptcha v2 site key and secret key was used instead of v3. So, that’s the wrong step which I followed in hurry and got this error.

Then I generated Google ReCaptcha v3 site key and secret key for the plugin added into integration form and visited the site again to check the error. Finally, the error was gone and Google ReCaptcha v3 displayed at the bottom right corner side.

I hope after reading this silly mistake you will fix your error too. Sometimes in hurry, we ignore to read important instructions and make mistakes.

So, our suggestion to all WordPress users and developers read all the instructions carefully and follow them step by step to avoid such situations.

You might also like – How to make contact form in WordPress

How To Add Google reCAPTCHA In Contact Form 7

Many people are using “Contact Form 7” and also many install it every day. Contact form is a secure plugin but they still people get spam because they don’t know what is Google reCAPTCHA  and how to add it in Contact Form 7. In this post, we will give you step by step instructions for Google reCAPTCHA Integration with Contact Form 7.

Contact Form7

Contact form 7 is the most popular plugins for creating lead generating forms. It is easy to integrate and equally easy to use. Contact Form 7 is also used with many themes that have integrated contact forms because those forms do not require customization and high-level options.

Features of Contact Form 7

Here are some features of the Contact Form 7.

  • It provides customization options to fit your needs.
  • Simple and easy implementation and integration process.
  • It also supports Google reCAPTCHa for security.

Google reCAPTCHA

reCAPTCHA is a free service offered by Google that protects your website against spam and abuse. Basically, reCAPTCHA uses an advanced risk analysis engine and adaptive challenges to keep away automated software from engaging in abusive activities on your site. It allows valid users pass through with ease while stopping spamming activities.

Let’s start to Google reCAPTCHA integration in contact form 7

Just go to Contact > Integration from your left admin sidebar.

Setup New Integration

Now click on “Setup Integration” button.

You’ll see the reCAPTCHA integration box with two input fields. For these fields, you need keys to connect through Google API.

Create New Keys

Now you need to create new keys for your site, to create these keys we need to go Google reCAPTCHA page.

You can visit this Link Google reCAPTCHA

After the opening Google reCAPTCHA page, you have to click on the Admin console button.

Now sign-in with your official email, to access Google reCAPTCHA dashboard.

After reaching to Google reCAPTCHA dashboard, click on the “+” button to generate the keys.

Now you need to fill the form to register your site on Google reCAPTCHA.

  1. Lable – You can set label as you like.
  2. reCAPTCHA Type – Select the reCAPTCHA version, you can get more information about reCAPTCHA version here.
  3. Domains – Add your site domain name, where you want to use keys.
  4. Owners – It’s by default added your sign in email, you can also change it if you want.
  5. reCAPTCHA Terms – Click to accept the reCAPTCHA API use terms.
  6. Alerts – Click to accepts alerts information, it will give you information about any problem related to your reCAPTCHA configurations.

After submitting this form you will get your reCAPTCHA site key and secret key.

Now Copy your Keys and paste into the reCAPTCHA integration form of “Contact Form 7”.

After insert both keys the google reCaptcha will be displayed on your contact page at the bottom.

Thanks for the reading our post if you like our post then please comment & share your feedback with us.

It will be appreciated.