ReCaptcha v3 (badge position)

Treepl Backlog
1

When ReCaptcha v3 is included on any form it renders a recaptcha badge anchored in fixed position at bottom right of the screen. See designspec.treepl.co for example. This badge interferes with footer content and looks especially bad on mobile.

After researching I’ve discovered this is Google’s default positioning. As explained here it’s possible to move the badge to the form rather than fixed on the page (which would be ideal !!). However this would need to be done at a system level. I’d like to pitch for this modification to made so that treepl forms default the recaptcha badge to display in the form where the field is placed.

4 Likes
2

HI @on.works Welcome to the forums!

I’ve just tested this now on my page and could move the badge to the top of the page by adjusting
.grecaptcha-badge with some styles.
Keeping in mind that this needs to slide out… I could move it to the top of the page and it still functioned fine.

My super quick and TERRIBLE test:

.grecaptcha-badge {
	top:50px!important;
	bottom:inherit!important;
}

Also in your case, .frame-line has a z-index of 99999 so that will cause issues as well, which is why its hidden under a white bar on Desktop.

If this is not an option for you, I would change back to version 2 and just use it inline in the form

Hope this helps.

3

Or simply just remove it and inform your clients in the form box or similar that you are using this feature. This is also allowed by Google.

Check the FAQ here: Frequently Asked Questions  |  reCAPTCHA  |  Google Developers

4 Likes