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

Get Google reCaptcha Site Key And Secret Key

Get Google reCaptcha Site Key And Secret Key

Step 1. Go to Google reCaptcha platform to CLICK HERE.

Step 2. After opening Google reCaptcha website, click on “Admin Console” blue button at the top right side.

 

Step 3. Sign In into your google account to proceed next into reCaptcha dashboard.

Step 4. After Sign in, you will be redirected to your Google reCaptcha dashboard. If you have already generated reCaptcha keys than dashboard show stats about your previously created keys request.

 

Step 5. To get new site key and secret key, click on “+” blue button top right side.

Step 6. Register a new website form will open and you need to fill all the details correctly and submit the form.

  1. Label – Type a suitable label which co-related your site name and for later remembrance.
  2. reCaptcha Type – Select a version type of google captcha security, you can read more about of version details type here.
  3. Domain – The website URL, where you will use these keys like https://mywebsite.com.
  4. Owners – You don’t need to change this, it’s set by default accordingly to logged in account. If you want the report on more email addresses then you can add here multiple email accounts.
  5. Alerts – You can enable it to get email alert to owners, if there is any problem on your website like reCaptcha misconfiguration or increase suspicious traffic.

 

Step 6. After submitting the form you will get newly generated Site Key and Secret Key as below.

Now, you can use the site and secret key in your app to configure the Google reCaptcha setting. Thanks for following our tutorial to generate keys for your website. We hope you like this updated article and this is helpful to you.

Please comment your thought about this tutorial and share on your social media account.

Cheers!