Google reCaptcha v3 Fails on Submission

[EduardoDatadog]

Hi everyone,

We're encountering some inconsistent issues with Marketo recaptcha. We're getting the error

{message: "Captcha field missing in form", error: true, errorCode: "400"}

on form submissions for certain pages, while others work fine.

For example, filling out this form in Chrome (assuming you've accepted all cookies) will generate the error:

https://www.datadoghq.com/dg/apm/app-suite-demo-b/#request-a-demo

but it seems to work in Firefox.

And this page seems to work on both browsers for some users, but not others

https://www.datadoghq.com/dg/monitor/frontend-demo-dem/b/#request-a-demo 

Could anyone provide some insight on how to debug this? I can see all the scripts loaded and the the recaptcha endpoint returns a 200 after hitting the submit button https://www.google.com/recaptcha/api2/reload?k=... on both pages.

TLDR; both pages are basically identical, except for different marketo form IDs.

Thank you!!

[SanfordWhiteman · Accepted solution]

You’ll find the cause is that you have multiple forms (3 different form IDs) on the page.

The builtin reCAPTCHA feature isn’t supported with multiple forms at once. It only works when the race condition — that is, the race to see which form descriptor loads first — works out in your favor.

You can fix it with custom JS (look for my post about loading forms from different instances, it’s the same general approach).

[EduardoDatadog]

Thank you Sanford! True! That make sense...

I will check for a custom JS as you suggested and see how to fix that.

Thank you!!