Cómo añadir protección contra spam reCAPTCHA a los formularios de Webflow y bloquear bots automatizados

El spam en formularios es un problema constante para cualquier sitio público. Los bots escanean formularios desprotegidos y los inundan con envíos falsos, llenando las bandejas de entrada de basura, alterando los datos de clientes potenciales y haciéndole perder el tiempo a cualquiera que tenga que filtrarlos.

El reCAPTCHA de Google soluciona esto mediante una integración nativa. Lo he implementado en muchos sitios y la reducción de spam es constante. Los usuarios reales marcan una casilla que dice "No soy un robot", completan un desafío de imágenes si Google sospecha de un comportamiento robótico y luego envían el formulario normalmente.

Esta guía te muestra cómo añadir protección contra spam reCAPTCHA a los formularios de Webflow usando la integración nativa de la plataforma. Sin servicios de terceros ni configuraciones de backend personalizadas, solo la herramienta gratuita de Google y el soporte integrado de Webflow.

4 formas de bloquear spam en formularios de Webflow

Webflow ofrece cuatro métodos de prevención de spam: reCAPTCHA, Cloudflare Turnstile, filtrado de spam y técnicas de honeypot. Cada uno tiene casos de uso específicos, y entender los pros y contras te ayudará a elegir la capa de protección adecuada:

Cuándo reCAPTCHA es la opción correcta:

• Tus formularios ya reciben spam constante (más de 5-10 envíos falsos por semana)
• Has activado el filtrado de spam y no lo detecta todo
• Necesitas una protección inmediata y agresiva sin tiempo de desarrollo personalizado
• Tus usuarios entienden y esperan ver desafíos CAPTCHA.

Uso reCAPTCHA cuando el volumen de spam justifica la fricción añadida de una casilla de verificación visible. Para formularios de contacto con mucho tráfico, formularios de solicitud de demostración o cualquier página que ya haya sido objetivo de bots, la casilla se convierte en un filtro necesario. Los usuarios entienden para qué sirve y el retraso de 2-3 segundos es aceptable comparado con tener que filtrar el spam.

¿Qué necesitas para añadir la protección contra spam de reCAPTCHA a los formularios de Webflow?

Antes de implementar reCAPTCHA, verifica que tu proyecto de Webflow cumpla con estos requisitos.

Sitio de Webflow activo con formularios

Al menos un formulario publicado en tu sitio. reCAPTCHA se aplica a todo el sitio una vez activado, por lo que cada formulario necesita un elemento reCAPTCHA; de lo contrario, los envíos fallarán. He visto a desarrolladores despistarse con esto: activan reCAPTCHA, lo añaden a su formulario de contacto y, de repente, su registro al boletín deja de funcionar porque olvidaron añadir el elemento allí.

Cuenta de Google para el registro en reCAPTCHA

Una cuenta de Google gratuita para acceder a la consola de administración de reCAPTCHA. Registrarás tu sitio y generarás dos claves API:

• Una clave de sitio (pública, integrada en tus formularios)
• Una clave secreta (privada, almacenada en la configuración de Webflow)

Si gestionas el sitio de un cliente, usa una cuenta de Google que controles a largo plazo, no una cuenta personal de Gmail a la que podrías perder el acceso. Las claves de reCAPTCHA están vinculadas a la cuenta que las generó, y cambiarlas más tarde implica actualizar tanto la consola de administración como los ajustes de Webflow al mismo tiempo.

Una cuenta de Google dedicada para la agencia o la propia cuenta de Google del cliente son opciones impecables.

Dominio publicado o subdominio de pruebas

Dominio personalizado (como example.com) o subdominio de pruebas de Webflow (como yoursite.webflow.io) donde probarás reCAPTCHA. Google necesita validar el dominio, lo cual puede tardar hasta 30 minutos tras el registro.

Hacer pruebas en el modo de vista previa del Diseñador de Webflow no funcionará; reCAPTCHA solo opera en sitios publicados.

Plan de Webflow que permita código personalizado (para optimización móvil)

Aunque el reCAPTCHA básico funciona en cualquier plan de Webflow, hacerlo adaptable a móviles requiere añadir un atributo personalizado. Si quieres la vista compacta para móviles, necesitarás un plan que admita atributos personalizados e inyección de código.

5 pasos para añadir protección contra spam de reCAPTCHA a los formularios de Webflow

La implementación nativa de Webflow gestiona reCAPTCHA v2 (la versión de casilla de verificación) mediante elementos integrados y ajustes del sitio. Este método no requiere código personalizado para las funciones básicas y valida los envíos en el servidor a través del gestor de formularios de Webflow.

