# Cómo frenar el spam en formularios de Webflow

> Protege un formulario de Webflow que envía a un backend de formularios, donde los ajustes antispam de Webflow nunca se ejecutan, con un honeypot fuera de pantalla y una verificación humana.

Publicado el 2026-10-25 · https://ikiform.com/es/guides/spam-protection/webflow

El reCAPTCHA, el bloqueo de bots y el filtro de spam de Webflow solo funcionan con los envíos que recibe el propio Webflow. Si tu formulario usa una action personalizada para enviar a un backend de formularios, esos ajustes nunca ven el envío, así que la protección tiene que ocurrir en el backend. Añade un honeypot fuera de pantalla en el Designer, configura tus dominios y el límite de frecuencia en el backend, y activa su verificación humana, que funciona con el envío normal de Webflow y sin código.

## Qué cambia en Webflow

Webflow tiene sus propias herramientas antispam: reCAPTCHA v2, un ajuste de bloqueo de bots que usa Cloudflare Turnstile y un filtro de spam que lee el contenido de cada envío. Todas viven del lado de Webflow, así que solo actúan sobre los envíos que llegan a Webflow. En cuanto pones el **Send to** de un formulario en una action personalizada, el navegador envía directamente a esa URL. Webflow nunca ve el envío, así que ninguna de sus comprobaciones se ejecuta, estén como estén configuradas.

Diagrama: Dónde se ejecutan las comprobaciones antispam de un formulario de Webflow, con y sin action personalizada

1. Cuando Webflow gestiona el formulario, el envío va a Webflow, que ejecuta reCAPTCHA, el bloqueo de bots y su filtro de spam antes de guardarlo.
2. Con una action personalizada, el navegador envía el mismo formulario directamente a Ikiform.
3. Las comprobaciones de Webflow nunca ven ese envío, sea cual sea su configuración.
4. Ikiform ejecuta el honeypot, la puntuación, el límite de frecuencia y la verificación humana, y luego guarda el envío como recibido o como spam.

Pasar un formulario a una action personalizada también traslada su protección antispam. Configúrala en el backend el mismo día.

## Los ajustes de Webflow, después del cambio

| Ajuste de Webflow | Con una action personalizada | Qué hacer |
| --- | --- | --- |
| Elemento y validación de reCAPTCHA | Nadie lo verifica. Su valor `g-recaptcha-response` llega como un campo extra | Quita el elemento. Desactiva la validación de reCAPTCHA solo si ningún formulario que aún gestione Webflow la necesita, porque el ajuste afecta a todos los formularios del sitio |
| Bloqueo de bots | No se aplica a los envíos que van a otro lugar | Déjalo para los formularios que aún gestione Webflow |
| Filtro de spam | No se aplica | Usa en su lugar la puntuación del contenido del backend |
| Límites de envíos y notificaciones de formularios | No se aplican | El backend guarda y envía los emails en su lugar |

