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

recaptcha layout example

Please check this solution http://stackoverflow.com/questions/27713505/recaptcha-api-v2-styling/41389320#41389320 — alejandro, Dec 30 '16 at 01:15

colecmc · Answer 1 · 2015-07-13T21:31:29.023

124

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

edited Jul 13 '15 at 21:31

answered Apr 08 '15 at 17:58

colecmc

3,133
2
20
33

4

`data-size="compact" ` does not works as compactly for me. Guess we will stick to the scaling with transform – Burak Tokak Jul 28 '15 at 11:04
2

When apply this trick noscript extension gives me a warning on click that the captcha is being blocked – HasanG Dec 13 '15 at 23:24
Do you have a link to the extension? – colecmc Dec 14 '15 at 22:31
1

it works great, but it disables my submit button just below :( – kabrice Jan 08 '17 at 22:07
1

It seems odd that changing the width of a 3rd party component (google recaptcha) would alter the functionality of your form submit button. – colecmc Jan 09 '17 at 17:01
too bad this update answer (parameter size = compact) , which is the more easy solution does not get the attention it needs. – roel Oct 08 '19 at 08:53
@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. – kamilz Apr 08 '22 at 10:23

Luca Steeb · Answer 2 · 2015-04-08T12:14:36.743

17

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.

edited Apr 08 '15 at 12:14

answered Jan 12 '15 at 16:55

Luca Steeb

1,795
4
23
44

1

Many thanks @Luca Steeb it's work perfect like charm thanks again :) – kuldip Makadiya Jan 11 '17 at 12:15

Mayank Dudakiya · Answer 3 · 2020-06-07T04:01:39.290

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/

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 — Ricardo Rivera Nieves, Jun 21 '20 at 03:52
It's working but what about the challenge window? it's still the same size. — Syed Waqas Bukhary, Aug 24 '22 at 14:28

score 14 · Answer 4 · answered Jun 08 '15 at 10:10

14

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;

answered Jun 08 '15 at 10:10

k1r8r0wn

780
9
21

3

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. – Gustavo Rodrigues Sep 05 '15 at 16:51

score 10 · Answer 5 · answered Apr 01 '15 at 00:39

10

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;

answered Apr 01 '15 at 00:39

Andrew Rockwell

444
6
13

5

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. – contrid Apr 01 '15 at 08:44
It was helpful and so simple. Thanks. – Rolen Koh May 27 '16 at 07:26

score 7 · Answer 6 · answered Aug 21 '15 at 03:20

For the new version of noCaptcha Recaptcha the following works for me:

<div class="g-recaptcha"
data-sitekey="6LcVkQsTAAAAALqSUcqN1zvzOE8sZkOq2GMBE-RK"
style="transform:scale(0.7);transform-origin:0;-webkit-transform:scale(0.7);
transform:scale(0.7);-webkit-transform-origin:0 0;transform-origin:0 0;"></div>

Ref

score 6 · Answer 7 · edited Sep 13 '16 at 19:56

I have this function in the document ready event so that the reCaptcha is dynamically sized. Anyone should be able to drop this in place and go.

function ScaleReCaptcha()
{
if (document.getElementsByClassName('g-recaptcha').length > 0)
{parentWidth = document.getElementsByClassName('g-recaptcha') [0].parentNode.clientWidth;
         childWidth = document.getElementsByClassName('g-recaptcha')[0].firstChild.clientWidth;
         scale = (parentWidth) / (childWidth);
         new_width = childWidth * scale;
         document.getElementsByClassName('g-recaptcha')[0].style.transform = 'scale(' + scale + ')';
         document.getElementsByClassName('g-recaptcha')[0].style.transformOrigin = '0 0';
     }
}

Uncaught TypeError: Cannot read property 'clientWidth' of null — apis17, Nov 16 '16 at 07:04

score 5 · Answer 8 · answered Apr 02 '19 at 17:43

5

You can use parameter from reCaptcha. By default it uses normal value on data-size, You just have to use compact to fit this on small devices or some-kind small width layouts.

example:

<div class="g-recaptcha" data-size="compact"></div>

answered Apr 02 '19 at 17:43

KirtJ

550
7
7

score 4 · Answer 9 · answered Apr 21 '16 at 12:43

4

.g-recaptcha{
    -moz-transform:scale(1.1);
    -ms-transform:scale(1.1); 
    -o-transform:scale(1.1); 
    -moz-transform-origin:0; 
    -ms-transform-origin:0;
    -o-transform-origin:0;
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
    -webkit-transform-origin:0 0;
    transform-origin:0;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1,M12=0,M21=0,M22=1.1,SizingMethod='auto expand');
}

answered Apr 21 '16 at 12:43

A.K.

2,284
3
26
35

