Issues with hCaptcha Integration and WP Rocket

Hello @accentsduterroir,

Concerning WP Rocket, I am not sure that it calculates script dependencies properly. When you delay our scripts, you should delay also Ninja Forms scrips, otherwise, you get the mentioned error, because Marionette starts too late.

• /wp-content/plugins/ninja-forms/assets/js/min/front-end-deps.js
• /wp-content/plugins/ninja-forms/assets/js/min/front-end.js
• /wp-content/plugins/hcaptcha-wordpress-plugin/assets/js/apps/hcaptcha.js
• /wp-content/plugins/hcaptcha-wordpress-plugin/assets/js/hcaptcha-nf.js

You do not need to delay js.hcaptcha.com/1/api.js, as our plugin launches it asynchronously. It is better exclude it from the delay list.

Some information about the issues with script dependencies can be found in this WP Rocket blog post.

Concerning QuForm, I have added the ability to insert Quform’s Captcha field in the form or add hCaptcha automatically using our plugin. This functionality is added to the new version of our plugin, which we will release today or tomorrow.

Hello,

Thank you for the update on QuForm’s Captcha integration. That’s a great initiative!

Thank you for the details regarding the WP Rocket exclusions. I greatly appreciate it! As soon as I resolve the issue mentioned below, I will definitely provide feedback concerning WP Rocket.

However, I’d like to mention that it would be even more beneficial if a similar manual insertion feature could be incorporated for Ninja Forms. From a developer’s perspective, just like with QuForm, I believe it’s preferable to manually insert the field rather than relying on automatic injections. This approach can help in mitigating potential conflicts.

In fact, I’m experiencing the same issue as I did with QuForm – the hCaptcha is non-functional with the missing checkbox. There aren’t any evident errors, but it’s because I have a second hCaptcha on the same page, which is invoked by the Passster plugin (please see the attached screenshot for reference). It’s worth noting that this plugin isn’t listed among your compatible plugins.

However, in the current state of affairs, and unlike QuForms, if I deactivate the Ninja Forms integration option in the hCaptcha settings, the field is no longer visible when I try to add it. I would have liked to test this to see if it resolves the bug.

Passster Wordrpress plugin page:
https://fr.www.ads-software.com/plugins/content-protector/

I appreciate your continued efforts and look forward to further improvements.

Best regards,

Hello @accentsduterroir,

Thank you for your feedback. Adding the ability to insert hCaptcha directly in Ninja forms won’t solve your problem with delaying scripts in WP Rocket. However, I have added some improvements that may provide better resolution of dependencies in WP Rocket. The next version of hCaptcha should be released today.

Adding such an ability to insert hCaptcha directly in Ninja forms demands significant work, as we cannot change the code of the Ninja plugin. We did similar work for Elementor, but now I cannot predict if adding a similar feature for Ninja forms would be possible – it depends on their code.

We do not support Passster plugin so far; you can open an issue with the feature request on our GitHub.

When you do not have the checkbox on the hCaptcha widget, it means that you see just a placeholder image, which should be replaced later by the real hCaptcha widget. When this does not happen, it means that you have a JS error. You should open the browser’s console, find out, and fix the reason. A third-party code, as usual, crashes the JS execution and prevents hCaptcha from working.

Firstly, I’d like to express my deep appreciation for your efforts towards script delay improvements. I’m eagerly looking forward to testing the new version, hoping it will ensure a seamless and error-free experience with hCaptcha when using WP Rocket.

Currently, my primary objective is to achieve simultaneous functionality of two captchas on a single page. I’ve documented various test configurations:

CONFIGURATION #A:
hCaptcha inserted within a Ninja Forms form (via the hCaptcha plugin) + reCaptcha v3 embedded elsewhere on my page (e.g., with Passster).

hCaptcha Settings: “Disable reCAPTCHA Compatibility” (checked) + Ninja Forms feature integration (checked).
WP Rocket Exclusions (deferred + report delay):

• /wp-content/plugins/hcaptcha-for-forms-and-more/assets/js/(.*).js
• /wp-content/plugins/ninja-forms/assets/js/(.*).js

Results:

• Without caching: Both hCaptcha and reCaptcha work flawlessly on the same page without errors.
• With caching: Three errors emerge, listed sequentially below:

