Level 1

Question

reCAPTCHA display issues

Forum|Forum|1 year ago
June 18, 2024
2 replies
1718 views

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

Marketo

SanfordWhiteman

Level 10

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

N

nathanc-2Author

Level 1

Hello,

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

SanfordWhiteman

Level 10

Sure thing, here it is: 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

Level 3

Hey @nathanc-2,

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

Level 10

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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded