How to customize reCAPTCHA v2?

Question

How to customize reCAPTCHA v2?

Navigation

#1 by (2 votes)

1

I put the reCAPTCHA v2 on my site, but I have type problem:

Iwantedtomakehimresponsive,sohetrackedthesizeofthefields.

Ifoundasolutionoftype:

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

Butthisonlychangesthescaleoftheelement,theproblemofusingitthiswayisthatitincreasesthewidthandheightandIstillcannotmakeitresponsive.

AnothersolutionistouseinvisiblereCAPTCHAv2,itsproblemisthatitcreatesa"flip":

Inthelowerright-handcornerofthesite,Ihaveafloatingbuttonandthis"flip" disrupts and I can not hide this "flip" because of the terms and conditions of reCAPTCHA v2.

You agree to explicitly 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 contents do not match the borders, ie if I put in css for example width: 100% your content will not go to the edge.

recaptcha css google responsivo

asked by anonymous 16.10.2017 / 15:53

1 answer

'Uncaught ReferenceError: floor is not defined' when trying to use floor and random to randomly pick an item from an array How to find specific words in a txt file in python?

score 2 · Accepted Answer

Is it really necessary to leave reCAPTCHA responsive?

As I see 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 default style.

Even in aesthetic terms, a 100% wide-screen captcha would not be such a beautiful thing to see.

There is a way to make it 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><scriptsrc="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