Form with reCaptcha interferes with other forms

[marknokes]

I read that there were resolved issue regarding multiple forms on a page, but I just couldn't get things to work properly. I ended up modifying captcha.html.twig to get around the issues. Perhaps these changes will help others, or introduce more issues!

Line 18. Change querySelectorAll('form') to querySelectorAll("#{{ form.id }}")

This will prevent the submit function from binding to all forms in the page, but only the specific form.

• Edited to enclose form.id in double quotes to prevent breaking forms with names that have dashes.

[rotanadan]

This works, but could the forEach part be taken out since it would only be looping over 1 element?

[marknokes]

@rotanadan Maybe. I haven't looked too closely at the way it's all put together, but if the template is called in the (parent) twig for each form, there's no need for there to be a forEach loop in the javascript if the id is passed as I've done.

[adamjmarshall]

I've also encountered this issue; for pages with a form in the header and footer, the header form would be binded to the submit even for both forms causing the form submission is problematic issue while the footer form works.

I instead removed the forEach as mentioned and used a new variable for each form using the form id, although it would cause issues depending on the id. This was just a quick fix, I'm sure there's a better way to do this. let grecaptcha{{ form.id }} = document.querySelector('form#{{ form.id }}'); let grecaptcha{{ form.id }}submit = function(event) {

[sebastianbaumann]

can confirm this. having two separate forms on one page will break recaptcha v3 validation.

[w00fz]

I fixed this slightly differently than suggested but still now pointing at the form id rather than looping through all of them. I have also now exposed all the captcha forms and their submit functions under window.gRecaptchaInstances. This will allow to control the submission of forms via JS, if needed, which might be helpful in those cases where you want JS forms and captcha as well.