Re: Form compatibility with reCAPTCHA v3

Brandon_Owens · ‎07-12-2019

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 · ‎07-12-2019

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

Tony_Mayse · ‎09-17-2019

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 · ‎10-17-2019

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 · ‎10-21-2020

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 · ‎10-21-2020

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

Kevin_Vaughn · ‎10-22-2020

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

Steve_Schimmel · ‎09-10-2019

Hi,

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

Thanks!

Steve

SanfordWhiteman · ‎09-10-2019

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 · ‎09-10-2019

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:

<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>