Support » Plugin: Contact Form 7 » reCaptcha V3 error

  • Resolved alex160678

    (@alex160678)


    Hi, I keep getting this error:

    Uncaught TypeError: grecaptcha.execute is not a function

    This issue appears on the latest version ( 3.0.1). Latest WP version is installed 5.2.3.

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

    I have reached out to the GDPR team and they wrote this:
    Thanks for using our plugins.

    We have checked the reCaptha v3 issue, and the problem is coming from Contact Form 7 plugin. In their javascript they are using a function which will parse all the forms not only the CF7 form: var forms = document.getElementsByTagName( ‘form’ );
    Our plugin uses checkboxes where the users can enable / disable the cookies, these are wrapped with form tags.
    You can ask CF7 support team to fix their plugin to parse only their forms and keep the rest of the forms in the site without reCaptcha validations.

    Hope this makes sense.

    Can you help me out here? Thanks already.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    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)

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    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://wordpress.org/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 1 week, 4 days ago by Moove Agency.
Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.