Paso 1: Registra tu sitio en Google reCAPTCHA

Ve a la consola de administración de Google reCAPTCHA e inicia sesión con tu cuenta de Google. Si ya has registrado sitios anteriormente, haz clic en el icono de más (+) para añadir uno nuevo.

Si es tu primera vez, es posible que Google te lleve directamente al formulario de registro.

Introduce un nombre reconocible, como "Formularios de contacto de TuEmpresa" o "Sitio Webflow de NombreCliente". Esta etiqueta solo es visible para ti en el panel de control de reCAPTCHA.

Selecciona el tipo de reCAPTCHA

Elige "reCAPTCHA v2" y, concretamente, la opción de casilla de verificación "No soy un robot". La integración nativa de Webflow solo admite la casilla de verificación v2; no selecciones la v3 ni la v2 invisible. Si eliges la v3 por error, las claves no funcionarán y verás errores de "Clave de sitio no válida" en tus formularios de Webflow.

He tenido que solucionar este error al menos una docena de veces. Un desarrollador se registra en la v3 porque suena más avanzado, pega las claves en Webflow y pierde una hora intentando arreglarlo antes de darse cuenta de que Webflow requiere explícitamente las claves de la casilla de verificación v2.

Añade tus dominios

Introduce todos los dominios donde vayas a usar reCAPTCHA. Esto incluye:

• Tu dominio personalizado: example.com
• Subdominio de pruebas de Webflow: yoursite.webflow.io
• Cualquier dominio personalizado adicional conectado a este sitio

Google incluye automáticamente los subdominios de primer nivel. Si añades example.com, Google también registra subdomain.example.com. Introduce un dominio por línea. No incluyas http:// ni https:// — solo el dominio a secas.

Después, acepta los términos y envía. Marca la casilla de los Términos de servicio de reCAPTCHA y haz clic en Enviar. Google generará dos claves al instante.

Verás dos claves en pantalla:

• Clave del sitio: Clave pública que se inserta en tu HTML
• Clave secreta: Clave privada que Webflow utiliza para la validación del lado del servidor

Mantén esta pestaña del navegador abierta. Pegarás estas claves en Webflow en el paso 2. Las claves distinguen entre mayúsculas y minúsculas y suelen ser largas (más de 40 caracteres), así que cópialas y pégalas tal cual; no las escribas a mano.

Por último, espera a que se registre el dominio. La documentación de Google indica que la validación del dominio puede tardar hasta 30 minutos. En la práctica, la mayoría de los dominios se validan en 5 minutos, pero he visto retrasos de hasta 20 minutos en momentos de mucho tráfico. Si haces la prueba inmediatamente y ves errores de dominio, espera un poco e inténtalo de nuevo.

Paso n.º 2: Activar la validación de reCAPTCHA en la configuración del sitio de Webflow

Abre tu proyecto de Webflow y haz clic en el icono del engranaje de configuración en la barra lateral izquierda. Ve a Configuración del sitio → Aplicaciones e integraciones.

A continuación, busca la configuración de validación de reCAPTCHA. Desplázate hasta la sección "Protección contra spam de Cloudflare Turnstile". Debajo, encontrarás "Validación de reCAPTCHA" con dos campos de entrada: Clave del sitio de reCAPTCHA v2 y Clave secreta de reCAPTCHA v2.

Pega tus claves API.

Activar validación

Marca la casilla junto a "Activar validación de reCAPTCHA". Lee la advertencia con atención: "Al activar reCAPTCHA, se aplicará la validación a todos los formularios de tu sitio. Cualquier formulario que no tenga un elemento reCAPTCHA no podrá enviarse".

Aquí es donde la gente suele tropezar. En el momento en que guardes esta configuración, todos los formularios de tu sitio deberán tener el elemento reCAPTCHA, o no aceptarán envíos. Si tienes varios formularios (contacto, boletín, solicitud de demostración), debes añadir el elemento a todos ellos antes de activar la validación.

Haz clic en "Guardar" en la configuración del sitio. La validación ya está activa en todo el sitio. No lo publiques todavía. Primero, añade el elemento reCAPTCHA a tus formularios en el paso 3.

Paso n.º 3: Añadir el elemento reCAPTCHA a cada formulario

Abre el Diseñador de Webflow y ve a una página que contenga un formulario. Selecciona el bloque de formulario que quieras proteger.

Añadir elemento reCAPTCHA

