How to customize reCAPTCHA v2?

Question

I put reCAPTCHA v2 on my website, but I have a problem like:

I wanted to make him responsive, so he could track the size of the fields.

I found a solution like:

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

But that only changes the scale of the element, the problem of using it this way is that it increases the width and the height and I still can’t do this responsive way.

Another solution is to use invisible reCAPTCHA v2, its problem is that it creates a "tab":

In the lower right corner of the site, I have a floating button and this "tab" disturbs and I cannot hide this "tab" because of the terms and conditions of reCAPTCHA v2.

You agree explicitly to inform Visitors to your site that you have implemented the Invisible reCAPTCHA on your site and that their use of the Invisible reCAPTCHA is Subject to the Google Privacy Policy and Terms of Use.

The complicating factor here is that it is an iframe and its content does not follow the edges, ie if I put in css for example width: 100% its content does not go to the edge.

Answer 1

It’s really necessary to make reCAPTCHA responsive?

In my view it is not necessary, it is not a native/standard component, to conform to other inputs, but rather an external application that often depends on a standard style.

Even in aesthetic terms, a captcha with 100% width on desktop would not be such a beautiful thing to see.

There is how to make it scale compatible with the container yes, follow an example

function scaleCaptcha(elementWidth) {
  // Width of the reCAPTCHA element, in pixels
  var reCaptchaWidth = 300;
  // Get the containing element's width
	var containerWidth = $('.container').width();
  
  // Only scale the reCAPTCHA if it won't fit
  // inside the container
  if(reCaptchaWidth > containerWidth) {
    // Calculate the scale
    var captchaScale = containerWidth / reCaptchaWidth;
    // Apply the transformation
    $('.g-recaptcha').css({
      'transform':'scale('+captchaScale+')'
    });
  }
}

$(function() { 
 
  // Initialize scaling
  scaleCaptcha();
  
  // Update scaling on window resize
  // Uses jQuery throttle plugin to limit strain on the browser
  $(window).resize( $.throttle( 100, scaleCaptcha ) );
  
});

* {
  box-sizing: border-box;
}

.container {
  max-width: 250px;
  background: #ccc;
  padding: 20px;
}

.g-recaptcha {
  transform-origin: left top;
  -webkit-transform-origin: left top;
}

<script src="https://www.google.com/recaptcha/api.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <p>O captcha acompanhou o container de (300 px)</p>  
  <form action="" method="get">
    <div class="g-recaptcha" data-sitekey="6LcHGhITAAAAABIgEAplK2EWsVFkaE5o0DWUpsIs"></div>
  </form>
</div>

Source Codepen