Umbraco Form Version 12.1.1 Not working with Google reCAPTCHA V3

Question

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.

Answer 1

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.

https://our.umbraco.com/forum/using-umbraco-and-getting-started/113175-umbraco-form-version-1211-not-working-with-google-recaptcha-v3