Como acabar com o spam em formulários do Webflow

O reCAPTCHA, o bloqueio de bots e o filtro de spam do Webflow só funcionam em envios que o próprio Webflow recebe. Se seu formulário usa uma custom action para enviar a um backend de formulários, essas opções nunca veem o envio, então a proteção precisa acontecer no backend. Adicione um honeypot fora da tela no Designer, defina seus domínios e seu limite de taxa no backend e ative a verificação humana dele, que funciona com o envio normal do Webflow e sem código.

O que muda no Webflow

O Webflow tem suas próprias ferramentas contra spam: o reCAPTCHA v2, uma opção de bloqueio de bots que roda o Cloudflare Turnstile e um filtro de spam que lê o conteúdo de cada envio. Todas ficam do lado do Webflow, então só agem sobre envios que chegam ao Webflow. No momento em que você define o Send to de um formulário como uma custom action, o navegador envia direto para essa URL. O Webflow nunca vê o envio, então nenhuma das verificações dele roda, seja qual for a configuração.

As opções do próprio Webflow, depois da mudança

O guia do Webflow na documentação cobre como apontar o Form Block para o Ikiform. Os passos abaixo adicionam a proteção contra spam por cima.

Adicione o honeypot no Designer

O jeito rápido do Webflow de esconder um campo é Display: none. Alguns bots pulam campos escondidos assim, então coloque a armadilha num contêiner fora da tela. Leva um minuto e não exige plano pago:

• Dentro do formulário, adicione um Div Block e dê a ele uma classe como hp. No painel Style, defina Position como Absolute, Left como -10000px, Width e Height como 1px e Overflow como Hidden.
• Em Custom attributes do Div Block, adicione aria-hidden com valor true, para que leitores de tela pulem tudo o que está dentro dele.
• Coloque dentro do Div Block um Label com o texto Leave this empty e um Input. Defina o Name do Input como _gotcha e adicione os atributos personalizados tabindex = -1 e autocomplete = off.
• Não marque Required nele. Um campo obrigatório que ninguém vê bloqueia todo envio honesto.

Um _gotcha preenchido soma 5 à pontuação de spam do Ikiform, o suficiente para atingir sozinho o limite de 5. Você pode renomear o campo por formulário em Honeypot field se um modelo que você usa já tiver uma armadilha com outro nome.

Dê nomes aos campos pensando na pontuação

O Webflow nomeia cada campo a partir do rótulo, então você recebe Name, Email e Field 2. Renomeie-os nas configurações de cada campo para name, email e message. Os nomes importam para a pontuação de spam, além dos seus dados:

• Um link num campo de nome, como name, first_name ou subject, soma 3. Spammers costumam colocar a URL ali, e nenhuma pessoa real faz isso.
• Um endereço num domínio de e-mail descartável soma 2, lido de qualquer campo que contenha um endereço de e-mail.
• Três ou mais links no formulário somam 2, e uma frase de spam conhecida soma 2.

Ative a verificação humana

Nas configurações do formulário no Ikiform, defina Spam check como Ikiform. Nada muda no Webflow. Quando o formulário envia do jeito normal, o Ikiform responde com uma breve página Checking you're human (verificando se você é humano) em ikiform.com que roda o Cloudflare Turnstile e repassa os campos, e então o visitante cai na sua página de Redirect after submit. Sem conta na Cloudflare, sem chaves, sem código personalizado.

Se você adicionou o script da documentação para manter os blocos de sucesso e de erro do Webflow, ele envia com fetch, e um envio com fetch sem token recebe 403 challenge_required. Esta versão cuida disso: volta para um envio normal para a verificação humana e mostra o tempo de espera quando um visitante bate no limite de taxa.

<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() envia o formulário sem disparar o evento submit, então o fallback nunca volta para dentro do script.
• Cole em Page settings > Custom code > Before </body> tag, ou no código de rodapé do site para todos os formulários. Código personalizado exige um plano de site pago e só roda no site publicado.
• Ele só mexe em formulários cuja action começa com https://ikiform.com/f/, então os formulários que o Webflow ainda cuida ficam intactos.

Domínios permitidos e o limite de taxa

Em Allowed domains do formulário no Ikiform, adicione seu domínio personalizado e seu endereço de staging, como your-site.webflow.io. Nunca adicione webflow.io sozinho: todo site do Webflow bateria, inclusive os de outras pessoas. Envios de qualquer outro lugar são guardados como spam, ou recusados se você escolher Reject.

Para um formulário de contato, defina Rate limit como Strict, 2 a cada 10 minutos por visitante. Ninguém honesto escreve duas vezes em dez minutos. Um formulário de inscrição num dia de lançamento movimentado combina melhor com Relaxed, 20 por minuto por visitante. Todo formulário começa no Standard, 5 por minuto.

Confira se funciona

1. Publique no seu domínio de staging webflow.io. Custom actions só enviam a partir do site publicado.
2. Envie o formulário normalmente. Com a verificação humana ativa, você vê a página de verificação por um instante e depois sua página de agradecimento.
3. Inspecione o formulário publicado e confirme que o contêiner do honeypot tem aria-hidden e fica fora da tela.
4. Envie com o honeypot preenchido, _gotcha=bot. Ele ainda recebe uma resposta de sucesso, mas o envio é guardado como spam e não dispara e-mail nem webhook.
5. Abra Submissions no painel. O novo envio está lá com todos os campos que você mandou.
6. Nada chegou? Mude o filtro de status do painel para Spam. O spam recebe a mesma resposta de sucesso que um envio real.

Pegadinhas

• Spam com as opções do Webflow ligadas. Se o spam continua chegando depois de você ativar as ferramentas do Webflow, confira o Send to do formulário. Uma custom action contorna todas elas.
• reCAPTCHA esquecido no lugar. Com campos definidos no formulário do Ikiform, um g-recaptcha-response que sobrou falha com 422 validation_failed como campo desconhecido. Remova o elemento.
• Formulários duplicados. Copiar um formulário copia o campo honeypot, mas nem sempre os atributos personalizados dele. Confira tabindex e aria-hidden em cada cópia.
• Interactions no contêiner. Uma interaction do Webflow que anima todo Div Block do formulário pode trazer o honeypot para a vista. Exclua a classe dele.

Perguntas