Agencia SEO

Cómo configurar reCAPTCHA v3 en WordPress con Contact Form 7

Expertos en SEO

Si tienes un formulario de contacto en WordPress hecho con Contact Form 7, lo más probable es que tarde o temprano te empiece a llegar spam. Y no hablo de dos o tres mensajes raros a la semana, no. Hablo de abrir el correo un lunes por la mañana y encontrarte 40 notificaciones de bots ofreciéndote SEO barato, préstamos rápidos y cosas aún más turbias. La verdad es que pasa en casi todas las webs que no tienen ningún tipo de protección, y el remedio más elegante a día de hoy es configurar reCAPTCHA v3.

A ver, te cuento una anécdota rápida para que veas por dónde voy. Hace tiempo, un cliente me llamó bastante alterado porque le estaban llegando más de 100 mensajes de spam al día a través del formulario de su web. El tío ya no podía ni filtrar los leads reales. Le instalé reCAPTCHA v3 en Contact Form 7, ajusté un par de cosas en el umbral de puntuación, y al día siguiente el spam prácticamente había desaparecido. Sin casillas molestas del «no soy un robot», sin imágenes de semáforos, sin nada. El usuario ni se entera de que está ahí. Esa es la magia de la versión 3.

En esta guía te voy a explicar cómo configurar reCAPTCHA v3 en WordPress con Contact Form 7 paso a paso, qué errores comunes tiene la gente, cómo solucionarlos, y un par de trucos que he ido aprendiendo a base de pegarme con esto en proyectos reales.

Qué es reCAPTCHA v3 y por qué deberías usarlo

Antes de meternos en faena, conviene entender qué estamos instalando exactamente. reCAPTCHA v3 es el sistema antispam de Google, pero a diferencia de las versiones anteriores, este no le pide nada al usuario. O sea, no hay casillas, no hay retos visuales, no hay «selecciona todas las imágenes con autobuses». Lo que hace es analizar el comportamiento del visitante en segundo plano y asignarle una puntuación entre 0.0 y 1.0, donde 0.0 es casi seguro un bot y 1.0 es casi seguro un humano.

La gracia está en que tú decides a partir de qué puntuación se considera sospechoso un envío. Por defecto, Contact Form 7 pone el umbral en 0.5, que para la mayoría de casos funciona bien, pero luego veremos cómo afinar esto.

Ventajas principales:

  • Experiencia de usuario impecable, porque el visitante no tiene que hacer nada.
  • Protección constante en segundo plano, analizando todo el comportamiento en la página.
  • Compatibilidad total con Contact Form 7, ya que la integración viene de serie en el plugin.

En fin, que es gratis, funciona bien y mejora la conversión del formulario porque elimina fricción. No hay mucho más que discutir.

Requisitos previos antes de empezar

Antes de lanzarte a configurarlo, asegúrate de tener lo siguiente:

  • WordPress actualizado (idealmente la última versión estable).
  • Contact Form 7 instalado y activado en tu sitio.
  • Una cuenta de Google para acceder a la consola de reCAPTCHA.
  • Acceso al panel de administración de WordPress con permisos de administrador.

Si todo esto lo tienes, vamos al lío.

Paso 1: Obtener las claves de reCAPTCHA v3 en Google

Lo primero de todo es registrar tu sitio en la consola de administración de reCAPTCHA para que Google te dé las dos claves que necesitamos: la clave del sitio (site key) y la clave secreta (secret key).

Entra aquí: https://www.google.com/recaptcha/admin

Una vez dentro, vas a ver un formulario con estos campos:

  1. Etiqueta: ponle un nombre que reconozcas, tipo «Web de cliente X» o el dominio directamente. Esto es solo para que tú sepas cuál es cuál si gestionas varias webs.
  2. Tipo de reCAPTCHA: aquí seleccionas reCAPTCHA v3. Ojo con esto, porque si marcas v2 por error luego no funciona.
  3. Dominios: añade el dominio de tu web sin http ni https. O sea, solo tudominio.com. Si usas también www.tudominio.com, añádelo en una línea aparte, aunque normalmente con uno basta.
  4. Propietarios: debería aparecer tu correo de Google automáticamente.
  5. Aceptar los términos y darle a Enviar.

Google te va a mostrar entonces dos claves. Cópialas en un sitio seguro, porque las vas a necesitar ahora mismo. De hecho, te recomiendo guardarlas en un gestor de contraseñas o en un documento privado, porque si luego cambias de plugin o reinstalas algo, las vas a volver a necesitar.

Paso 2: Integrar las claves en Contact Form 7

Ahora vamos al panel de WordPress. Ve a Contacto → Integración en el menú lateral. Ahí vas a ver una sección que pone reCAPTCHA con un botón que dice «Configurar claves».

Pulsa ese botón y se te abrirán dos campos:

  • Site Key: pega aquí la clave del sitio que te dio Google.
  • Secret Key: pega aquí la clave secreta.

