Form compatibility with reCAPTCHA v3

Dan_Cunningham
Level 2

Form compatibility with reCAPTCHA v3

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

22 REPLIES 22
SanfordWhiteman
Level 10 - Community Moderator

Re: Form compatibility with reCAPTCHA v3

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

Re: Form compatibility with reCAPTCHA v3

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
Level 10 - Community Moderator

Re: Form compatibility with reCAPTCHA v3

Dan_Cunningham
Level 2

Re: Form compatibility with reCAPTCHA v3

This is awesome Sanford, thank you. It looks like you may have an extraneous fragment on line 14:

};bmit

Thanks again,

Dan

SanfordWhiteman
Level 10 - Community Moderator

Re: Form compatibility with reCAPTCHA v3

Thanks, removed that.

Brandon_Owens
Level 1

Re: Form compatibility with reCAPTCHA v3

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
Level 10 - Community Moderator

Re: Form compatibility with reCAPTCHA v3

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

Re: Form compatibility with reCAPTCHA v3

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. 

pastedImage_1.png

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

Re: Form compatibility with reCAPTCHA v3

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!