Change New Google Recaptcha (v2) Width

Question

We've just started to implement the new google recaptcha as listed https://www.google.com/recaptcha/intro/index.html

However the new method seems to be contained within an iFrame rather than embedded into the page thus making applying CSS more difficult.

However we've got our form which is 400px wide so would like to have the recaptcha the same width.

Currently it looks like, however we'd like it the same with as the rest.

Does anybody know how to do this yet?

Thanks

Solution 1

Here is a work around but not always a great one, depending on how much you scale it. Explanation can be found here: https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/

.g-recaptcha {
    transform:scale(0.77);
    transform-origin:0 0;
}

UPDATE: Google has added support for a smaller size via a parameter. Have a look at the docs - https://developers.google.com/recaptcha/docs/display#render_param

Solution 2

No, currently you can not. It was only possible with the old recaptcha, but I'm sure you will be able to do that in the future.

I have no solution but a suggestion. I had the same problem, so I centered the recaptcha div (margin: 0 auto;display: table), I think it looks much better than a left-aligned div.

Solution 3

For more compatibility:

  -webkit-transform: scale(0.77);
     -moz-transform: scale(0.77);
      -ms-transform: scale(0.77);
       -o-transform: scale(0.77);
          transform: scale(0.77);
   -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
       -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
           transform-origin: 0 0;

Solution 4

I have found following best ways to resize google recaptchas

Option 1: You can resize google ReCaptcha by using inline style.

A very first way for resizing google recapture by using inline style. Inline styles are CSS styles that are applied to one element, directly in the page's HTML, using the style attribute. Here is the example that shows you how you to style Google reCAPTCHA by using inline style.

<div class="g-recaptcha" style="transform: scale(0.77); -webkit-transform: scale(0.77); transform-origin: 0 0; -webkit-transform-origin: 0 0;" data-theme="light" data-sitekey="XXXXXXXXXXXXX"></div>

Option 2: By putting the following style in your page (Internal Style Sheet).

Secondly, you can put style for ReCaptcha into the page between and . An internal style sheet is a section on an HTML page that contains style definitions. Internal style sheets are defined by using the tag within the area of the document. Here is the example that shows you how you to style Google reCAPTCHA by using an external style sheet.

<style type="text/css">
.g-recaptcha{
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
</style>

Option 3: Resize google ReCaptcha by using an external stylesheet.

Create a separate file and give a name like style.css and add this file link in between your an element in your page. For ex. .

<style type="text/css">
.g-recaptcha{
transform:scale(0.77);
-webkit-transform:scale(0.77);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
</style>

Reference from the blog: https://www.scratchcode.io/how-to-resize-the-google-recaptcha/

Solution 5

A bit late but I've got an easy workaround:

Just add this code to your "g-recaptcha" class:

width: desired_width;

border-radius: 4px;
border-right: 1px solid #d8d8d8;
overflow: hidden;

View more solutions

Comments

[contrid]

This works quite well. I think it may be against the terms/conditions to hide the recaptcha logo with the hidden overflow though. I hope they offer better customisation options in the near future.

[frekele]

Solved my problem. Thanks

[Burak Tokak]

data-size="compact" does not works as compactly for me. Guess we will stick to the scaling with transform

[Gustavo Rodrigues]

You may not need it: many browsers can understand the non-prefixed version and others never implemented the prefixed one. If you're going to support browsers with use prefixes use a tool for this. Your example when processed in AutoPrefixer don't have either -moz- or -o- as those aren't needed.

[HasanG]

When apply this trick noscript extension gives me a warning on click that the captcha is being blocked

[colecmc]

Do you have a link to the extension?

[Rolen Koh]

It was helpful and so simple. Thanks.

[apis17]

Uncaught TypeError: Cannot read property 'clientWidth' of null

[kabrice]

it works great, but it disables my submit button just below :(

[colecmc]

It seems odd that changing the width of a 3rd party component (google recaptcha) would alter the functionality of your form submit button.

[kuldip Makadiya]

Many thanks @Luca Steeb it's work perfect like charm thanks again :)

[Rick Kukiela]

Works, but its not responsive :(

[mateostabio]

@SublymeRick Use media queries and change all the transform: scale()

[roel]

too bad this update answer (parameter size = compact) , which is the more easy solution does not get the attention it needs.

[Ricardo Rivera Nieves]

I modified it a bit for my case but it worked like a charm, I made a custom class for the recaptcha div and put it on the css file. But inline works as well for development, thanks

[Jay Smoke]

This solution is much better. The compact feature looks like a very clumsy and lazy way to solve this issue.

[kamilz]

@roel How can data-size="compact" get attention when question is about making captcha box wider to fit 400px wide form. However most answers suggest scaling it <1 to make it smaller :D Scaling also scales height, so in my form which is ~460px wide, I have to scale recaptcha to ~1.5 but then captcha box is like 3 times higher than rest of my inputs.