1. Uncaught TypeError: Cannot read properties of undefined (reading ‘ChildViewContainer’) => /wp-content/plugins/ninja-forms/assets/js/min/front-end-deps.js
2. Uncaught ReferenceError: Marionette is not defined => /wp-content/plugins/hcaptcha-for-forms-and-more/assets/js/hcaptcha-nf.min.js
3. Uncaught ReferenceError: Backbone is not defined => /wp-content/plugins/ninja-forms/assets/js/min/models/fieldErrorModel.js (I had to create this nonexistent folder).

CONFIGURATION #B:
Two hCaptchas – one in a Ninja Forms form (via the hCaptcha plugin) and another elsewhere on my page (e.g., with Passster).

hCaptcha Settings:

• <span style=”text-decoration: underline;”>First scenario</span>: Ninja Forms feature integration (enabled) & “Disable reCAPTCHA Compatibility” not used. Without caching, hCaptcha ceases to work (no checkbox appears). With caching, three errors emerge in the order listed above.
• <span style=”text-decoration: underline;”>Second scenario</span>: Ninja Forms feature integration (disabled). Without caching, the hCaptcha no longer appears (as the NF integration is off), but the second hCaptcha (via Passster) works correctly. With caching, two errors appear from the order listed above.

Considering these tests, I’d like to highlight the most pressing issues:

• CONFIGURATION #A: Works perfectly without caching.
• CONFIGURATION #B: There seems to be a conflict. Perhaps an option equivalent to “Disable reCAPTCHA Compatibility” could be introduced to support displaying multiple hCaptchas on a single page?

I apologize for the length of this message, but I felt it was vital to provide comprehensive details, hoping it would shed light on the underlying issues.

Thank you once again for the plugin update. As soon as it becomes available, I’ll carry out additional tests and promptly share my feedback here.

P.S.: Regarding WP Rocket, under their JS delay settings (“One-click Exclusions”), there’s a pre-configured third-party services list. I’ve selected “Google reCaptcha” from this list. Ideally, it would be beneficial to have an option for hCaptcha, ensuring native management from WP Rocket. However, I’m not privy to any discussions or agreements between your teams on this matter.

Dear @accentsduterroir,

In configuration A, our code does not work at all because you deactivated the Ninja form integration in our plugin. “hCaptcha inserted within a Ninja Forms form (via the hCaptcha plugin)” – this is a misunderstanding. hCaptcha can be inserted inside the form only by the Ninja plugin, and it launches hCaptcha scripts. Also, reCaptcha has its own scripts and should not interfere with hCaptcha scripts. You see that everything works without caching. You can deactivate our plugin completely and see the same result in configuration A.

In configuration B, you have the conflict because our plugin starts the hCaptcha script, and Passster does the same. It cannot work in theory. Integration with Passster could help, but I cannot guarantee when we will be able to do it.

You can follow another way and try to add [hcaptcha auto="true"] shortcode to Passster form. More information about auto-verification can be found in our FAQ.

Thank you.

Thanks for your reply!

Okay, so if I understand correctly, I should wait for your update, and if hCaptcha is still incompatible with WP Rocket, then I should look for another means of protection. Do you know when this update will be available?!

Finally, regarding Passster, I will reach out directly to the developer. Thank you for your advice to add [hcaptcha auto=”true”], but it doesn’t seem possible with Passster.

I have one last question about Passster: should I check the option “Disable reCAPTCHA Compatibility” if I’m using reCaptcha with Passster?

When I check this box, everything works perfectly (without caching). But if I uncheck it, the following error appears (without caching):

Uncaught TypeError: grecaptcha.ready is not a function at HTMLFormElement.<anonymous> (passster-public.min.js?ver=4.2.5:230:20) at HTMLFormElement.dispatch (jquery.min.js?ver=3.7.0:2:39997) at v.handle (jquery.min.js?ver=3.7.0:2:37968)

File: /plugins/content-protector-premium/assets/public/passster-public.min.js

I assume that I should leave the box checked since it works that way. I wanted to ask just to clarify and avoid any misunderstandings on my end because it would have made more sense if the option was named “Enable reCAPTCHA Compatibility“.

We just released hCaptcha 3.2.0. Please try it.

You should use this checkbox “Disable reCaptcha Compatibility”, as it prevents form adding some code which causes conflict with Passster. The checkbox is named properly :).