reCaptcha V3 error

Uncaught TypeError: grecaptcha.execute is not a function

After I deactivate GDPR Cookie Compliance plugin reCaptcha is not giveing any error. How can I safely use reCaptcha and GDPR Cookie Compliance plugin?

The GDPR Cookie Compliance plugin is now active on the site, right? I didn’t see such errors.

It is active indeed. You see the error in the debug console of the browser.

?ign_skip=5302743257149:1528 Uncaught TypeError: grecaptcha.execute is not a function
at Object.execute (?ign_skip=5302743257149:1528)
at HTMLDocument.executeOnContactform (?ign_skip=5302743257149:1554)
at HTMLInputElement.trigger (jquery.js?ver=1.12.4-wp:3)
at Object.trigger (jquery.js?ver=1.12.4-wp:3)
at Object.a.event.trigger (jquery-migrate.min.js?ver=1.4.1:2)
at HTMLInputElement.<anonymous> (jquery.js?ver=1.12.4-wp:3)
at Function.each (jquery.js?ver=1.12.4-wp:2)
at a.fn.init.each (jquery.js?ver=1.12.4-wp:2)
at a.fn.init.trigger (jquery.js?ver=1.12.4-wp:3)
at a.fn.init.n.fn.<computed> [as click] (jquery.js?ver=1.12.4-wp:4)

Ok. I confirmed you get the error if you’ve selected “Reject” in the cookie popup. I guess that is an expected behavior of the GDPR Cookie Compliance plugin.

But I did not select “Reject” in the cookie popup.

Nevermind, I changed to an other GDPR plugin in the error is gone! Thanks for your response.

Hi @alex160678

This is not a bug in our plugin, the bug is in the Contact Form 7 plugin which checks all the form changes, not only the Contact Form 7 forms.

We are using forms in our plugin, otherwise the switches (on / off) couldn’t work. And because our plugin is JavaScript based plugin, we change the switchers by javascript after page is loaded, so once the site visitors opens the popup screen, they will see the right consent settings.

The issue should be fixed in CF7 plugin to NOT check ALL the forms on the site and activate the recaptcha, activate it only for their forms.

Even if you have an independent form on your theme, or you are using a subscribe to newsletter plugin, the reCaptcha error appears because of wrong coding.

This is the ticket opened on CF7: https://www.ads-software.com/support/topic/recaptcha-v3-error-3/

The function below is part of the CF7 integration, they have to fix it by wrapping the code in file /contact-form-7/modules/recaptcha.php line 78 – 96, so their plugin should wait until the captcha will be ready! This is the instruction from Google too, what is the correct implementation of the reCaptcha:
https://developers.google.com/recaptcha/docs/v3

It’s quite simple, before grecaptcha.execute will be called, they have to check if it’s ready…

This is the current code in their plugin (buggy):

grecaptcha.execute(
				sitekey,
				{ action: action }
			).then( function( token ) {
				var forms = document.getElementsByTagName( 'form' ); <- please note this is not correct, they only have to parse the CF7 forms and keep the rest as it is!

				for ( var i = 0; i < forms.length; i++ ) {
					var fields = forms[ i ].getElementsByTagName( 'input' );

					for ( var j = 0; j < fields.length; j++ ) {
						var field = fields[ j ];

						if ( 'g-recaptcha-response' === field.getAttribute( 'name' ) ) {
							field.setAttribute( 'value', token );
							break;
						}
					}
				}
			} );

This should be the fixed code (fixed, underlined the missing part):

grecaptcha.ready(function() { <- missing from the current CF7 plugin!
				grecaptcha.execute(
					sitekey,
					{ action: action }
				).then( function( token ) {
					var forms = document.getElementsByClassName( 'wpcf7' ); <- this is fixed, only get CF7 form!

					for ( var i = 0; i < forms.length; i++ ) {
						var fields = forms[ i ].getElementsByTagName( 'input' );

						for ( var j = 0; j < fields.length; j++ ) {
							var field = fields[ j ];

							if ( 'g-recaptcha-response' === field.getAttribute( 'name' ) ) {
								field.setAttribute( 'value', token );
								break;
							}
						}
					}
				} );
			}); <- missing closing tags for CF7

Hope this makes sense.

• This reply was modified 5 years, 3 months ago by Moove Agency.

Hi

@alex160678 would you mind share which other GDPR plugin have you chosen ?

Thanks

Hi @jairoochoa, I’m using this one right now: https://www.webtoffee.com/product/gdpr-cookie-consent/ and it works like a charm.

Regards,
Alex

Thanks @alex160678