¿Cómo mover reCAPTCHA v3 a la izquierda en WordPress?

Si te fastidia ver el badge de reCAPTCHA v3 abajo a la derecha, puedes moverlo a la izquierda con un simple CSS. ✅

Lo mejor es que, con el código correcto, además puedes dejarlo compacto y que se expanda al pasar el ratón por encima. 🧩

Este método no “rompe” WordPress porque solo cambia la posición y el tamaño visual del badge. 🛠️

Qué vas a lograr con este método

Vas a colocar el badge en la izquierda, con un ancho reducido para que sea más discreto. 👀

Vas a hacer que el badge se expanda con hover para que se lea completo cuando el usuario lo necesite. 🖱️

Vas a evitar el típico fallo de “no se mueve” anulando la propiedad right. 🔧

Dónde pegar el CSS en WordPress

La forma más rápida es usar el área de CSS adicional del personalizador. ⚡

Sigue estos pasos en lista. 👇

• Entra en WordPress → Apariencia → Personalizar. 🎨
• Abre CSS adicional. 🧾
• Pega el código y pulsa Publicar. ✅
• Recarga la web en incógnito para ver el cambio real. 🕵️‍♂️

Código CSS para mover reCAPTCHA v3 a la izquierda

Este es el código que vas a usar para fijarlo a la izquierda y hacerlo expandible. 📌

.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;
}

Para que el movimiento a la izquierda sea más consistente, añade también right: auto !important; dentro del bloque principal si tu tema lo fuerza a la derecha. 🔩

.grecaptcha-badge {
width: 70px !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
left: -2px !important;
right: auto !important;
bottom: 20px !important;
}

Instrucciones rápidas para que se vea el cambio

Si lo pegas y no notas nada, casi siempre es por caché. 🧼

Haz esto en lista. 👇

• Limpia la caché del plugin de rendimiento. 🚀
• Si tu hosting tiene caché, límpiala también. 🧯
• Recarga con Ctrl+F5 o prueba en incógnito. 🔄

Ajustes recomendados para que quede perfecto

Si el badge queda demasiado pegado al borde, cambia left: -2px por un valor positivo como 12px. 📏

Si tapa un botón flotante, añade un z-index alto para que no quede oculto detrás de elementos. ⬆️

Usa este ajuste si lo necesitas. 🧷

.grecaptcha-badge {
z-index: 999999 !important;
}

Qué pasa en móvil con el hover

En móvil el hover no siempre se comporta igual porque no existe el “paso del ratón”. 📱

Si quieres que el badge se muestre completo en móviles, puedes forzar el ancho grande solo en pantallas pequeñas. ✅

Hazlo así. 👇

@media (max-width: 768px){
  .grecaptcha-badge{
    width: 256px !important;
  }
}

Problemas típicos y soluciones rápidas

Si el badge sigue a la derecha, el culpable suele ser un right aplicado por reCAPTCHA o por tu tema. 🧱

Solución en lista. 👇

• Añade right: auto !important; al bloque principal. 🔧
• Mantén left y bottom con !important. ✅
• Limpia la caché y prueba en incógnito. 🕵️‍♂️

Si el badge desaparece, revisa que no haya reglas que usen display: none o visibility: hidden. 🚫

Si se ve “cortado” raro, recuerda que estás usando overflow hidden para lograr el efecto de “pestaña”. ✂️

Enlaces externos recomendados

Si quieres cubrirte bien a nivel de cumplimiento, enlaza desde tu política legal a las páginas oficiales. 🔗

• Política de privacidad de Google: https://policies.google.com/privacy
• Términos de Google: https://policies.google.com/terms
• Información de reCAPTCHA: https://www.google.com/recaptcha/about/

Checklist final

Si cumples este checklist, ya lo tienes listo. 📋

• El badge aparece abajo a la izquierda. ✅
• Se ve compacto y se expande con hover. 🖱️
• Limpiaste la caché y comprobaste en incógnito. 🧼
• En móvil no tapa elementos importantes. 📱