Contact Form 7 ReCAPTCHA issue

  • Resolved Ian Pegg

    (@ianpegg)


    5 years, 11 months ago

    Hi,

    I’ve just updated to v5.1.1 of CF7 and implemented the new Google ReCAPTCHA v3. It works fine logged in (as all caching is turned off for my admin account), but when logged out the external asset that gets loaded in from https://www.google.com/recaptcha/api.js is requested after the inline script that it supports. This leads to an Uncaught ReferenceError as the inline script gets executed first and so ends up trying to refer to an object that doesn’t exist yet.

    The external resource is added by CF7, so I don’t have the luxury of editing the load order of the script myself without editing the plugin. Because the uncached version of the page works fine, it seems that your plugin is changing the load order of JS resources as part of its optimisation process. Using your plugin, is there a way to give a higher load priority to a particular script so that I could force the external resource to be fetched before the inline script executes?

    Thanks for your help!

Viewing 15 replies - 1 through 15 (of 33 total)
  • Plugin Support qtwrk

    (@qtwrk)

    Hi,

    Please try identify which optimization feature cause it, I assume JS combine or defer? if you disable JS combine/defer, will it help ?

    Best regards,

    Same issue here

    • This reply was modified 5 years, 11 months ago by Tom.
    Thread Starter Ian Pegg

    (@ianpegg)

    Hi @qtwrk,

    Thanks for your response. It seems the act of combining JS is responsible for pushing the external JS (which cannot be combined) beneath both the internal referenced JS resources and the inline JS. From a quick glance at the code it seems the inline script for reCAPTCHA doesn’t wait for onload, so it needs to appear at the very bottom of the <body> tag in order to execute correctly.

    Is there a way to work around this?
    Ian

    Same issue.. with CF7 5.1.1. As suggested I disabled JS Combine and JS Defer and was able to get CF7 5.1.1 working.

    little better.. put /repatcha/api.js in to “JS Excludes” field in the “Tuning Tab” and was able to successfully turn on JS Combine and JS Defer and still get CF7 to work. Now, to check if the spam continues to flow in, but at least the form is working with v3 reCaptcha.

    Thank you for workaround, @davemelbourn, but looks like this doesn’t work. At least for me.
    Error is: grecaptcha is not defined

    As was said previously, this is coused by JS Combine and/or Load JS Deferred
    Tried to put this lines in tuning tab

    /contact-form-7/includes/js/
    /repatcha/api.js

    but it doesnt help at all.

    Plugin Support qtwrk

    (@qtwrk)

    Hi,

    our devs are working on this issue.

    Best regards,

    • This reply was modified 5 years, 11 months ago by qtwrk.
    • This reply was modified 5 years, 11 months ago by qtwrk.
    Plugin Support LiteSpeed Lisa

    (@lclarke)

    Is /repatcha/api.js a typo?
    It looks like it should be /recaptcha/api.js.

    See if adding that to JF Excludes helps.

    Thread Starter Ian Pegg

    (@ianpegg)

    @davemelbourn I can confirm that your (typo corrected — thanks @lclarke) fix worked for me.

    It feels a bit hacky though — was this the intended purpose for JS Excludes? The Recaptcha API script is external and as such is neither combined nor minified by the LS plugin by default. The inline documentation for the JS Excludes field is:

    Listed JS files will not be minified/combined.

    Neither the inline docs nor the wiki refer to changing load order. Changing load order is what we needed to do in this case and is what adding our script to this field just so happens to accomplish. This therefore appears to be a useful side-effect that just so happens to fix our issue.

    Perhaps there is an opportunity to either improve the documentation or else add a new feature that would allow us to specify which scripts we would like to take precedence over combined/minified/inline scripts?

    Plugin Support Hai Zheng?

    (@hailite)

    Yes we will definitely improve this to avoid manual configuring needed to make it work out-of-box. Currently our solution is to add an option some like Add document.ready wrapper for inline JS codes. With it, even the needed library in that inline JS code is moved to bottom, it will still work. This can also improve the compatibility of JS defer for inline JS code too.

    If you have any other idea, please don’t hesitate to let us know.

    Have this issue too

    install previous version 5.0.5

    work fine

    Any update on this? Its still an issue on some sites

    Plugin Support Hai Zheng?

    (@hailite)

    To temporarily fix this, please modify contact-form-7/modules/recaptcha.php

    Line 60 from ( function( grecaptcha, sitekey ) { to document.addEventListener( 'DOMContentLoaded', function( event ) {( function( grecaptcha, sitekey ) {

    Line 90 from } )( grecaptcha, '<?php echo esc_js( $service->get_sitekey() ); ?>' ); to } )( grecaptcha, '<?php echo esc_js( $service->get_sitekey() ); ?>' );} ) ;

    Then the recaptcha v3 and lazyload/combine will work.

    Thanks, this solved the issue on my install.

    Do you know when this will be properly corrected ?

    EDIT : any use in our scenario to this other recommendation ?

    • This reply was modified 5 years, 8 months ago by fneuf. Reason: add_action( ‘wp_footer’, ‘wpcf7_recaptcha_onload_script’, 1, 0 );

    Hi,

    @hailite was this fixed in your plugin?
    We have the latest ver installed but having the same issue described above (with recaptcha error) and also with lazy load not working properly.

    I tired looking in the contact-form-7/modules/recaptcha.php file and se if I can make the temp changes that you suggested, but the lines you mentioned are not there..

    Can you please help?

    Thanks

Viewing 15 replies - 1 through 15 (of 33 total)
  • The topic ‘Contact Form 7 ReCAPTCHA issue’ is closed to new replies.