reCAPTCHA display issues

[nathanc]

Hello dear fellow Marketo users, 

I hope you are doing well.

I have been working on implementing the reCAPTCHA system for my company but I am facing a few issues which I don't really know how to deal with. 

The main problem I am facing right now is:  when I enable the captcha option on a form, and go to test it out and I enter my email address in the form -> it suddenly breaks the form and weird things happen. Here's an exemple of the form before I write my email : 

And here's after: 

As you can see, big white squares appeared. it totally transformed and reshaped my form and almost broke it + the captcha logo also appeared.

Do you have any clue on why such things are happening? It is something I can repair by my own within Marketo?

Thanks in advance for your help!

Nate

[SanfordWhiteman]

Please link to your page. It’s not possible to troubleshoot a screenshot.

[nathanc]

Hello,

Sure thing, here it is: https://www.cegid.com/fr/lp/sb-sb-gated-autre-ressource-calendrier-entrepreneurs-formalites-2023/

[SanfordWhiteman]

---

Sure thing, here it is: https://www.cegid.com/fr/lp/sb-sb-gated-autre-ressource-calendrier-entrepreneurs-formalites-2023/

---

At the present time, there’s no reCAPTCHA and a fatal syntax error in one of your custom JS files. Fix that error and then we can continue.

[ggerla]

Hey @nathanc,

there are a few CSS rules that influence the visualization of the badge (like the iframe aspect ratio, width, and height that enlarges the size; but also, you have elements that should totally hidden as the iframe itself or the g-recaptcha-response textarea).

So, I would double-check the following rules in your style: they are too much generic:

iframe {
    aspect-ratio: 16 / 9;
}
video, iframe {
    position: relative;
    width: 100%;
    height: auto;
}

Additionally, I would suggest not including the scripts for loading the reCaptcha INTO the form tag and reviewing the logic behind the captchaCallback because it won't work (eg: the argument of the function won't be the captcha response).

The documentation has a good example here you can adopt: reCaptcha Documentation 

[SanfordWhiteman]

---

Additionally, I would suggest not including the scripts for loading the reCaptcha INTO the form tag and reviewing the logic behind the captchaCallback because it won't work (eg: the argument of the function won't be the captcha response).

The documentation has a good example here you can adopt: reCaptcha Documentation 

---

That documentation won’t be useful with Marketo Forms because you must use the Forms 2.0 JS API events.

The way to integrate reCAPTCHA 2 with Marketo Forms is shown here:

MktoForms2 :: reCAPTCHA v2 v1.1.0