Abre el panel Añadir (icono de más en la barra lateral izquierda). Desplázate hasta el final, donde verás la sección Formularios. Arrastra el elemento "reCAPTCHA" a tu formulario y colócalo encima del botón de enviar.

El elemento aparece como un cuadro de marcador de posición en el Diseñador. No verás la casilla de verificación real de "No soy un robot" hasta que publiques el sitio; reCAPTCHA solo se renderiza en páginas activas, no en la vista previa del Diseñador.

Coloca el elemento

Yo coloco el reCAPTCHA justo encima del botón de envío para que los usuarios lo vean como el paso final antes de enviar. Algunos diseños lo ponen entre los campos del formulario, pero esto crea confusión sobre el flujo de envío.

Repite para todos los formularios

Navega a cada página que tenga un formulario y añade el elemento reCAPTCHA. Esto incluye:

• Formularios de contacto
• Suscripciones al boletín
• Formularios de solicitud de demostración
• Formularios de solicitud
• Cualquier formulario personalizado que utilice el elemento de formulario nativo de Webflow

Si olvidas aunque sea un solo formulario, fallará cuando los usuarios intenten enviarlo. Yo mantengo una lista de verificación de todos los formularios durante este paso para evitar que se me escape alguno.

Paso 4: Publica tu sitio y prueba la funcionalidad de reCAPTCHA

Haz clic en "Publicar" en la esquina superior derecha del Diseñador. Selecciona "Publicar en los dominios seleccionados" y confirma.

Abre tu sitio publicado en una nueva pestaña del navegador (no en la vista previa del Diseñador). Navega hasta un formulario con reCAPTCHA.

Deberías ver aparecer la casilla de verificación de reCAPTCHA con el texto "No soy un robot" y la insignia de reCAPTCHA de Google. Si no ves la casilla, borra la caché de tu navegador o prueba en una ventana de incógnito.

Paso 5: Optimiza reCAPTCHA para dispositivos móviles

El reCAPTCHA predeterminado se renderiza con 304 píxeles de ancho, lo que se desborda en teléfonos con pantallas más estrechas. La versión compacta reduce el ancho a 164 píxeles, ajustándose cómodamente a todos los dispositivos móviles.

Selecciona tu elemento reCAPTCHA

En el Diseñador, haz clic en el elemento reCAPTCHA que añadiste a tu formulario. Abre el panel de Configuración en la barra lateral derecha.

Añade un atributo personalizado

Desplázate hasta "Atributos personalizados" y haz clic en el icono de más para añadir un nuevo atributo.

• Nombre: data-size
• Valor: compact

Este atributo le indica a Google que renderice la versión compacta. El cambio solo se aplica al sitio publicado; no lo verás en el Diseñador.

Publica tu sitio y pruébalo en un dispositivo móvil real o con las herramientas de desarrollo del navegador. La casilla de verificación de reCAPTCHA debería ajustarse al ancho de tu formulario sin necesidad de desplazamiento horizontal.

¿Por qué falla reCAPTCHA en los formularios de Webflow? Consejos para solucionar errores comunes

He depurado implementaciones de reCAPTCHA en docenas de sitios de Webflow. Estos son los errores más frecuentes y cómo solucionarlos.

"Error: Invalid site key"

Este error aparece en el cuadro del elemento reCAPTCHA de tu formulario publicado. Significa que la clave del sitio (Site Key) en tu configuración de Webflow no coincide con los registros de Google.

Causas:

• Pegaste la clave incorrecta (la clave secreta en lugar de la clave del sitio)
• Las claves incluyen espacios adicionales al copiar y pegar
• Estás usando claves de reCAPTCHA v3 en lugar de v2
• Las claves están mal escritas (distinguen entre mayúsculas y minúsculas)

Solución: Ve a tu panel de control de Google reCAPTCHA y verifica que estás viendo un registro de v2 ("No soy un robot"). Copia la clave del sitio de nuevo, asegurándote de seleccionar toda la cadena. Pégala primero en un editor de texto sin formato para comprobar si hay espacios al final.

Luego, pega la clave limpia en la configuración del sitio de Webflow → Aplicaciones e integraciones → campo de clave del sitio de reCAPTCHA v2. Guarda y vuelve a publicar.

Si el error persiste después de confirmar que la clave es correcta, elimina ambas claves de Webflow, ve a la consola de reCAPTCHA de Google para generar claves nuevas y pégalas en Webflow.

"ERROR for site owner: Invalid domain for site key"

