Form compatibility with reCAPTCHA v3

Dan_Cunningham · ‎06-09-2019

Has anyone configured their forms to implement Google’s (newish) reCAPTCHA v3?

We experience waves of bot activity and v3 would be an ideal solution since it’s supposedly frictionless.

Thanks for any input,

Dan

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>

SanfordWhiteman · ‎09-10-2019

You don't need to re-include the standard embed code, no.

Steve_Schimmel · ‎09-10-2019

Thanks so much!

One last question – do you have any insight into how exactly V3 works? I am used to seeing the bridges and fire hydrants that need to be selected, but V3 seems to recognize spam without requiring user participation. I assume they must do this by recognizing IP addresses likely to be bots?

If that is the case, do you know what happens when someone that Google identifies as spam tries to fill out the form? Does the recaptcha V3 prevent them from filling out the form, or does it send some value through the form telling me that this is likely a spam bot?

Thanks, I am trying to do some research myself but haven’t found what I am looking for. The best explanation I found is this https://codeforgeek.com/google-recaptcha-v3-tutorial/ saying that the form wont be able to be filled out, but just wanted to confirm that is your understanding as well.

As always, thanks!

Steve

Please consider the environment before printing this email.

<https://pro.sony.com/bbsc/ssr/show-mobileapp/resource.solutions.bbsccms-assets-show-mobileapp-mobileappdownload.shtml?PID=I:hp_bottom_carousel:Mobile_App>

SanfordWhiteman · ‎09-10-2019

reCAPTCHA (all versions) never stops a form from being so submitted by an attacker. The idea is that the non-human quality of the form post is detected on the server, based on the "fingerprint" taken by the reCAPTCHA JS library.

You need to wait for the fingerprint to be generated, but under no circumstances do you know *on the client* whether the fingerprint is legit or not. That gets checked on the server.

reCAPTCHA v3 takes the fingerprint beyond just Boolean non-human/human and generates a numeric certainty value instead (between 0 and 1). You decide on the server what your threshold will be, based on characteristics of your users (usu. the question is whether 0.6 and 0.7 are rounded down to non-human).

SanfordWhiteman · ‎06-09-2019

Integrates as easily as v1 and v2 on the client. That is, your burden is still on the server side, building the right triggers, flows, and lists to catch failures (and not create them!).

Dan_Cunningham · ‎06-10-2019

Thanks Sanford, do you happen to have an example of v3 working with Marketo? I'm attempting to follow your example and the instructions here but I've been unsuccessful in getting it to work.

Thanks,

Dan

SanfordWhiteman · ‎06-10-2019

MktoForms2 :: reCAPTCHA v1.2.0 (reCAPTCHA v3)

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.

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!

Brandon_Owens · ‎07-08-2019

We have implemented your CodePen example and it seems to be working well (thanks!!) with one exception. In both your example and our implementation, it takes 2 clicks of the submit button to get the form to actually submit. First click seems to execute the reCAPTCHA which also fires your console.log() event.

grecaptcha.ready(function() {
  grecaptcha.execute(userConfig.apiKeys.recaptcha, {
    action: userConfig.actions.formSubmit
  })
  .then(function(recaptchaFinger) {
    console.log("recaptcha response resolved");
    var mktoFields = {};
    mktoFields[userConfig.fields.recaptchaFinger] = recaptchaFinger;
    mktoForm.addHiddenFields(mktoFields);        
    mktoForm.submittable(true);
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Then the form is ready for "actual" submit, and the second submit click fires the form. I can likely get it working by rearranging the JS, but before I did so I wanted to ask you if this was intentional as I'm not very familiar with the v3 reCAPTCHA API yet. Any thoughts here? Thanks again!

SanfordWhiteman · ‎07-08-2019

Extremely strange that I would leave it that way. I was probably being overprotective so people couldn't submit from CodePen (there was another submittable(false) in there, too).

Grab the v1.1.1 code now (from the CodePen JS pane only).

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

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.

SanfordWhiteman · ‎07-12-2019

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

Brandon_Owens · ‎07-09-2019

Thank you, I figured it was something small. I see the new update and have tested it, but now it is submitting over and over again in a loop. I pulled this screenshot from the console after submitting the new v1.1.1 code.

The number continues to grow since the page doesn't redirect. On my tests on our site, it submits 3-4 times typically before the thank you page redirect hits. I'm not yet sure why that ".then" block is firing over and over.

Any thoughts here? Thanks Sanford Whiteman‌!

Freek_van_der_V · ‎07-26-2019

We also used CodePen example to implement ReCaptcha V3. ReCaptcha V3 did not work before we used this so big thanks for this! After testing we now having the same issue as described here: after filling out the form it submits multiple times before it redirects to the Thank You Page and due to this duplicate leads are created. Anyone that already found a solution for this?

Thanks!