Hi @alex160678 and @jairoochoa
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.
