reCAPTCHA v3 en Contact Form 7 – Configuración y trucos

Si tienes actualizado al día el plugin Contact Form 7 ya te habrás dado cuenta de que ahora utiliza como sistema de comprobación humana el nuevo reCAPTCHA v3 de Google, también conocido como CAPTCHA invisible.

Por qué reCAPTCHA v3

Las ventajas de reCAPTCHA v3 son evidentes:

  • No tienes que incluir un código en tus formularios para que funcione la comprobación CAPTCHA. De hecho debes quitarlo si ya lo tenías incluido previamente en tus formularios, una vez actualices a la versión actual de Contact Form 7.
  • Tus formularios no pedirán una comprobación humana a tus visitantes «normales», o sea, humanos, sino que el sistema v3 de reCAPTCHA de Google solo funciona con los spammers, identificando a bots y resto de máquinas spam, atrapándoles en una especie de limbo para malos, lo que viene a denominarse como sistema honey pot, o tarro de miel, en alusión a que van a él como insectos.

En este vídeo se muestra muy claro y visualmente la diferencia entre la v3 de reCAPTCHA y las versiones anteriores…

Básicamente, es bueno para usuarios «humanos» porque no les molesta con estúpidas comprobaciones de si ven semáforos o motos, y es malo para bots porque los atrapa sin intervención necesaria por nuestra parte.

Cómo activar reCAPTCHA v3 en Contact Form 7

Sencillo, primero ve a la web de reCAPTCHA de Google y registra un nuevo sitio en el formulario que verás.

Elige la etiqueta que quieras (página con formulario, etc), selecciona la casilla de reCAPTCHA v3, luego en la caja de dominios añade en los que vayas a usar las claves de este registro, pues puedes usar un registro para varios dominios, no hace falta uno para cada web.

Cuando pulses el botón «Registrar» te mostrará las claves del sitio y clave secreta:

Una vez tengas tus claves ve a la página de administración «Contacto > Integración» y pulsa en el botón llamado «Integración de la instalación» y pega las claves del sitio y secreta y guarda los cambios. ¡Ya está!

El molesto icono de reCAPTCHA v3

Ahora bien, el hecho es que al configurar reCAPTCHA v3 en tu sitio desde Contact Form 7 (o de cualquier otra forma) se mostrará un icono flotante sí o sí en todas las páginas de tu web.

Da igual si esa página tiene formulario o no, se muestra siempre, ocupando un precioso espacio en tu web, y distrayendo a lectores, compradores, ya sabes. Un estorbo inútil vamos.

¿Cómo oculto el icono de reCAPTCHA v3?

Es muy fácil, para ocultarlo solo tienes que añadir el siguiente código en la sección «CSS adicional» del «Personalizador» de WordPress, o en la hoja de estilos (normalmente es el archivo style.css) de tu tema hijo activo:

Si, por algún motivo, este código no lo oculta puedes probar con este otro en su lugar:

Al guardar los cambios el molesto icono desaparece.

Cómo NO ocultar el icono de reCATPCHA v3

Es posible que encuentres por ahí otros métodos de ocultar el icono de reCAPTCHA v3, pero si el siguiente no lo uses:

Si usas display: none lo que consigues es que no funcione la comprobación de spam de reCAPTCHA v3, directamente. ¿He dicho que no uses este código? Pues eso.

Ojo, que a Google no le gusta que le ocultes el icono

Ahora bien, si lo ocultas, el mismo Google recomienda que indiques que lo usas , añadiendo en tu formulario, o cerca de él, algo así:

Para que se vea tal que así…

¿Y … puedo ocultar el icono en todas partes menos en mi página de contacto?

Muy, muy buena pregunta 🙂

Pues claro, en ese caso te propongo usar este otro código CSS:

De este modo aparecerá en tu página de contacto pero no en el resto, que creo que es lo ideal.

¿Se puede desactivar el script además de ocultar el icono?

Me encanta que me hagas este pregunta, para nota. Porque con los anteriores trucos ocultas el icono pero no haces nada por optimizar la carga de tus páginas, algo siempre a tener en cuenta.

Y sí, claro, primero tendrás que desactivar el script globalmente, añadiendo este código al archivo functions.php del tema activo o a tu plugin de ñapas:

Ahora bien, este código desactiva el script globalmente, y tampoco funcionará en tu página de contacto. Para que funcione tendrás que añadir a la página donde esté el formulario el siguiente código:

No sé dónde poner el segundo código ¿no se puede hacer más fácil?

Vale, sí, se puede. Añade la siguiente función a tu archivo functions.php del tema activo o a tu plugin de personalizaciones:

Guardas y ya tienes todo niquelado.

Si te gusta este contenido prueba tambien a suscribirte al canal en YouTube.
VALORA ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
FlojitoNo está malEstá bienMe ha servidoFantástico (10 votos, promedio: 5,00 de 5)
Cargando…

Al dejar una valoración se recopila la IP para evitar fraudes

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Pin It on Pinterest

Compartir
Ir al contenido