Snippets

Adaptar el reCAPTCHA del Contact Form 7

0

Si alguna vez has trabajado con contact form 7 y has tenido la necesidad de incluir el complemento de Captcha la opción más lógico sería Really Simple CAPTCHA que nos vincula el reCAPTCHA de Google y que además es el que requiere el plugin Contact Form 7. Su uso es muy fácil solo requiere algunos Key que podemos conseguir siguiendo el link que se nos sugiere.

Pero me encontré con un error visual en vista móvil, y esto porque el complemento no es para nada responsive.

img recaptcha captcha

Solución: Después de probar varias alternativas para adaptar el complemento no encontré otra que escalarlo con la propiedad transform de CSS3 y este aplicado al elemento con clase .g-recaptcha que es la clase que se aplica al contenedor principal del complemento. Solo añadimos los siguiente en la hoja de estilos y listo!

.g-recaptcha {
    transform: scale(0.80);
    -webkit-transform: scale(0.80); // Android, iOS
}

Puedes escalarlo al tamaño que necesites y en la resolución que tengas el problema, en mi caso la vista móvil. Veamos mi resultado.

recaptcha-responsive

Comentar

avatar
wpDiscuz