Guarda los cambios, y ya está. De verdad, así de simple. Contact Form 7 se encarga del resto: carga el script de reCAPTCHA automáticamente, lo inyecta en tus formularios y valida los envíos contra la API de Google.

Un detalle importante: no tienes que añadir ningún shortcode en el formulario. A diferencia de reCAPTCHA v2, donde había que meter un [recaptcha] en el formulario, en la v3 no se añade nada al formulario. Si ves guías antiguas que te dicen que metas shortcodes, ignóralas. Están desactualizadas.

Paso 3: Verificar que funciona

Abre tu web en una pestaña de incógnito (para que no te afecten cachés) y fíjate en la esquina inferior derecha. Deberías ver el badge de reCAPTCHA flotante, ese pequeño logo azul con el símbolo del candado. Si lo ves, vas bien.

Para confirmar que está activo, también puedes:

  • Abrir las herramientas de desarrollador del navegador (F12), ir a la pestaña Network y recargar la página. Busca peticiones a google.com/recaptcha y deberían aparecer.
  • Entrar en la consola de administración de reCAPTCHA en Google y revisar las estadísticas del sitio. A las pocas horas deberían empezar a salir datos de tráfico analizado.

Si todo esto se cumple, enhorabuena, ya tienes reCAPTCHA v3 funcionando en Contact Form 7.

Cómo ocultar el badge de reCAPTCHA (pero sin saltarte las normas)

Vale, aquí viene un tema que pregunta todo el mundo. El badge flotante de reCAPTCHA, digamos que estéticamente no siempre encaja con el diseño de la web. Y sobre todo, tapa contenido en móvil, que es lo más molesto.

Google permite ocultarlo, pero con una condición: tienes que indicar en tu web que estás usando reCAPTCHA y enlazar a la política de privacidad y términos de Google. Es más, lo dicen explícitamente en su documentación.

Para ocultarlo, añade este CSS en tu tema (desde Apariencia → Personalizar → CSS adicional, o en tu hoja de estilos hija):

.grecaptcha-badge {
    visibility: hidden !important;
}

Y luego, cerca de los formularios o en el pie de página, añade un texto tipo:

Este sitio está protegido por reCAPTCHA y se aplican la Política de Privacidad y los Términos de Servicio de Google.

Con los enlaces correspondientes a https://policies.google.com/privacy y https://policies.google.com/terms. Así cumples con las condiciones de Google y mantienes la web limpia.

Errores comunes al configurar reCAPTCHA v3

A ver, aquí es donde la gente se suele atascar. Te paso los problemas más habituales que me he encontrado en proyectos reales y cómo resolverlos.

«The response from reCAPTCHA was not valid»

Este mensaje aparece cuando Contact Form 7 no puede validar el token contra la API de Google. Causas típicas:

  • Las claves están mal copiadas. Revisa que no haya espacios al principio o al final, que es más común de lo que crees.
  • Has metido claves de v2 en lugar de v3. Mira en la consola de Google qué tipo de reCAPTCHA creaste.
  • El dominio registrado en Google no coincide con el dominio real. Si registraste dominio.com pero tu web carga como www.dominio.com, añade ambos en la configuración de reCAPTCHA.

El formulario se envía pero no llega nada

Aquí la cosa suele ir por el umbral de puntuación. Por defecto, Contact Form 7 considera spam cualquier envío con puntuación inferior a 0.5. Pero a veces, usuarios legítimos (sobre todo si usan VPN, navegadores con muchas protecciones, o móviles con datos) reciben puntuaciones más bajas y sus mensajes se bloquean silenciosamente.

Para ajustar el umbral, puedes añadir este filtro en el functions.php de tu tema hijo:

add_filter( 'wpcf7_recaptcha_threshold', function() {
    return 0.3;
});

Bajándolo a 0.3 vas a dejar pasar a más usuarios legítimos, aunque también a algún bot más. Es cuestión de equilibrio. Yo personalmente suelo empezar en 0.5 y ajustar según lo que veo en las estadísticas de reCAPTCHA en Google.

El badge no aparece o no se carga el script

Si no ves el badge flotante ni siquiera en incógnito, revisa:

  • Que las claves estén bien pegadas en Contact Form 7.
  • Que no tengas un plugin de caché o optimización que esté bloqueando scripts de terceros. WP Rocket, Autoptimize y similares a veces diferen o bloquean el JS de reCAPTCHA. Excluye los scripts de google.com/recaptcha de la optimización.
  • Que no tengas un bloqueador de cookies RGPD que esté impidiendo la carga de reCAPTCHA hasta que el usuario acepte. Si lo tienes, configúralo para que reCAPTCHA se cargue dentro de las cookies necesarias o técnicas.

Conflictos con plugins de caché

De hecho, este punto merece su propia sección porque es de los más comunes. Si usas WP Rocket, LiteSpeed Cache, W3 Total Cache o cualquier plugin similar, asegúrate de excluir las páginas con formularios del caché estático o al menos de excluir los scripts de reCAPTCHA de la minificación y el aplazamiento.