Esto significa que tu dominio publicado no está registrado en la configuración de reCAPTCHA de Google para esta clave.

Causas:

• Registraste example.com, pero estás probando en staging.example.com (los subdominios más allá del primer nivel no se registran automáticamente)
• Estás probando en yoursite.webflow.io, pero no lo incluiste en la lista de dominios
• Actualizaste tu dominio personalizado y olvidaste añadirlo a reCAPTCHA
• El registro del dominio aún se está procesando (puede tardar hasta 30 minutos)

Solución: Abre tu consola de administración de Google reCAPTCHA y haz clic en el icono de configuración junto al registro de tu sitio. Revisa la sección de Dominios. Añade el dominio exacto donde aparece el error; incluye los subdominios de prueba, el dominio de Webflow y cualquier dominio personalizado. Guarda los cambios y espera de 5 a 10 minutos para que Google actualice sus servidores de validación..webflow.io

No incluyas ni barras diagonales al final. Solo el dominio base: o .https://yoursite.webflow.ioexample.com

La casilla de reCAPTCHA no aparece en el sitio publicado

El formulario se muestra correctamente, pero el elemento reCAPTCHA aparece como un espacio vacío o no aparece en absoluto.

Causas:

• La validación de reCAPTCHA no está activada en la configuración del sitio
• Estás probando en el modo de vista previa del Diseñador (reCAPTCHA solo funciona en sitios publicados)
• La caché del navegador muestra una versión antigua de la página
• Hay errores de JavaScript en la página que bloquean el script de reCAPTCHA

Solución: Primero, verifica que hayas activado la validación de reCAPTCHA en Configuración del sitio → Aplicaciones e integraciones. Si el interruptor está desactivado, el elemento no se mostrará aunque lo hayas añadido a tu formulario.

Segundo, asegúrate de estar viendo tu sitio publicado ( o tu dominio personalizado), no la vista previa del Diseñador. Haz clic en "Publicar" si aún no lo has hecho.yoursite.webflow.io

Tercero, actualiza la página forzando la recarga (Cmd+Shift+R en Mac, Ctrl+Shift+R en Windows) o prueba en una ventana de incógnito para evitar la caché.

Cuarto, abre la consola de desarrollador de tu navegador (F12) y busca errores de JavaScript. Busca mensajes de error en rojo que mencionen "recaptcha" o "grecaptcha". Si ves errores, comprueba si algún código personalizado en tu sitio entra en conflicto con el script de reCAPTCHA de Google.

Los formularios sin el elemento reCAPTCHA no se envían

Activaste la validación de reCAPTCHA en la configuración del sitio, pero olvidaste añadir el elemento a todos los formularios. Ahora, algunos formularios no aceptan envíos.

Solución: Esta es una configuración global para todo el sitio. Una vez activada, la validación se aplica a todos los formularios. Abre el Diseñador y visita cada página que contenga un formulario. Añade el elemento reCAPTCHA a cada uno. Publica. Prueba cada formulario individualmente para confirmar que todos funcionan.

Yo creo una hoja de cálculo con todos los formularios del sitio antes de activar la validación. Esta lista de verificación evita el momento de "¡oh, no, el registro al boletín no funciona!" tres días después del lanzamiento.

reCAPTCHA muestra un error en modo incógnito, pero funciona en el navegador normal

Esto indica un problema de caché. El navegador guardó una versión de la página de antes de que activaras reCAPTCHA, y el modo incógnito forzó la carga de recursos nuevos.

Solución: Borra la caché de tu navegador por completo. Cierra todas las ventanas del navegador. Vuelve a abrirlo y prueba de nuevo. Si ahora funciona, el problema eran los recursos almacenados en caché. Los visitantes de tu sitio no tendrán este problema porque ellos cargan la página desde cero.

Qué construir a continuación con los formularios de Webflow

reCAPTCHA se encarga del spam, pero los formularios protegidos son solo una parte del flujo de trabajo. Una vez que las respuestas están limpias, la siguiente pregunta es a dónde enviarlas.

Para los equipos que usan herramientas como HubSpot, Zapier o Airtable junto con los formularios de Webflow, la biblioteca de integraciones de Webflow cubre los patrones de conexión: cómo dirigir los envíos, activar automatizaciones y sincronizar datos sin necesidad de programación personalizada.

Para comportamientos de formulario más complejos, como flujos de varios pasos, lógica condicional o validación en tiempo real, los componentes de código de Webflow te permiten crear elementos reutilizables que van más allá de lo que los formularios nativos ofrecen por defecto.