Member Avatar for <M/>

Can someone guide me through an easy way of shrinking the size reCAPTCHA form, I can't find much great results on google (even found a result saying its not the best idea)...

I will send you the link to my page if you need to see what I mean.

Edited by pritaeas because: Moved.
  • 2 Contributors
  • 2 Replies
  • 124 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by <M/>

Dani AI

Generated

This builds on ’s point that CSS is the practical route, and answers the two follow-ups from : (1) how to change height, and (2) why it’s generally discouraged.

The usual, minimally-invasive pattern is to wrap the reCAPTCHA widget and scale the iframe (or the top-level widget node) with CSS while using a fixed wrapper that clips the original-sized element. Measure the widget’s current width/height in DevTools, pick a scale factor s (0.8, 0.9, etc.), then set the wrapper to width = originalWidth s and height = originalHeight s and apply transform: scale(s) to the child. Example:

<div class="recaptcha-wrap">
  <!-- reCAPTCHA markup (iframe or .g-recaptcha) goes here -->
</div>

.recaptcha-wrap {
  width: 240px;   /* originalWidth * s */
  height: 62px;   /* originalHeight * s */
  overflow: hidden;
}

.recaptcha-wrap > iframe,
.recaptcha-wrap > .g-recaptcha {
  transform: scale(0.8);
  transform-origin: 0 0;
  -webkit-transform: scale(0.8);
  -webkit-transform-origin: 0 0;
}

Why this is discouraged: many reCAPTCHA widgets are delivered inside a cross-origin iframe, so inner DOM/CSS cannot be changed; visual scaling is a workaround but is unsupported and can cause blurred text, reduced tap/click targets, layout breakage (audio/visual challenges), and accessibility problems. A safer route is to use supported size options in modern reCAPTCHA (for example the compact size or invisible reCAPTCHA) rather than arbitrary CSS changes — see the official display docs for current options: reCAPTCHA display docs.

In short: wrapping + transform: scale() usually works for a quick visual shrink, but inspect the widget version first, test thoroughly across browsers and devices, and prefer official size/settings where available.

Recommended Answers

All 2 Replies

Member Avatar for pritaeas

You want to make it smaller? This is indeed not recommended, but you should be able to use CSS to change the appearance.

Member Avatar for <M/>

Can you guide me through it, specifically what do I change in order to change the height. And why isn't it recommended to change the dimensions?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.