Webflow サイトにウェイトリストフォームを追加する方法

Webflow でデザインした Form Block はそのまま使い、action を POST メソッドで Ikiform のエンドポイントに変えます。Code Embed で非表示の ref 入力欄とハニーポットを追加し、すべてのウェイトリストフォームを fetch で送信して、リンクから ref を埋め、本人のメールアドレス付きで Webflow 独自の成功ブロックを表示するスクリプトをサイト全体に 1 つ貼り付けます。

Webflow はページ作りが得意で、フォームはそこそこです。標準のフォーム処理は送信データを保存してメールで知らせてくれますが、保存できる件数がサイトプランで制限され、登録がどのキャンペーンから来たかのタグも付けられません。カスタム action なら、Designer を離れずに両方を解決できます。

Webflow ならではの違い

• カスタム action にするとフォームは Webflow の手を離れます。 ブラウザーが Ikiform に直接送信するので、Webflow が登録を見ることはありません。Webflow のフォーム送信データには入らず、Webflow からメールも送られず、プランのフォーム許容量も消費しません。
• Webflow の成功ブロックとエラーブロックは機能しなくなります。 これらは Webflow が送信を処理したときにだけ表示されます。スクリプトがなければ、訪問者は Ikiform のサンクスページか、Redirect after submit の URL に移動します。
• 非表示の入力要素がありません。 非表示フィールドとハニーポットはフォーム内の Code Embed に入れます。カスタムコードと同じく、有料のサイトプランが必要です。
• Designer では何も動きません。 カスタム action もスクリプトも公開されたサイトでしか動かないので、webflow.io のステージングドメインでテストしてください。

Form Block を設定する

1. フォームを選択して Settings を開きます。Send to の下の Webflow と Email notifications を削除し、Custom action を追加して https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx を入力し、POST を選んで保存します。
2. メールアドレスの入力欄を選択し、Name を email にします。Webflow はラベルから名前を付けるので、そのままだと Email や Email 2 になり、Ikiform はそれを別のフィールドとして扱います。
3. reCAPTCHA の要素があれば削除します。Ikiform はそれを検証せず、フィールド定義があると、その g-recaptcha-response の値は不明なフィールドとして拒否されます。
4. フォームの中のボタンの隣に Code Embed をドラッグし、下の 2 つの入力欄を貼り付けます。
5. Ikiform のフォーム設定の Redirect after submit に、Webflow で公開したサンクスページを設定します。スクリプトが動かなかったときは、そこに移動します。

<input type="hidden" name="ref" value="webflow">
<input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>

Ikiform の Fields タブで、email を必須に、ref を max_length 40 の任意の text フィールドにしたフィールド定義を追加します。消し忘れた Name 入力欄など、それ以外の名前で送られたものはすべて 422 になるので、最初のテストで名前の間違った入力欄に気づけます。

サイト全体のスクリプト

Site settings › Custom code › Footer code にこれを貼り付けると、ヒーローのフォーム、フッターのフォーム、あとで追加するページまでカバーできます。action が https://ikiform.com/f/ で始まるフォームにしか触れません。

<script>
  const params = new URLSearchParams(location.search);
  const ref = (params.get("ref") || params.get("utm_source") || "").toLowerCase().replace(/[^a-z0-9_-]/g, "").slice(0, 40);
  const key = crypto.randomUUID();

  document.querySelectorAll('form[action^="https://ikiform.com/f/"]').forEach((form, index) => {
    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"]');
    const source = form.querySelector('[name="ref"]');
    if (source && ref) source.value = ref;

    form.addEventListener("submit", async (event) => {
      event.preventDefault();
      const label = button.value;
      button.disabled = true;
      button.value = button.dataset.wait || "Joining";
      fail.style.display = "none";
      try {
        const response = await fetch(form.action, {
          method: "POST",
          headers: { Accept: "application/json", "Idempotency-Key": `${key}-${index}` },
          body: new FormData(form),
        });
        const result = await response.json();
        if (result.ok) {
          const email = form.querySelector('[name="email"]').value;
          const line = done.querySelector("div") ?? done;
          line.textContent = `You're on the list. We'll write to ${email} on launch day.`;
          form.style.display = "none";
          done.style.display = "block";
          return;
        }
        const wait = response.headers.get("Retry-After");
        const message = wait ? `Lots of signups right now. Try again in ${wait} seconds.` : result.error.fields?.email?.[0] ?? result.error.message;
        (fail.querySelector("div") ?? fail).textContent = message;
      } catch {
        (fail.querySelector("div") ?? fail).textContent = "Couldn't reach the server. Try again.";
      }
      fail.style.display = "block";
      button.disabled = false;
      button.value = label;
    });
  });
</script>

• リンクに ?ref= か ?utm_source= があると、ページ上の非表示の ref 入力欄がすべて埋まります。どちらもなければ埋め込みで設定した値が残るので、hero や footer のようにフォームごとに設定すれば、どちらがコンバージョンにつながるかがわかります。
• 冪等性キーはページの読み込みごとに 1 回作られ、フォームごとに接尾辞が付きます。ダブルクリックしても保存される登録は 1 件で、ページ上の別のフォームからの 2 件目の登録はきちんと数えられます。
• Webflow の成功ブロックに本人のメールアドレスを入れた 1 行が加わるので、打ち間違いに気づけます。gmial.com も、書き戻されると本人が気づきます。
• 送信中は、Designer で設定した Loading のテキストがボタンに表示されます。
• 429 のときは、一般的な失敗メッセージではなく、Ikiform の Retry-After ヘッダーから待ち時間を表示します。

許可ドメイン

webflow.io だけを追加してはいけません。すべての Webflow サイトが一致してしまいます。お問い合わせフォームでの同じ設定は Webflow のドキュメントガイドで、登録をメールツールに転送する方法はメインガイドで説明しています。

動作を確認する

1. webflow.io のステージングドメインに公開します。
2. フォームの Allowed domains に、自分のサイトのドメインと、開発中は localhost を追加します。空にしておくと、どこからの送信も受け付けます。
3. ?ref=test 付きでページを開いて登録します。Webflow の成功ブロックにメールアドレスが表示され、Ikiform の送信データでは ref が test になっています。
4. クエリ文字列なしで、フッターのフォームからもう一度登録します。ref にはそのフォームの埋め込みの値が入ります。
5. JavaScript をオフにして送信します。Webflow のサンクスページに移動します。
6. 通知の受信者それぞれの受信箱を確認します。各自にフィールドを載せたメールが届き、フォームに email フィールドがあれば Reply は送信者宛てになります。
7. ハニーポットに値を入れて _gotcha=bot で送信します。成功の応答は返りますが、送信データはスパムとして保存され、メールも Webhook も送られません。

ハマりどころ

よくある質問