Form compatibility with reCAPTCHA v3

Brandon_Owens
Level 1

Re: Form compatibility with reCAPTCHA v3

Been messing with this for a couple days and have not yet solved the riddle of why the .submit() is firing repeatedly. The ".then()" block doesn't fire unless the button is clicked, but without the .submit() I haven't been able to get it to submit on first interaction with the button. With .submit() the form submits continuously until the redirect behavior takes place (redirect to thank you page, etc). 

SanfordWhiteman
Level 10 - Community Moderator

Re: Form compatibility with reCAPTCHA v3

Let's look at it over a screenshare when you have time.

Tony_Mayse
Level 3

Re: Form compatibility with reCAPTCHA v3

The .submit() method starts the submit flow: performs validation, fires any .onSubmit() events, submits the form, and fires any .onSuccess() events if form submission was successful.

Calling .submit() from within .onValidate() explicitly creates an infinite loop.

Changing

   mktoForm.onValidate(function(native) {

to

   mktoForm.whenReady(function(native) {

and removing

   mktoForm.submit();

may be sufficient to prevent the looping. I believe that will also submit the form on the first click as it moves this code outside of that flow.

Kevin_Konrad
Level 1

Re: Form compatibility with reCAPTCHA v3

I've got this implementation working for both Marketo landing page forms and embedded forms on our website, however, when there are multiple forms, the second form's submit is always disabled. What modifications need to be made to the CodePen so that it works for all forms on the page?

 

Thanks for all of the Marketo insight!

Kevin_Vaughn
Level 2

Re: Form compatibility with reCAPTCHA v3

Hi Sanford,

Have you or do you know of anyone who has posted steps to creating the server side of implementing reCAPTCHA v3, the webhook and smart campaigns?

Thanks, Kevin

 

SanfordWhiteman
Level 10 - Community Moderator

Re: Form compatibility with reCAPTCHA v3

Apologies, I have the method deployed at several sites but have been too busy to write it up yet.

Kevin_Vaughn
Level 2

Re: Form compatibility with reCAPTCHA v3

No worries. Thank you for taking the time to respond.

Steve_Schimmel
Level 4

Re: Form compatibility with reCAPTCHA v3

Hi,

Silly question, but is the JS added in the form or landing page html?


Thanks!


Steve

SanfordWhiteman
Level 10 - Community Moderator

Re: Form compatibility with reCAPTCHA v3

In the Landing Page HTML, or in a separate .JS file, is a lot easier to manage than trying to embed in a Rich Text area.

Steve_Schimmel
Level 4

Re: Form compatibility with reCAPTCHA v3

Thanks Sanford,

Is it necessary to add the top portion of the script?

I ask because I notice you reference a specific form in this script, and the template I edited uses many different forms. I was concerned that if I add the part at top it would cause a problem if I use a form different than the one referenced here.


I tried adding just the bottom part of the script to the template and it seems to be working correctly,  but I just wanted to confirm if the top portion is necessary. Thanks!

Put this right BEFORE the <body> tag:

 

<!-- standard embed code -->

<script src="//app-sj20.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_1428"></form>

<script>MktoForms2.loadForm("//app-sj20.marketo.com", "122-YZF-525", 1428);</script>

<!-- /standard embed code -->