How to resize the Invisible RECAPTCHA Image Select Pop Up Frame

Question

I have recently added Google RECAPTCHA V2 INVISIBLE version onto my site.

The problem I have is that the Pop-Up Frame that appears is HUGE on the screen.

Now.. I am not talking about the "I'm Not A Robot" box (all answers I have found on the net seem to talk about scaling this little grey box). So not this one

I am talking about the actual Image Select Pop-Up Frame where you have to click the images... This one. This silly thing;

The issue I have is not specific to mobile... It even looks HUGE on my laptop.

The common answer that I have found is this one but this does not change the size of the pop-up image select window. I have played with this and tried all kinds of combinations but nothing works.

I have this invisible RECAPTCHA on a simple form field for people to register for our E-Newsletter. I wanted to validate the HTML5 Form Fields first then on submit call the RECAPTCHA...

I found a great bit of script for this on here (thanks to the person who previously submitted that answer) which works like a charm.

So, here is my complete code..

var renderGoogleInvisibleRecaptcha = function() {
  for (var i = 0; i < document.forms.length; ++i) {
    var form = document.forms[i];
    var holder = form.querySelector('.recaptcha-holder');
    if (null === holder) {
      continue;
    }

    (function(frm) {

      var holderId = grecaptcha.render(holder, {
        'sitekey': 'site key',
        'size': 'invisible',
        'badge': 'bottomright',
        'callback': function(recaptchaToken) {
          HTMLFormElement.prototype.submit.call(frm);
        }
      });

      frm.onsubmit = function(evt) {
        evt.preventDefault();
        grecaptcha.execute(holder);
      };

    })(form);
  }
};

<script src="https://www.google.com/recaptcha/api.js?onload=renderGoogleInvisibleRecaptcha&render=explicit" async defer></script>
<div class="news-container">
  <form action="../php_scripts/handler.php" method="post" enctype="multipart/form-data" autocomplete="off">

    <div class="news-title">
      Subscribe to our Monthly E-Newsletter
    </div>

    <div class="news-input">
      <div class="field-icon"><i class="fi-mail"></i></div>
      <input class="input" name="email" type="email" required="required" placeholder="Email Address" id="email" oninvalid="setCustomValidity('Please Enter A Valid Email Address')" onchange="try{setCustomValidity('')}catch(e){}" />
    </div>
    <div class="recaptcha-holder"></div>

    <div class="news-submit">
      <button id="submit" name="submit" type="submit" value="submit">Send</button>
    </div>
  </form>

I know it is possible to size this pop-up as I have seen sites in the past that have lovely small pop-up windows for image select, how can I do so?

Answer 1

I've got a solution for your problem, in the screen shot below there is a div with an iframe inside of it,

you should add this pierce of css to the div above the iframe, and you can also change the scale value to make it bigger/smaller:

transform: scale(0.77);
-webkit-transform: scale(0.77);

Answer 2

The answer to this problem was easier than I could envisage.. Special thanks to Ramon for giving me the clue that resulted in the answer.

I added one line of code to the Java immediately after the execute recaptcha function

$('iframe').parent().css({ 'transform' : 'scale(0.77)', '-webkit-transform' : 'scale(0.77)' });

When the iframe loads it is then scaled according to the parameters given. This solved the visual appearance issue I had with the Image Select iframe pop-up. I guess this could be taken further and used to create a dynamic scaling for mobiles, but the 0.77 does for what I needed.

The only draw back to this solution is that once the execute recaptcha function has been called it will scale EVERY iframe on the page. I tried to find a fix that just scaled the recaptcha iframe but failed to do so.

So, here is the final fully functioning Java code. This will validate the form fields using HTML5 methods, then call the recapcha which can now be scaled as described above.

<script type="text/javascript">
 var renderGoogleInvisibleRecaptcha = function() {
 for (var i = 0; i < document.forms.length; ++i) {
 var form = document.forms[i];
 var holder = form.querySelector('.recaptcha-holder');
 if (null === holder){
 continue;
 }

 (function(frm){

 var holderId = grecaptcha.render(holder,{
 'sitekey': 'Your Site Key',
 'size': 'invisible',
 'badge' : 'bottomright', // possible values: bottomright, bottomleft, inline
 'callback' : function (recaptchaToken) {
 HTMLFormElement.prototype.submit.call(frm);
 }
 });

 frm.onsubmit = function (evt){
 evt.preventDefault();
 grecaptcha.execute(holderId);
 $('iframe').parent().css({ 'transform' : 'scale(0.77)', '-webkit-transform' : 'scale(0.77)' });
 };

 })(form);
 }
 };
</script>