Recaptcha v3 on multipage forms

Hi,

I have a form that consists of 3 pages. On submission of each page I have log data and save data actions, therefore I would like to apply Recaptcha v3 on each pages.

I can submit the first page. When I submit the second page, it keeps loading, nothing happens. In console, I can see an error message: TypeError: form.submit is not a function

The issue is in this part of the javascript code:

if (this._element.querySelector(".g-recaptcha.v3")) {   e.preventDefault();   let form = this._element;   grecaptcha.ready((function() {      grecaptcha.execute(form.querySelector(".g-recaptcha.v3").getAttribute("data-sitekey3"), {         action: "submit"      }).then((function(token) {         form.querySelector(".g-recaptcha.v3").remove(),         form.querySelector('[name="g-recaptcha-response"]').value = token,         form.submit()      }      ))  }  ))}

Could you help, please?

Thanks in advance.

Yes. If it is only on the first page, it works. But does this method secures data submission of the second and third pages as well?

Users can not access later pages without accessing the first page (assuming the pages have the same Page Group value, which is the default).

So if the first page is secured then you should be ok

This also applies to the Log Data and Save Data actions, unless you need to make sure each step is saved in case the user quits early, it's better to save one time at the last page Submit event

Thank you for your help, I will follow this advice.

I found the root cause and the real solution.

TLDR: do not use the word "submit" as id of the submit button

I created a new form that had only one page and I experienced the same mulfunction: when I submit the form, it keeps loading, spins forever and nothing happens. So I realized the issue was not because my form had multiple pages. As the browser's console revealed that it was a javascript issue and I knew that ReCaptcha v3 worked perfectly in other cases, I concluded that there was some incompatibility between the settings (of the fields) of my form and ReCaptcha. The error message in the console helped: form.submit is not a function. Why is it not a function? It should be, it is common javascript function. The answer: the word "submit" is used for another purpose. And yes, it was the id of my submit button. (What is quite natural to name it that way.) I changed the id of the submit button and everything works perfectly.And it works perfectly on single page forms and on multipage forms as well.