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:

/* Ocultar icono de reCaptcha v3 */
.grecaptcha-badge{
	visibility: collapse !important;  
}

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

/* Ocultar icono de reCaptcha v3 */
.grecaptcha-badge {
opacity:0 !important;
}

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:

.grecaptcha-badge {
display: none;
}

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í:

<small>Este sitio está protegido por reCAPTCHA y se aplican la 
<a href="https://policies.google.com/privacy">política de privacidad</a> y
<a href="https://policies.google.com/terms">términos del servicio</a> de Google.
</small>

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:

/* Oculta el icono de reCAPTCHA v3 en todas partes */
.grecaptcha-badge {
    visibility: collapse !important;
/* también puedes usar visibility: hidden si lo prefieres */
}

/* Pero muestra el icono de reCAPTCHA v3 en mi página de contacto */
/* Ojo: cambia el número del id al de la tuya */
.page-id-1583 .grecaptcha-badge {
    visibility: visible !important;
}

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:

/* Quita script de recaptcha de todas partes */
remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

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:

/* Activar script de recaptcha en esta página */
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
    add_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts', 10, 0 );
}

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:

/* No cargar script de recaptcha salvo en página de contacto y otras */
function ayudawp_load_recaptcha_badge_page(){
    if ( !is_page( array( 'contacta','descuentos','como-instalar-wordpress-paso-a-paso' ) ) ) {   
        wp_dequeue_script('google-recaptcha');
    }
}
add_action( 'wp_enqueue_scripts', 'ayudawp_load_recaptcha_badge_page' );

Guardas y ya tienes todo niquelado.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(15 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

26 comentarios en “reCAPTCHA v3 en Contact Form 7 – Configuración y trucos”

  1. Buen articulo 🙂
    Aunque a mi lo que mejor me ha funcionado ha sido crear un honeypot
    Recaptcha v3 lo veo un poco verde, según dicen Recaptcha v3 debe funcionar en todas las páginas de la web para que sea efectivo, asi que de poco sirve tenerlo solo activo en la página de contacto

  2. Tengo a mis clientes de dientes debido al nuevo captchaV3, he tenido un montón de quejas (y por lo que veo el desarrollador del contact form en su foro de soporte también) del montón de spam que se cuela, cuando con el 2 no les entraba nada… ¿cuando Google espera solucionar esto?

    1. El mismo Google dice en su documentación que necesita analizar (conocer) el tráfico de una web para que reCaptcha v3 funcione al máximo. De hecho en los códigos he puesto añadir más de una página para que el bicho «aprenda».

    1. Es un error si el JS del plugin no carga bien en el footer (pueden ser mil configuraciones de cada uno, o incluso el tema). Lo explican en el mismo hilo. Yo lo tengo en centenares de sitios y funciona bien

  3. Pablo Moratinos Almandoz

    Muy buenos trucos Fernando, gracias por compartirlos. Me ha gustado particularmente el consejo de evitar el display:none para no liarla parda. Gracias, crack.

  4. Tomas Moya Rodriguez

    Buenos días Fernando,

    No sabes lo que deseaba este artículo. A mi no se me colaba spam, tengo que decir que me funciona fantásticamente bien la versión V3.
    Yo utilizo el formulario de contacto en todas las páginas de mi blog, por lo tanto, quería preguntarte como podría hacer esta función de forma masiva.

    Gracias de antemano.

  5. Hola Fernando, llevo utilizando el captcha v3 con contact form 7 desde que se actualizó el plugin y poder ocultarlo de la vista de los usuarios donde no corresponde me parece fantástico. Pero al ver que aparece en toda la web me surge una pregunta. Aunque las claves se coloquen en el plugin contact form 7, ¿funcionaría sobre un formulario creado en Divi en esa misma web?

  6. ¡No me funciona! Llevo dos días intentando encontrar el fallo; el problema es que introduzco las claves tal y como se indica, se guarda, y a la hora de hacer una prueba todas me saltan como Spam.
    ¿Alguien tiene idea de qué puede ser? GRACIAS!

  7. Tengo que darte las gracias por el artículo. Hasta hace poco el v3 me traía de cabeza y yo fui de las que hizo un «display none». Ahora ya sólo habilito el script tal y como has explicado.

  8. Hola Fernando, tengo un problema estoy usando la versión V3 pero no se me muestran en ninguna de las paginas no se si es por el tema que estoy usando o que porque lo eh configurado en otras paginas y funciona hay algún código que me habilite esta imagen ? cuando reviso en mozilla logro ver el logo del recaptcha pero desaparece muy rápido y se ve como detras de la pagina no en frente te agradezco que me ayudes gracias.

  9. Hola!!
    Muchas gracias por el artículo. Lo he hecho todo y creo que funciona correctamente (al menos ponerlo en marcha y ocultarlo salvo en la página elegida.

    Pero me queda una duda: después de desactivar el script mediante functions.php ¿Hay alguna manera de comprobar que está funcionando correctamente?
    Soy algo novato-manazas y me da cosa no haber hecho bien este paso.

    Gracias de nuevo!!

  10. Hola a todos,

    ¿Os funciona realmente al añadir el código en el plug-in de personalizaciones? Yo por mucho que lo intento no hay manera y mira que tantas otras modificaciones que he descubierto en este blog (mil gracias por cierto, Fernando) me han funcionado perfectamente.

    Trato de evitar meterlo en el archivo de functions.php del tema activo.

    Gracias de antemano.

      1. Gracias por la respuesta, Fernando. Seguiré probando entonces porque es una pena lo que afecta en la velocidad del sitio. Quizás añadiendo el código en el tema hijo(¿?)

        Un saludo.

          1. Disculpa Fernando todo el mareo. He creado el tema hijo y sí es cierto que el código de eliminar el script globalmente parece funcionar (cosa que nunca me ha funcionado al poner ese mismo código en el plug-in de personalizaciones).
            El que no termina de funcionar es el de cargar el script selectivamente solo en ciertas páginas (pegue el código en el tema hijo o en el plug-in de personalizaciones).
            Entiendo que poco más puedes asesorarme, máxime viendo tu confirmación de que a ti sí te ha funcionado en tantos otros sitios.
            No dejaré de probar y, en el peor de los casos, resignarme a ocultar el icono tal y como indicas.
            Igualmente, muchas gracias por toda tu ayuda.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido