Browser: Chrome, Microsoft Edge
OS: Windows11
URL: Contacts – K-Beauty Collection
The reCaptcha is not working with the Form element.
Added the Google reCaptcha APIs to the setting and enable the reCaptcha of the Spam Protection.
The form is working fine but the reCaptcha is not displaying at all.
Thanks.
Hi Hiekeun,
Thanks so much for your report!
Compraed to reCaptcha v2, reCaptcha v3 is invisible out of the box 
Best regards,
timmse
I know it’s invisible. Basically, it’s not working. Recaptcha won’t pop up when you submit the message.
reCAPTCHA v3 does not require any user interaction. So there is nothing to pop up on submission.
See differences between v2 (with user interaction) and v3 (without user interaction) here: reCAPTCHA-Typ auswählen | Google Developers.
Thanks for clarification. Then, how do you know the recaptcha is working correctly?
“If reCAPTCHA v3 is working correctly on the front-end of your site a small reCAPTCHA badge should appear at the bottom right of each page.”
Unfortunately, I don’t see any reCAPTCHA badge on my page.
The badge is hidden by Bricks with some default CSS (see screenshot attached). This is allowed “as long as you include the reCAPTCHA branding visibly in the user flow” (see official documentation).
So you have to either make the badge visible again with some custom CSS or include a small hint stating that you’re using reCAPTCHA somewhere else.
Your custom CSS could look something like this:
.grecaptcha-badge {
visibility: revert !important;
}
The !important might not be needed depending on how and where you insert the custom CSS. Just try it out.
Thank you so much. It works with one more line of CSS, z-index: 999;
Hello,
Thanks for your previous answer.
When using recaptcha with the form, I see it right after the form, in the source.
Though the keys should be correct, also recaptcha seems to be working.
Why, oh, why?
<div class="form-group recaptcha-error"><div class="brxe-alert danger"><p>Google reCaptcha: Invalid site key.</p></div></div><div id="recaptcha-wtwfuv" data-key="6XXXXXXXXXXXXXXXXXXXXo" class="recaptcha-hidden"></div> </form>
Same with a site we moved tuesday from staging to production. I have the same invisible Error.
If i inspect the page with firefox network analysis, i see that webworker.js and recaptcha__de.js are loaded, but in the source code there is only the error message.
Any ideas or help?
Thanks in advance.
@pappadam, @martin_w: I don’t think that this is an error. The error div is included (and hidden) by default to show when the reCAPTCHA check fails.
If you include some custom CSS and see the reCAPTCHA badge at the bottom right of the page you know that everything works as expected.
.grecaptcha-badge { visibility: revert !important; }
Hi aslotta,
i’ve checked ist and you are absolutly right and recaptcha is working.
Thanks for your help.
I have fixed my problem by using a different internet connection. https://thegeekpage.com/recaptcha-not-working/