Webflow フォームのスパムを止める方法

Webflow の reCAPTCHA、ボットブロック、スパムフィルターは、Webflow 自身が受け取る送信にしか働きません。フォームがカスタム action でフォームバックエンドに送信している場合、これらの設定は送信を見ないので、保護はバックエンドで行う必要があります。Designer で画面外のハニーポットを追加し、バックエンドでドメインとレート制限を設定し、人間確認をオンにします。人間確認は通常の Webflow の送信でコードなしに動きます。

Webflow ならではの違い

Webflow には独自のスパム対策ツールがあります。reCAPTCHA v2、Cloudflare Turnstile を使うボットブロックの設定、各送信の内容を読むスパムフィルターです。どれも Webflow 側で動くので、Webflow に届いた送信にしか作用しません。フォームの Send to をカスタム action にした時点で、ブラウザーはその URL に直接送信します。Webflow は送信を見ないので、設定がどうであれ、そのチェックは 1 つも実行されません。

切り替え後の Webflow 自身の設定

ドキュメントの Webflow ガイドでは、Form Block の送信先を Ikiform にする方法を説明しています。以下の手順では、その上にスパム対策を加えます。

Designer でハニーポットを追加する

Webflow で入力欄を隠す手っ取り早い方法は Display: none ですが、そうして隠したフィールドを飛ばすボットもいます。代わりに、罠を画面外のラッパーに入れてください。1 分で済み、有料プランも要りません:

• フォームの中に Div Block を追加し、hp などのクラスを付けます。Style パネルで Position を Absolute、Left を -10000px、Width と Height を 1px、Overflow を Hidden に設定します。
• Div Block の Custom attributes に、値を true にした aria-hidden を追加し、スクリーンリーダーが中身をすべて飛ばすようにします。
• Div Block の中に、テキストが Leave this empty の Label と Input を置きます。Input の Name を _gotcha にし、カスタム属性 tabindex = -1 と autocomplete = off を追加します。
• Required にはチェックを入れないでください。誰にも見えない必須フィールドは、正直な送信をすべてブロックしてしまいます。

_gotcha が埋められていると Ikiform のスパムスコアに 5 が加算され、それだけでしきい値の 5 に達します。使っているテンプレートに別の名前の罠がすでにある場合は、Honeypot field でフォームごとにフィールド名を変えられます。

スコア判定のためにフィールドに名前を付ける

Webflow は各入力欄にラベルにちなんだ名前を付けるので、Name、Email、Field 2 のようになります。各入力欄の設定で name、email、message に変更してください。名前はデータだけでなく、スパムのスコア判定にも影響します:

• name、first_name、subject などの名前系フィールドにリンクがあると 3 が加算されます。スパマーはよくそこに URL を入れますが、本物の人はまず入れません。
• 使い捨てメールのドメインのアドレスは 2 が加算されます。メールアドレスを含むどのフィールドからでも判定されます。
• フォーム全体でリンクが 3 つ以上あると 2、既知のスパムフレーズがあると 2 が加算されます。

人間確認をオンにする

Ikiform のフォーム設定で Spam check を Ikiform にします。Webflow 側は何も変わりません。フォームが通常の方法で送信されると、Ikiform は ikiform.com 上の短い Checking you're human ページで応答し、Cloudflare Turnstile を実行してフィールドを送り届けた後、訪問者を Redirect after submit のページに移動させます。Cloudflare のアカウントもキーもカスタムコードも要りません。

Webflow の成功・エラーのブロックを使い続けるためにドキュメントのスクリプトを追加している場合、そのスクリプトは fetch で送信し、トークンなしの fetch の送信には 403 challenge_required が返ります。この版はそれに対応しています。人間確認のために通常の送信にフォールバックし、訪問者がレート制限に達したら待ち時間を表示します。

<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() は submit イベントを発火させずにフォームを送信するので、フォールバックがスクリプトに戻ってループすることはありません。
• Page settings > Custom code > Before </body> tag に貼り付けるか、すべてのフォームに適用するならサイトのフッターコードに貼り付けます。カスタムコードには有料のサイトプランが必要で、公開されたサイトでしか動きません。
• action が https://ikiform.com/f/ で始まるフォームだけを対象にするので、Webflow が処理するフォームには影響しません。

許可ドメインとレート制限

Ikiform のフォームの Allowed domains に、カスタムドメインと your-site.webflow.io のようなステージング用のアドレスを追加します。webflow.io だけを追加してはいけません。他人のものも含め、すべての Webflow サイトが一致してしまいます。それ以外の場所からの送信はスパムとして保存されるか、Reject を選んだ場合は拒否されます。

お問い合わせフォームなら、Rate limit を Strict（訪問者ごとに 10 分あたり 2 件）にします。正直な人が 10 分に 2 回書くことはありません。ローンチ当日の混み合う登録フォームには Relaxed（訪問者ごとに 1 分あたり 20 件）が向いています。どのフォームも最初は Standard（1 分あたり 5 件）です。

動作を確認する

1. webflow.io のステージング用ドメインに公開します。カスタム action は公開されたサイトからしか送信されません。
2. フォームを通常どおり送信します。人間確認がオンなら、確認ページが一瞬表示され、その後サンクスページに移動します。
3. 公開されたフォームを検証ツールで調べ、ハニーポットのラッパーに aria-hidden があり、画面外にあることを確認します。
4. ハニーポットを _gotcha=bot と埋めて送信します。成功の応答は返りますが、送信データはスパムとして保存され、メールも Webhook も送られません。
5. ダッシュボードで Submissions を開きます。送ったすべてのフィールドを持つ新しい送信データがあります。
6. 何も届きませんか？ダッシュボードのステータスフィルターを Spam に切り替えてください。スパムにも本物の送信データと同じ成功の応答が返ります。

ハマりどころ

• Webflow の設定がオンなのにスパムが届く。 Webflow のツールをオンにした後もスパムが届き続けるなら、フォームの Send to を確認してください。カスタム action はそれらをすべて迂回します。
• reCAPTCHA が残っている。 Ikiform のフォームでフィールドを定義している場合、残った g-recaptcha-response は未知のフィールドとして 422 validation_failed で失敗します。要素を削除してください。
• 複製したフォーム。 フォームをコピーするとハニーポットの入力欄はコピーされますが、カスタム属性まではコピーされないことがあります。コピーごとに tabindex と aria-hidden を確認してください。
• ラッパーへのインタラクション。 フォーム内のすべての Div Block をアニメーションさせる Webflow のインタラクションは、ハニーポットを画面内に動かしてしまうことがあります。そのクラスを除外してください。

よくある質問