Cómo hacer Google recaptcha Responsive

El reCAPTCHA de Google es sin duda una muy interesante solución al SPAM, pero ¿qué podemos hacer para que se muestre de forma responsive?

Desde luego es un problema que en la versión escritorio se muestre correctamente, pero en diversas resoluciones móviles se muestre de una forma no responsiva, no adaptada a la navegación móvil.
 
Y para muestra un botón, o mejor dicho un par de ellos:
 

EJEMPLOS DE GOOGLE RECAPTCHA NO RESPONSIVE

Aquí tenemos un ejemplo del problema de Google reCAPTCHA no responsive, navegando desde un smartphone, a una resolución de 240X320px:

google recaptcha no responsive resolucion 240-320
 

El segundo ejemplo no responsive, no adaptado a navegación móvil, con la resolución 320X240px:

google recaptcha no responsive resolucion 320-240
 
Como se puede ver claramente, la capa del Google reCAPTCHA se va de madre… nada responsive.

¿Quieres ir directo a la SOLUCIÓN? Haz click aquí. Sino sigue leyendo  🙂

 
Ya podría el señor cacique Google aportar una solución por su parte, ya que le dan tanto énfasis al tema de tener una web adaptada a los dispositivos móviles.

Vamos pues a aportar una solución para conseguir un Google reCAPTCHA adaptado a la navegación móvil, que la chica de Geekgoddess.com publicó en su blog hace tiempo, junto con algunos otros usuarios que se animaron a a comentar y mejoraron dicha solución.

 

Atención, pregunta:

¿Hay alguna forma de hacer adaptable el script y el css que se carga desde Google?

Pues no, porque al ser un javascript que carga externamente, poco podemos hacer.

 

Pero lo que sí que podemos controlar es la capa que se coloca en nuestro sitio web con la clase g-recaptcha, que permite cargar el CAPTCHA.

Yo también aportaré mi pequeño granito de arena, partiendo de la solución dada por ellos, que es lo que me ha ayudado a ver la luz, para hacer el Google reCAPTCHA responsive.

 

Primero, buscando en el foro de soporte del plugin Contact Form en WordPress.org (que permite añadir el Google reCAPTCHA en los formularios de contact form) nos encontramos en tercera página (a fecha 8 de marzo de 2016) con este tema:
https://wordpress.org/support/plugin/contact-form-7/page/3/
 

Y en dicho tema encontramos el enlace que nos lleva al blog de Geekgoddess :

https://www.geekgoddess.com/how-to-resize-the-google-nocaptcha-recaptcha/#comment-302

 

El CSS que proponen desde ahí es el siguiente:

<style>
@media screen and (max-height: 575px){
#rc-imageselect, .g-recaptcha {transform:scale(0.77);
-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;}
</style>

 
Por supuesto es personalizable a cada sitio web, si modificamos las propiedades de
transform:scale(0.77);

y

-webkit-transform:scale(0.77);

Podemos cambiar el valor de 0.77 por otro que se adapte mejor en cada caso.

 

Pero esta solución no es la definitiva, es más o menos un parche para evitar que el Google reCAPTCHA se desmadre demasiado, pero no es una solución PERFECTA.

Y en este punto, os doy mi idea, desarrollada a partir del post de Geekgoddess.com (las cosas como son) y aderezando un poco de mis pequeños conocimientos de CSS:

Se trata de una solución personalizada para cada resolución. (Sí, lo se, lleva trabajo, nadie dijo que las cosas fueran fáciles, pero si quieres presumir de tener un Google reCAPTCHA responsive 100% en todas las resoluciones, aquí tienes una idea).

Se trata de hilar más fino todavía.
 

Al principio del post os mostraba un par de capturas de resoluciones móviles que mostraban el google captcha no responsive, y con estas modificaciones CSS (al menos para el sitio web al que se aplica en este caso) FUNCIONA PERFECTAMENTE (requiere personalización para cada sitio web, haz tus pruebas):
 

SOLUCIÓN CSS PARA ADAPTAR EL GOOGLE RECAPTCHA Y HACERLO RESPONSIVE (para la resolución de anchura máxima de 240px) (adaptable a otras resoluciones):

 

@media screen and (max-width: 240px){
.g-recaptcha {
transform:scale(0.58);-webkit-transform:scale(0.58);
transform-origin:0 0;-webkit-transform-origin:0 0;
}}

Google recaptcha responsive 240-320
 

SOLUCIÓN CSS PARA ADAPTAR EL GOOGLE RECAPTCHA Y HACERLO RESPONSIVE (para la resolución de anchura máxima de 320px):

 

@media screen and (min-width: 319px) and (max-width: 320px){
.g-recaptcha {
transform:scale(0.79);-webkit-transform:scale(0.79);
transform-origin:0 0;-webkit-transform-origin:0 0;
}}

 
Google recaptcha responsive 320-240
 
Pues ala, ahí queda eso!  😉

Ahora solo queda probar en otras resoluciones a ver cómo se carga en vuestro sitio web y adaptar este css a cada resolución en particular.

 

Por último, solo por mencionar otras formas de conseguir un Google reCAPTCHA responsive y adaptable, os dejo la solución CSS que desde stackoverflow.com nos ofrecían (a fecha 23 de octubre de 2015)

(A mí no me da buen resultado personalmente, y creo que es mejor la solución personalizada que he aportado previamente, pero probadlo! )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#rc-imageselect, .g-recaptcha {
display: inline; //the most important
}
 
#rc-imageselect{
max-width: 100%;
}
 
.g-recaptcha>div>div{
width: 100% !important;
height: 78px;
transform:scale(0.77); //the code to rescale the captcha obtained in this page
webkit-transform:scale(0.77);
text-align: center;
position: relative;
}

 

¿Te ha solucionado algo este artículo?

No dudes en dejar tu opinión y comparte!  😉

 

Categorías Web