Works, but its not responsive :( – Rick Kukiela Feb 09 '17 at 17:31
@SublymeRick Use media queries and change all the transform: scale() – mateostabio Mar 15 '18 at 15:47

score 4 · Answer 10 · answered Aug 25 '17 at 07:56

This is my work around:

1) Add a wrapper div to the recaptcha div.

<div id="recaptcha-wrapper"><div class="g-recaptcha" data-sitekey="..."></div></div>

2) Add javascript/jquery code.

$(function(){
    // global variables
    captchaResized = false;
    captchaWidth = 304;
    captchaHeight = 78;
    captchaWrapper = $('#recaptcha-wrapper');
    captchaElements = $('#rc-imageselect, .g-recaptcha');

    resizeCaptcha();
    $(window).on('resize', function() {
        resizeCaptcha();
    });
});

function resizeCaptcha() {
    if (captchaWrapper.width() >= captchaWidth) {
        if (captchaResized) {
            captchaElements.css('transform', '').css('-webkit-transform', '').css('-ms-transform', '').css('-o-transform', '').css('transform-origin', '').css('-webkit-transform-origin', '').css('-ms-transform-origin', '').css('-o-transform-origin', '');
            captchaWrapper.height(captchaHeight);
            captchaResized = false;
        }
    } else {
        var scale = (1 - (captchaWidth - captchaWrapper.width()) * (0.05/15));
        captchaElements.css('transform', 'scale('+scale+')').css('-webkit-transform', 'scale('+scale+')').css('-ms-transform', 'scale('+scale+')').css('-o-transform', 'scale('+scale+')').css('transform-origin', '0 0').css('-webkit-transform-origin', '0 0').css('-ms-transform-origin', '0 0').css('-o-transform-origin', '0 0');
        captchaWrapper.height(captchaHeight * scale);
        if (captchaResized == false) captchaResized = true;
    }
}

3) Optional: add some styling if needed.

#recaptcha-wrapper { text-align:center; margin-bottom:15px; }

.g-recaptcha { display:inline-block; }

score 4 · Answer 11 · answered Mar 08 '18 at 14:09

4

Now, You can use below code (by google)
<div class="g-recaptcha" data-sitekey="<yours>" data-size="compact"></div>

answered Mar 08 '18 at 14:09

PurTahan

789
8
24

score 3 · Answer 12 · answered Sep 25 '19 at 05:39

It's been late, but just want to help others if still facing an issue. I found nice JS solution here : https://github.com/google/recaptcha/issues/61#issuecomment-376484690

Here is JavaScript code using jQuery to do so:

$(document).ready(function () {        
    var width = $('.g-recaptcha').parent().width();
    if (width < 302) {
        var scale = width / 302;
        $('.g-recaptcha').css('transform', 'scale(' + scale + ')');
        $('.g-recaptcha').css('-webkit-transform', 'scale(' + scale + ')');
        $('.g-recaptcha').css('transform-origin', '0 0');
        $('.g-recaptcha').css('-webkit-transform-origin', '0 0');
    }
});

IMP Note : It will support All Devices, above and bellow 320px width as well.

score 2 · Answer 13 · answered May 24 '20 at 15:38

unfortunately none of the above worked. I finally could do it using the following stuffs: This solution works 100% (adapt it to your need)

.g-recaptcha-wrapper {
    position: relative;
    border: 1px solid #ededed;
    background: #f9f9f9;
    border-radius: 4px;
    padding: 0;
    #topHider {
        position: absolute;
        top: 0;
        left: 0;
        height: 2px !important;
        width: 100%;
        background-color: #f9f9f9;
    }
    #rightHider {
        position: absolute;
        top: 0;
        left: 295px;
        height: 100% !important;
        width: 15px;
        background-color: #f9f9f9;
    }
    #leftHider {
        position: absolute;
        top: 0;
        left: 0;
        height: 100% !important;
        width: 2px;
        background-color: #f9f9f9;
    }
    #bottomHider {
        position: absolute;
        bottom: 1px;
        left: 0;
        height: 2px !important;
        width: 100%;
        background-color: #f9f9f9;
    }
}

<div class="g-recaptcha-wrapper">
  <re-captcha #captchaRef="reCaptcha" (resolved)="onCaptchaResolved($event)" siteKey="{{captchaSiteKey}}"></re-captcha>
  <div id="topHider"></div>
  <div id="rightHider"></div>
  <div id="bottomHider"></div>
  <div id="leftHider"></div>
</div>

Result

score 0 · Answer 14 · answered Aug 25 '22 at 11:47

Class .g-recaptcha is not scaling the challenge popup. Google does not assign class to the parent of the iframe div. Hence targeting the general div with child iframe will work for both recaptcha and the challenge popup.

div iframe {
  transform:scale(0.77);
  -webkit-transform:scale(0.77);
  transform-origin:0 0;
  -webkit-transform-origin:0 0;
}

It will scale other iframes on the page as well therefore only use this if you don't have any other iframes.

Change New Google Recaptcha (v2) Width

14 Answers14

Linked

Related