Just recently I was contacted by a client trying to find a WordPress Fix for making his Contact Form 7 work when using Google’s ReCaptcha v.3. It seems that this was actually an issue related to the site’s optimization plugin, WP Rocket.
I had to deal with the same issue today on another client’s WordPress site, only a few days after the first Fix Support Request, so I decided to create a Guide showing How to Fix the grecaptcha not defined warning when using WP Rocket.
How to debug grecaptcha is not defined
If you’re using both WP Rocket and Contact Form7 along with Google’s ReCaptcha addon-on then there is a big chance that your site visitors are having issues sending their requests through your site’s contact forms.
This means that when a visitor is sending his/her request through your website’s Contact Form it will be blocked showing a warning similar to “Your message was classified as spam and unfortunately could not be sent“. Actually, there is a big chance that the form will work if it’s submitted by a logged-in user instead of a visitor so it might be difficult for an admin to notice or debug.
Why grecaptcha isn’t working as it should
As it seems, the WP Rocket JS delay feature doesn’t work that well with Contact Form 7 ReCaptcha module causing requests sent from site visitors to be blocked since Google’s api.js is not loaded on the site frontend.
How to fix the WP Rocket and grecaptcha conflict?
In order to fix this annoying issue, you need to access your WP Rocket’s options page, select the File Optimization tab and scroll all the way down to the Delay Execution settings which should be enabled already.
Below that checkbox setting there is another option that lets you exclude Javascript Files from being delayed. In there you should add the following line which excludes Google’s ReCaptcha JS from WP Rockets Delay JS optimization.
google.com/recaptcha/api.js
Leave a Reply