Cómo frenar el spam en formularios de 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.

Los ajustes de Webflow, después del cambio

La guía de Webflow 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.

<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.

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