Recaptcha v3: Submission fails if you have more than one form on page

[Jay-umbr]

If you use ReCaptcha3 to verify your forms and you happen to have two forms (or more) on the same page using reCaptcha3,
the form will fail to submit with the message:
"The g-recaptcha-response hidden field for reCAPTCHA V3 is missing and thus unable to be verified"

The field is actually present in site HTML, so it might be something to do with form population timing.
Browser console might also mention the IDs are not unique

Reproduction

1. Create two forms which validate with ReCaptcha 3
2. Put them on the same page using any method (RTE, Macro, Picker...)
3. Try to submit either of the forms with some data
4. You will get "The g-recaptcha-response hidden field for reCAPTCHA V3 is missing and thus unable to be verified"

Specifics

Tested on Forms 8.7.1. CMS version does not seem to matter - tested on CMS 8.7 and 8.13

[AndyButland]

Just posting some further detail for future reference - the issue seems to be that the client-side function registered to update the hidden field from the reCAPTCHA V3 response is attached to the window object, and hence there's only one of them even if there's more than one form. So only the last rendered form will get it's field updated.

To support this we need to be able to isolate this function so it's only scoped to a single form.

[lori698]

also having this issue - a really problem for us at the moment. @AndyButland any suggestions on how to fix would be most welcome

[AndyButland]

Yes, we've been looking at this @lori698 and have a solution that looks to be working as expected when there are multiple reCAPTCHA protected forms on the page. We'll make it available in the next patch release, planned for tomorrow.

[lori698]

@AndyButland will it work if the same form is repeated on the page? i.e. in an accordion something like a repeated contact form?

[AndyButland]

I'm not sure it would to be honest. The change made to resolve this issue would still be needed, but I think we'd have a different issue then where the field IDs would be the same. So I suspect you would run into issues similar to that you've raised in #565.

[lori698]

ok thanks for coming back Andy

[c9mb]

@AndyButland Would that issue also apply to the v7 implementation ?

[AndyButland]

Not yet @c9mbundy no - we had a patch planned for V8 already so the amend to support this was included in that. We'll need to back-port and patch V7, but we'll get that arranged.

[ronaldbarendse]

FYI: the fix is applied in the Fieldtype.Recaptcha3.cshtml partial view, so make sure this is overwritten when updating. The script should now be wrapped in an IIFE, so the variables aren't scoped to the global window object anymore:

(function (window, document) {
    // Original reCAPTCHA code
})(window, document);