En WP Rocket, por ejemplo, vas a Ajustes de archivo → JavaScript → Excluir archivos JS y añades:

/recaptcha/
/gstatic.com/

Con eso evitas que el plugin de caché toque nada relacionado con reCAPTCHA.

Trucos avanzados para optimizar reCAPTCHA v3

Si ya tienes lo básico funcionando y quieres afinar más, te dejo un par de cosas que a mí me han servido mucho.

Cargar reCAPTCHA solo en páginas con formulario

Por defecto, Contact Form 7 carga el script de reCAPTCHA en todas las páginas de la web, lo cual es una barbaridad en términos de rendimiento. Estás metiendo un script pesado de Google en páginas donde no hay formulario, y eso afecta al PageSpeed y al Core Web Vitals.

Para solucionarlo, añade esto a tu functions.php:

add_action( 'wp_enqueue_scripts', function() {
    $load_scripts = false;
    if ( is_page( array( 'contacto', 'presupuesto' ) ) ) {
        $load_scripts = true;
    }
    if ( ! $load_scripts ) {
        wp_dequeue_script( 'google-recaptcha' );
        wp_dequeue_script( 'wpcf7-recaptcha' );
    }
}, 20 );

Cambia 'contacto' y 'presupuesto' por los slugs de las páginas donde realmente tienes formularios. Esto te puede ahorrar entre 100 y 300 ms de carga en el resto del sitio, que no es moco de pavo.

Revisar las analíticas de reCAPTCHA

Entra cada cierto tiempo en la consola de reCAPTCHA y revisa las gráficas. Ahí ves el volumen de tráfico analizado, la distribución de puntuaciones y las acciones más frecuentes. Si ves que el 90% de tu tráfico tiene puntuación superior a 0.7, puedes subir el umbral sin miedo. Si por el contrario tienes mucho tráfico en rangos bajos, igual conviene bajarlo.

Combinar con otras capas de protección

reCAPTCHA v3 es muy bueno, pero no es infalible. Si tu formulario es muy atacado, combínalo con:

  • Akismet para filtrar también comentarios y envíos en otros plugins.
  • Honeypots (campos ocultos que solo los bots rellenan). Hay plugins como CF7 Honeypot que lo añaden en un clic.
  • Limitación de envíos por IP, útil si tienes ataques dirigidos.

Con esta combinación, el spam prácticamente desaparece.

Consideraciones legales y de privacidad

Ni idea de si lo tenías en cuenta, pero reCAPTCHA recoge datos del usuario (cookies, información del navegador, patrones de comportamiento) y los envía a servidores de Google. Esto tiene implicaciones con el RGPD en Europa.

Para estar cubierto:

  • Menciona reCAPTCHA en tu política de privacidad, explicando que se usa para prevenir spam y que los datos se tratan según la política de Google.
  • Inclúyelo en tu política de cookies, ya que instala cookies técnicas.
  • Si tu web es muy estricta con el consentimiento, puedes cargar reCAPTCHA solo tras aceptar cookies, aunque esto complica la implementación y puede dejar los formularios sin protección durante un tiempo.

Total, que no es por asustar, pero mejor tenerlo documentado desde el principio.

Preguntas frecuentes sobre reCAPTCHA v3 en Contact Form 7

¿Puedo usar reCAPTCHA v2 y v3 a la vez? No en Contact Form 7. El plugin solo soporta una versión activa. Si quieres v2 tendrás que usar otro plugin o una integración manual.

¿reCAPTCHA v3 funciona sin SSL? Funciona, pero Google recomienda encarecidamente tener HTTPS. A estas alturas, si tu web no tiene certificado SSL, tienes un problema mucho más gordo que el spam.

¿Puedo limitarlo solo al formulario y no a toda la página? Con Contact Form 7 no directamente. El script se carga a nivel de página. Lo que sí puedes hacer es lo que te mostré antes, que es cargarlo solo en páginas con formulario.

¿Ralentiza mucho la web? Un poco sí, añade alrededor de 100-200 kb de scripts. Por eso es importante cargarlo solo donde hace falta y excluirlo del caché con cuidado.

Cerrando el tema

Pues nada, con esto ya tienes reCAPTCHA v3 configurado en Contact Form 7 como es debido. La instalación básica se hace en cinco minutos, pero los detalles que te he contado (cargar el script solo donde hace falta, ajustar el umbral, ocultar el badge correctamente, excluir del caché) son los que marcan la diferencia entre una implementación rápida y una implementación profesional.

Si te encuentras con algún comportamiento raro, el 90% de las veces la causa es una de estas tres: claves mal copiadas, conflicto con plugin de caché, o umbral de puntuación mal calibrado. Revisa esos tres puntos antes de volverte loco buscando soluciones exóticas.

Y recuerda revisar cada cierto tiempo las estadísticas de reCAPTCHA en la consola de Google, porque te van a dar mucha información sobre qué tipo de tráfico está llegando a tu web. A veces descubres cosas interesantes que van más allá del simple spam.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)