Google reCaptcha invisible para Contact Form 7

Si estás leyendo esto es porque estás como los locos intentando hacer que el look&feel de tu web no se rompa de un plumazo con un pedazo de reCaptcha. Vale, no entres en pánico tenemos una solución para ocultar el reCaptcha de Google en Contact Form 7 (al máximo posible).

Si eres masoquista puede que te dé igual que te entren por la web, pero lo cierto es que, de un tiempo hasta ahora, se ha hecho casi imprescindible utilizar este tipo de tecnología web para evitar la entrada masiva de todo tipo de bots, gasterópodos y demás peña intensa y dañina.

Google y su super reCaptcha

Atrás quedaron los años en los que teníamos que lidiar con textos crípticos, cuentas matemáticas imposibles (y no tan imposibles), selección masiva de imágenes en las que salga un perrito en lugar de un cerdito y demás distracciones que hacían de nuestra vida algo más bonito y tedioso a la vez.

Google simplificó todo esto en su segunda versión de reCaptcha con su famoso checkbox acompañado del texto “I’m not a robot”. Un pequeño clic para el usuario y una gran cantidad de hostilidad eliminada de un plumazo.

Pues bien, no contentos con esto, tienen una tercera versión completamente fantasma, todavía en beta y de la cual daremos cuenta cuando esté más rodada. Se basa puramente en Javascript y parece que analiza interacciones del usuario tales como movimientos del ratón, velocidad y certeza en el clic… ¡No sabemos a lo que podemos llegar!

reCaptcha Invisible, no tan invisible

Mientras se curte esta tercera y parece que mágica versión, vamos a ver un método con un poco más de solera. Acompañando la segunda versión del reCaptcha, hay una opción llamada Invisible reCaptcha, la cual no requiere ningún tipo de interacción con el usuario. Sin embargo, sí tendremos que insertar un badge de aviso para el usuario, hay que informar de que lo estamos usando y mostrar los enlaces a la información legal.

Cómo crear un Invisible reCaptcha

Al tratarse de un producto que proporciona Google, obviamente tienes que tener una cuenta de Google y estar logado, una vez has asumido que le hemos vendido el alma al diablo, entramos a jugar.

Hay que entrar en https://www.google.com/recaptcha/admin y Registrar un sitio nuevo. En la casilla llamada Etiqueta metemos el nombre para identificar el sitio, por ejemplo: waka.

Abajo elegimos el tipo de reCaptcha que queremos, en este caso: Invisible reCaptcha. En la siguiente casilla introducimos el dominio o dominios en el que queremos introducir nuestro reCaptcha. Aceptamos los Terms of Service (tragando de nuevo saliva) y registramos.

Esto nos lleva a una pantalla que te muestra entre otras cosas dos claves: la Clave del sitio y la Clave secreta. Vale, pues por ahora dejamos esto como está que luego las necesitaremos.

Integrar nuestro reCaptcha Invisible en WordPress

Ahora nos vamos a nuestro flamante WordPress y, para no comernos mucho el coco haciendo integraciones, vamos a usar un super plugin: Invisible reCaptcha, de Mihai Chelaru.

Una vez activado, este plugin se ubica en Ajustes > Invisible reCaptcha. Dentro de la pestaña Settings vamos a introducir nuestra Clave del sitio y nuestra Clave secreta donde pone Your Site Key y Your Secret Key respectivamente. Más abajo, en el desplegable junto a donde pone Badge Position vamos a decirle que esté Inline. Una vez lo tengamos, guardamos cambios.

Ok, ya queda menos, ahora nos vamos a la pestaña llamada Contact Forms, y ahí vamos a activar el checkbox llamado Enable Protection for Contact Form 7. Guardamos cambios y ya estamos protegidos del bien y del mal.

Pero, no queremos simplemente estar protegidos, más bien, queremos estar protegidos con estilo, ¿verdad?

Dar estilo al reCaptcha Invisible para Contact Form 7

Vale, si te vas al front de tu Contact Form 7, verás que de repente tienes bajo tu formulario un rectángulo azul junto a un cuadrado gris con el logo de reCaptcha que antes no existía. Es posible que el color principal de tu web coincida exactamente con ese azul, pero es una probabilidad entre millones, a no ser que tu web sea Google, en cuyo caso sí será tu azul corporativo.

Lo que vamos a hacer es modificar el css para hacerlo lo más discreto posible. Aquí hay que decir que podríamos eliminarlo completamente usando un display: none; o hacerlo realmente invisible con visibility: hidden; pero Google nos penalizaría, ya que este aviso debe estar visible para el usuario de manera obligatoria. En resumen, que no hagas trampas.

Como sabéis siempre recomendamos trabajar nuestra propia hoja de estilo creando un themechild que modifique la hoja de estilo del tema que estemos usando. Pues bien, va a ser en nuestra propia hoja de estilo donde vamos a ir insertando el nuevo css.

Lo que vamos a hacer es ocultar el rectángulo azul y dejar a la vista sólo el símbolo del reCaptcha, y será cuando pasemos el ratón por encima cuando se desplegará el contenido del rectángulo azul, y de paso le quitamos la sombra que tiene y alineamos a la derecha.

.grecaptcha-badge{ transition: all .2s; -webkit-clip-path: polygon(188px 0%, 100% 0, 100% 100%, 188px 100%); clip-path: polygon(188px 0%, 100% 0, 100% 100%, 188px 100%); box-shadow: none; margin-right: 0px;}

.grecaptcha-badge:hover{-webkit-clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);}

Otro truco para evitar la patada azul en el ojo es hacer que no tenga color, por lo menos hasta que pases el ratón por encima. Ahí va:

.grecaptcha-badge{ transition: all .2s; -webkit-clip-path: polygon(188px 0%, 100% 0, 100% 100%, 188px 100%); clip-path: polygon(188px 0%, 100% 0, 100% 100%, 188px 100%); box-shadow: none; margin-right: 0px; filter: grayscale(1);}

.grecaptcha-badge:hover{-webkit-clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%); filter: none;}

Espero que os hayan servido estos trucos, aunque sea un poquito.