Conflict with HappyForms

  • Resolved Mark Cutting

    (@mcutting)


    5 years, 7 months ago

    Hi. Looks like this great plugin has a conflict with HappyForms in the sense that it appears to block the ReCaptcha from displaying:

    recaptcha.js?ver=5.1.1:24 Uncaught ReferenceError: grecaptcha is not defined
    at HappyForms.Part.render (recaptcha.js?ver=5.1.1:24)
    at HappyForms.Part.init (recaptcha.js?ver=5.1.1:14)
    at a.fn.init.$.fn.happyFormPart (frontend.js?ver=1.7.9:330)
    at Object.HappyForms.wrapPart (frontend.js?ver=1.7.9:125)
    at HTMLDivElement.<anonymous> (frontend.js?ver=1.7.9:152)
    at Function.each (jquery.js?ver=1.12.4:1)
    at a.fn.init.each (jquery.js?ver=1.12.4:1)
    at HappyForms.Form.init (frontend.js?ver=1.7.9:148)
    at new HappyForms.Form (frontend.js?ver=1.7.9:140)
    at HTMLDivElement.<anonymous> (frontend.js?ver=1.7.9:343)

    It’s probably to do with the cookie not being permitted perhaps, although I did try and reconfigure and reset, but to no avail. Disabling this plugin makes it all work again

    Any ideas ?
    Thanks

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Rogier Lankhorst

    (@rogierlankhorst)

    Hi @mcutting,

    That is correct: because recaptcha is tracking users, consent is needed before it can be activated. See also:
    https://complianz.io/google-recaptcha-and-the-gdpr-a-possible-conflict/

    Because recaptcha is blocked, the dependent script fails, which is the error you see.

    With Contact From 7 I had this same issue, and I’ve added a small tweak which allows the script to activate when the user consents to tracking cookies.

    I will look into this tomorrow, and see if I can make this work with happyforms as well. But please note that recaptcha still will be blocked until the user consents.

    Let me know if you have any questions about this!

    Thread Starter Mark Cutting

    (@mcutting)

    @rogierlankhorst thanks – awesome response as usual ?? If you could have a look, that would be great. Really appreciated.

    Thanks

    @rogierlankhorst Let us know if we can help at all! ??

    Plugin Author Rogier Lankhorst

    (@rogierlankhorst)

    Hi @thethemefoundry,

    Thanks for your reply, I’ve run some tests, and run into a problem with this, maybe you can help ??

    By adding the happyforms recaptcha.js script to the blocked list, the console error is prevented. But now I need to reinitialise it.

    With Contact From 7 for example, I was able to fix it by running the code with grecaptcha in it after the recaptcha script from google loads.

    When a user consents on tracking cookies, Complianz will load all blocked scripts with $.getScript(src);

    A dependent script can then be loaded with
    $.getScript(src).done(function(script, textStatus) {
    //load the dependent script here.
    }
    Doing this with happyforms does not seem to do anything: recaptcha won’t initialise, and forms can’t submit.

    Do you have any suggestions?

    Thanks,

    Rogier

    Plugin Author Rogier Lankhorst

    (@rogierlankhorst)

    Hi @mcutting,

    As described above, i’ve done some tests with this, but wasn’t able to initialise the recaptcha code from happyforms like I did with the contact form 7 code.

    Unless @thethemefoundry has a suggestion to resolve this, I can only suggest to use for example a honeypot as spam prevention.

    Rogier

    Hey @rogierlankhorst,

    Happy to help! HappyForms initiates scripts of all form parts when a method is called on HappyForms container. This happens on document ready.

    In reCaptcha script, we wait for grecaptcha to be ready but grecaptcha var needs to exist at that point (hence Google reCaptcha script being a dependency), otherwise it’ll trigger the error that @mcutting mentioned.

    One easy way would be to call happyForm on container again after loading all the scripts:

    $( '.happyforms-form' ).happyForm();

    That should re-init all forms on the page, this time including reCaptcha.

    Hope this helps! ??

    Plugin Author Rogier Lankhorst

    (@rogierlankhorst)

    Hi @thethemefoundry,

    That seems to work ??

    @mcutting,

    I have tested this solution, and it’s working: after consent the Recaptcha checkbox is visible, and the user can submit a form.

    You can test the beta version here:
    https://github.com/rlankhorst/complianz-gdpr

    The 3.0 version will be released next week.

    Let me know if this helps!

    Rogier

    Plugin Contributor Aert Hulsebos

    (@aahulsebos)

    Hi @mcutting @thethemefoundry,

    We have just released 3.0. Can you confirm this resolved the issue?

    Let me know!

    Regards Aert

    Plugin Contributor Aert Hulsebos

    (@aahulsebos)

    Hi @rogierlankhorst @thethemefoundry @mcutting,

    I’m closing this thread. We have tested and released the solution. Let us know if there any more issues.

    Regards Aert

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Conflict with HappyForms’ is closed to new replies.

Tags