Recaptcha doesn't fit on mobile view - is there any way to resize?

Design help General
1

Howdy all! I’ve designed a contact form that includes a recaptcha, but within my design parameters it’s not fitting on the mobile portrait view.

41%20AM

So my questions are: is there any way to resize the recaptcha? (I’m guessing no.)

If not, is there a way to include a recaptcha but do the google invisible recaptcha? I don’t entirely understand how that works. If this is a possibility, could someone enlighten me as to how to get that set up?

If that’s not possible I guess I could just hide it from mobile view, but that would be last resort. (And is currently what I’m doing at the moment for the mobile view.)

Thanks!

Here is my site Read-Only: LINK It’s the "Food Photography Placeholder Page towards the bottom of my page list. This form is located in the “modal wrapper” which is set to hidden currently.
(how to share your site Read-Only link)

2

Hi @KPMT

This article lets you know how resize. Hope it helps.

3

Thanks @magicmark!

Do you happen to know anything about invisible recaptcha at all?

4

I don’t I’m afraid.

I just created a quick interaction that hides the recapture form initially, and shows it when the form block is clicked. I use this on email sign up forms. For normal contact forms I just leave them visible.

They’re quite ugly I think, but at least that way it’s only displayed if the user has the intention of clicking.

Hope that helps even a little :grinning:

5

Ah good to know - thanks for the suggestion! :slight_smile:

And you’re completely right - SO ugly. Ufdah.

6

:joy:

7

Hahahahaha! :rofl: It’s Midwestern terminology that I forget not everyone knows about.

That gave me a good laugh - thank you! :slight_smile:

8

Haha, that’s a great expression. :joy:

10
@media screen and (max-width: 575px){ .g-recaptcha { transform: scale(0.77); transform-origin: 0 0; } }

Con este código en mi landing lo solucioné. Yo uso webflow lo puse en el Before Body tag del setting de mi landing.

11

It sounds like you’re exploring ways to implement reCAPTCHA effectively on your site, including potential resizing and using Google’s invisible reCAPTCHA. For your situation, while direct resizing of reCAPTCHA elements isn’t supported natively, you might consider alternatives like Google’s invisible reCAPTCHA which could integrate more seamlessly into your user interface without impacting the design.

Invisible reCAPTCHA works by running in the background and only triggering when it detects suspicious behavior. It aims to provide a smoother user experience, especially on mobile devices where you mentioned hiding the reCAPTCHA might be a temporary solution.

If you’re keen to explore how different technologies work together and their impact, you might find the Introduction to 01174411569 article intriguing. It covers various phenomena and their implications, which could offer insights into how different technologies interact and affect user experience.