Cómo mover reCAPTCHA de Google a la esquina izquierda con CSS

¿Te molesta el logo de Google reCAPTCHA en la esquina inferior derecha? ¿Quieres poner algo ahí más importante para tus usuarios? Pues estás en el lugar correcto.

No se puede obviar que Google reCAPTCHA funciona genial para parar Spam. Pero tiene 2 problemas principales:

1. Merma la velocidad de carga de la web y teniendo su correspondiente impacto en Page Speed.
2. Se muestra en todas las páginas de la web. Y además en un sitio que puede ser muy útil para otras cosas.

Sobre el primer punto no comentaré nada es este artículo porque escribiré otro sobre la conveniencia o no de usar Google reCAPTCHA. (Por cierto, si quieres que te avise de los artículos que voy publicando por mail, te invito a que te suscribas a mi newsletter)

Pero sobre lo segundo hay una solución muy sencilla. Cambiar la posición de Google reCAPTCHA por CSS.

Te dejo el código que he usado en mi propia web para tal fin. Es posible que tengas que modificarlo un poco para que se ajuste a tu propia web, pero debe funcionar. Ponlo en el Personalizador en CSS adicional y pruébalo:

/*Mover Recaptcha a la izquierda*/
.grecaptcha-badge {
width: 70px !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
left: -2px !important;
bottom: 20px !important;
}
.grecaptcha-badge:hover {
width: 256px !important;
}

Solucionado, ya tenemos el reCAPTCHA de Google situado en la esquina inferior izquierda, así tenemos la derecha (que es una zona más premium de nuestra web) para cosas mucho más interesantes como poner un botón de “subir arriba“, uno de WhatsApp, un carrito flotante, o lo que nos haga falta.

Seguro que será mucho más efectivo que el sello de Google.

Espero que te haya servido y si tienes alguna duda al respecto te invito a dejarme un comentario.

¡Muchas gracias!