La [guía de Webflow](https://ikiform.com/es/docs/guides/webflow.md) de la documentación explica cómo apuntar el Form Block a Ikiform. Los pasos de abajo añaden la protección antispam encima.

## Añade el honeypot en el Designer

La forma rápida de Webflow de ocultar un input es **Display: none**. Algunos bots se saltan los campos ocultos así, así que pon la trampa en un contenedor fuera de pantalla. Lleva un minuto y no necesita plan de pago:

- Dentro del formulario, añade un **Div Block** y dale una clase como `hp`. En el panel Style pon **Position** en **Absolute**, **Left** en `-10000px`, **Width** y **Height** en `1px`, y **Overflow** en **Hidden**.
- En los **Custom attributes** del Div Block, añade `aria-hidden` con el valor `true`, para que los lectores de pantalla se salten todo lo que contiene.
- Pon un **Label** con el texto **Leave this empty** y un **Input** dentro del Div Block. Pon el **Name** del Input en `_gotcha`, y añade los atributos personalizados `tabindex` = `-1` y `autocomplete` = `off`.
- No marques **Required** en él. Un campo obligatorio que nadie ve bloquea todos los envíos honestos.

Un `_gotcha` relleno suma 5 a la puntuación de spam de Ikiform, suficiente para alcanzar por sí solo el umbral de 5. Puedes renombrar el campo en cada formulario en **Honeypot field** si una plantilla que usas ya tiene una trampa con otro nombre.

## Nombra los campos pensando en la puntuación

Webflow nombra cada input según su etiqueta, así que obtienes `Name`, `Email` y `Field 2`. Renómbralos en los ajustes de cada input a `name`, `email` y `message`. Los nombres importan para la puntuación de spam además de para tus datos:

- Un enlace en un campo de nombre, como `name`, `first_name` o `subject`, suma 3. Los spammers suelen poner ahí su URL, y ninguna persona real lo hace.
- Una dirección de un dominio de email desechable suma 2, leída de cualquier campo que contenga una dirección de email.
- Tres o más enlaces en el formulario suman 2, y una frase de spam conocida suma 2.

## Activa la verificación humana

En los ajustes del formulario de Ikiform, pon **Spam check** en **Ikiform**. En Webflow no cambia nada. Cuando el formulario envía de la forma normal, Ikiform responde con una breve página **Checking you're human** en ikiform.com que ejecuta Cloudflare Turnstile y reenvía los campos, y luego el visitante llega a tu página de **Redirect after submit**. Sin cuenta de Cloudflare, sin claves y sin código personalizado.

Si añadiste el script de la documentación para conservar los bloques de éxito y de error de Webflow, este envía con `fetch`, y un envío con `fetch` sin token recibe `403 challenge_required`. Esta versión lo gestiona: recurre a un envío normal para la verificación humana, y muestra el tiempo de espera cuando un visitante alcanza el límite de frecuencia.

`Antes de la etiqueta </body>`:

```html
<script>
  document.querySelectorAll('form[action^="https://ikiform.com/f/"]').forEach((form) => {
    const wrapper = form.closest(".w-form");
    const done = wrapper?.querySelector(".w-form-done");
    const fail = wrapper?.querySelector(".w-form-fail");
    const button = form.querySelector('[type="submit"]');

    function showError(text) {
      const slot = fail?.querySelector("div") ?? fail;
      if (slot) slot.textContent = text;
      if (fail) fail.style.display = "block";
    }

    form.addEventListener("submit", async (event) => {
      event.preventDefault();
      const label = button?.value;
      if (button) {
        button.disabled = true;
        button.value = button.dataset.wait || label;
      }
      try {
        const response = await fetch(form.action, {
          method: "POST",
          headers: { Accept: "application/json" },
          body: new FormData(form),
        });
        const result = await response.json();
        if (result.ok) {
          form.style.display = "none";
          if (fail) fail.style.display = "none";
          if (done) done.style.display = "block";
          return;
        }
        if (result.error.code === "challenge_required") {
          form.submit();
          return;
        }
        showError(
          response.headers.has("Retry-After")
            ? `Too many messages. Try again in ${response.headers.get("Retry-After")} seconds.`
            : result.error.message,
        );
      } catch {
        form.submit();
      } finally {
        if (button) {
          button.disabled = false;
          button.value = label;
        }
      }
    });
  });
</script>
```

- `form.submit()` envía el formulario sin disparar el evento `submit`, así que el plan B nunca vuelve a entrar en el script.
- Pégalo en **Page settings** > **Custom code** > **Before </body> tag**, o en el código del footer del sitio para todos los formularios. El código personalizado necesita un plan de sitio de pago y solo se ejecuta en el sitio publicado.
- Solo toca los formularios cuyo action empieza por `https://ikiform.com/f/`, así que los formularios que aún gestiona Webflow quedan intactos.

## Dominios permitidos y el límite de frecuencia

En **Allowed domains** del formulario de Ikiform, añade tu dominio personalizado y tu dirección de staging, como `your-site.webflow.io`. Nunca añadas `webflow.io` a secas: coincidiría con todos los sitios de Webflow, incluidos los de otras personas. Los envíos desde cualquier otro lugar se guardan como spam, o se rechazan si eliges **Reject**.

Para un formulario de contacto, pon **Rate limit** en Strict, 2 cada 10 minutos por visitante. Nadie honesto escribe dos veces en diez minutos. A un formulario de registro en un día de lanzamiento con mucho tráfico le va mejor Relaxed, 20 por minuto por visitante. Todos los formularios empiezan en Standard, 5 por minuto.

> Un envío considerado spam recibe la misma respuesta de éxito que uno real, así que el bot no aprende nada. Se guarda con el estado `spam`, no envía email de notificación ni webhook, no cuenta para tu uso y se elimina a los 30 días. Cada lunes, un espacio de trabajo que haya bloqueado spam recibe un email de resumen con el total, los formularios con más actividad y los motivos principales.

## Comprueba que funciona

1. Publica en tu dominio de staging `webflow.io`. Las actions personalizadas solo envían desde el sitio publicado.
2. Envía el formulario con normalidad. Con la verificación humana activada, ves un momento la página de verificación y luego tu página de agradecimiento.
3. Inspecciona el formulario publicado y confirma que el contenedor del honeypot tiene `aria-hidden` y está fuera de pantalla.
4. Envía con el honeypot relleno, `_gotcha=bot`. Sigue recibiendo una respuesta de éxito, pero el envío se guarda como spam y no envía email ni webhook.
5. Abre **Submissions** en el panel. El nuevo envío está ahí con todos los campos que mandaste.
6. ¿No llegó nada? Cambia el filtro de estado del panel a **Spam**. El spam recibe la misma respuesta de éxito que un envío real.

## Trampas habituales

- **Spam con los ajustes de Webflow activados.** Si sigue llegando spam después de activar las herramientas de Webflow, revisa el **Send to** del formulario. Una action personalizada se las salta todas.
- **reCAPTCHA olvidado.** Con campos definidos en el formulario de Ikiform, un `g-recaptcha-response` sobrante falla con `422 validation_failed` como campo desconocido. Quita el elemento.
- **Formularios duplicados.** Copiar un formulario copia el input del honeypot, pero no siempre sus atributos personalizados. Revisa `tabindex` y `aria-hidden` en cada copia.
- **Interacciones en el contenedor.** Una interacción de Webflow que anima todos los Div Block del formulario puede hacer visible el honeypot. Excluye su clase.

## Preguntas

### ¿Por qué sigo recibiendo spam en mi formulario de Webflow?

Si el formulario usa una action personalizada, el reCAPTCHA, el bloqueo de bots y el filtro de spam de Webflow nunca ven el envío. La protección tiene que ocurrir donde envía el formulario. Si Webflow gestiona el formulario, prueba a activar el bloqueo de bots junto con el filtro de spam.

### ¿Cómo añado un honeypot a un formulario de Webflow?

Añade un Div Block dentro del formulario, sácalo de la pantalla con posicionamiento absoluto y dale aria-hidden true. Pon dentro un input llamado _gotcha con tabindex -1 y autocomplete off, y no lo hagas obligatorio.

### ¿Puedo usar reCAPTCHA en un formulario de Webflow que envía a Ikiform?

No. Ikiform no verifica tokens de reCAPTCHA. Quita el elemento y pon el Spam check del formulario de Ikiform en Ikiform, que ejecuta Cloudflare Turnstile sin claves y sin código en Webflow.

### ¿Necesito un plan de pago de Webflow para la protección antispam?

No para el honeypot ni para las comprobaciones de Ikiform, que funcionan con el formulario normal de Webflow. El código personalizado, que sirve para mantener el bloque de éxito de Webflow en la página, necesita un plan de sitio de pago.

## Más guías

- [Frena el spam en formularios de contacto](https://ikiform.com/es/guides/spam-protection.md): Frena el spam en tu formulario de contacto con capas que no cuestan nada a las personas reales: honeypot, tiempo, puntuación del contenido, límites de frecuencia y verificación humana solo donde haga falta.
- [Campo honeypot](https://ikiform.com/es/guides/spam-protection/honeypot.md): Añade a cualquier formulario un honeypot que atrape bots sin molestar a lectores de pantalla, teclado ni autocompletado, con la comprobación en el servidor para cada stack.
- [Alternativas a reCAPTCHA](https://ikiform.com/es/guides/spam-protection/recaptcha-alternatives.md): Compara alternativas a reCAPTCHA para formularios, de Turnstile y hCaptcha a proof-of-work o ningún captcha, y cambia con un ajuste pequeño y seguro.
- [Sitios estáticos](https://ikiform.com/es/guides/spam-protection/static-site.md): Frena el spam en el formulario de un sitio estático aunque no pueda guardar secretos ni contar envíos, con un partial de honeypot, un script seguro y comprobaciones en el servidor.
- [Cloudflare Turnstile](https://ikiform.com/es/guides/spam-protection/cloudflare-turnstile.md): Añade Cloudflare Turnstile a un formulario HTML básico: el widget, siteverify en el servidor, claves de prueba y una forma de usarlo sin claves ni servidor propios.
- [Sin captcha](https://ikiform.com/es/guides/spam-protection/without-captcha.md): Frena casi todo el spam de tus formularios sin ningún captcha: honeypot, hora de renderizado firmada, puntuación del contenido y límite de frecuencia, sumados en lugar de usarlos por separado.