I tried to use Google reCAPTCHA version 3 with Umbraco form version 12.1.1 but when rendering the form I cant see any rendered content related to captcha also when I try to submit the form . it dosent allow to submit form and stays same form view. Any body experience this issue or any one can help me to fix this issue.
I noticed error on browser console when loading the page that I added Umbraco form.
Uncaught TypeError: Cannot read properties of undefined (reading 'ready')
at HTMLDocument.<anonymous>
The error suggested a problem with the reCAPTCHA script not loading properly. Upon careful inspection, it became apparent that the https://www.google.com/recaptcha/api.js script was not being loaded before the form submission event.
I modified the implementation to ensure the reCAPTCHA script loads before the form is submitted. By incorporating a conditional loading of the reCAPTCHA script, I ensured that the script tag dynamically fetched the necessary as follows
@{
var siteKey = Configuration.GetSection("Umbraco").GetSection("Forms").GetSection("FieldTypes").GetSection("Recaptcha3")["SiteKey"];
if (!string.IsNullOrEmpty(siteKey))
{
var recapctchaJs = String.Format("https://www.google.com/recaptcha/api.js?render={0}", siteKey);
<script src="@recapctchaJs"></script>
}
}
Now issue is fixed and form working as expected.