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

> Webflow の Form Block の送信先を Ikiform にし、非表示フィールドで登録に流入元のタグを付け、短いスクリプトですべてのフォームで Webflow の成功表示を残します。

公開日 2026-10-25 · https://ikiform.com/ja/guides/waitlist/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` のステージングドメインでテストしてください。

図: カスタム action の前後での Webflow のウェイトリストフォーム

1. 既定では、Form Block は Webflow に送信し、Webflow がプランの許容量の範囲で登録を保存して成功ブロックを表示します。
2. カスタム action にすると、同じ Form Block の送信先が Ikiform になります。
3. スクリプトが通常の送信を止め、リンクから ref フィールドを埋めて fetch で送信します。
4. Ikiform が登録を保存し、メールで通知し、Webhook を送ってから 201 を返します。
5. スクリプトがフォームを隠し、本人のメールアドレス付きで Webflow の成功ブロックを表示します。

デザインは Webflow に残ります。変わるのはデータの送り先だけです。

## 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 で公開したサンクスページを設定します。スクリプトが動かなかったときは、そこに移動します。

`フォーム内の Code Embed`:

```html
<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/` で始まるフォームにしか触れません。

`フッターコード`:

```html
<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` ヘッダーから待ち時間を表示します。

> スクリプトは `fetch` で送信するので、フォームのスパムチェックはオフのままにします。チェックがオンだと Ikiform は `403 challenge_required` を返し、エラーブロックが表示されます。チェックが必要ならスクリプトは使わないでください。通常の送信ならコードなしでチェックが実行されます。

### 許可ドメイン

| フォームが動く場所 | Allowed domains に追加するもの |
| --- | --- |
| ステージング | `your-site.webflow.io` |
| 独自ドメイン | `example.com`（`www.example.com` も含む） |
| Designer | 不要。そこからは送信されません |

`webflow.io` だけを追加してはいけません。すべての Webflow サイトが一致してしまいます。お問い合わせフォームでの同じ設定は [Webflow のドキュメントガイド](https://ikiform.com/ja/docs/guides/webflow.md)で、登録をメールツールに転送する方法は[メインガイド](https://ikiform.com/ja/guides/waitlist.md#confirm)で説明しています。

## 動作を確認する

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 も送られません。

## ハマりどころ

| 問題 | 対処法 |
| --- | --- |
| 送信後に `404 not_found` | **Method** が GET なので、ブラウザーがエンドポイントをリンクのように開いています。POST に設定して公開し直してください。 |
| Unknown field `Email` または `g-recaptcha-response` で `422` | 入力欄の **Name** が定義と一致していないか、reCAPTCHA の要素がフォームに残っています。入力欄の名前を `email` に変えるか、要素を削除してください。 |
| スクリプトが何もしない | Designer で確認している、サイトに有料プランがない、または **Action** にスペースが入っています。公開されたサイトでテストしてください。 |
| `403 challenge_required` | フォームのスパムチェックが **Ikiform** に設定されていて、`fetch` の送信にトークンがありませんでした。送信のたびに先に `@ikiform/sdk` の `challenge(formId)` でトークンを取得するか、チェックをオフにしてください。 |
| `403 origin_not_allowed` が返るか、すべての送信がスパムになる | ページのドメインがフォームの **Allowed domains** に入っていません。ドメインと、ローカルテスト用に `localhost` を追加してください。登録したドメインのサブドメインも許可されます。 |

## よくある質問

### Ikiform に送ったウェイトリスト登録は Webflow のフォーム送信数の上限に数えられますか？

いいえ。カスタム action ではブラウザーが Ikiform に直接送信するので、Webflow が送信を受け取ることはありません。Webflow のフォーム送信データには表示されず、プランの許容量も消費しません。

### Webflow のフォームに非表示フィールドを追加するには？

Webflow には非表示の入力要素がありません。フォームの中に Code Embed を置き、type が hidden の input を入れます。Code Embed には有料の Site プラン、または Core、Growth、Agency、Freelancer の Workspace が必要です。

### カスタム action でも Webflow の成功メッセージを残せますか？

はい、スクリプトを使えばできます。Webflow は自分で送信を処理したときにしか成功ブロックを表示しないので、上のサンプルのように、スクリプトが fetch で送信してブロックを自分で表示します。

### Ikiform はフォームを送信した人にメールを送れますか？

いいえ。Ikiform がメールを送るのはあなたとチームで、送信者には送らないので、自動返信や確認メールはありません。Webhook をメールツールに送り、確認メールはそこから送ってください。

## その他のガイド

- [新しい SaaS のウェイトリスト](https://ikiform.com/ja/guides/waitlist.md): 自分のランディングページにローンチ前のウェイトリストを作ります。フォーム、スパム対策、重複、確認メール、ローンチ日のきれいなエクスポートまで扱います。
- [Framer のウェイトリスト](https://ikiform.com/ja/guides/waitlist/framer.md): Framer でウェイトリストの登録を集める 2 つの方法。Ikiform への Webhook を使う Framer のフォームか、訪問者ごとの制限とスパムチェックが残るコードコンポーネントです。
- [Carrd のウェイトリスト](https://ikiform.com/ja/guides/waitlist/carrd.md): Carrd のページでウェイトリストの登録を集める方法。Pro Plus では UTM を記録する Send to URL フォーム、Pro Standard ではハニーポット付きの埋め込み HTML フォームを使います。
- [プレーンな HTML のウェイトリスト](https://ikiform.com/ja/guides/waitlist/html.md): ビルド不要でプレーンな HTML だけのウェイトリストページ。JavaScript がオフでも動き、読み込めばその場でお礼を表示し、必要なときはフォールバックします。
- [Product Hunt ローンチリスト](https://ikiform.com/ja/guides/waitlist/product-hunt.md): Product Hunt の数週間前からローンチリストを集め、登録をチャネルごとにタグ付けし、太平洋時間のリセットに合わせてローンチ日のメールを 2 回に分けて送ります。
- [選考付きのベータ登録](https://ikiform.com/ja/guides/waitlist/beta-signup.md): サーバーが必須を強制する選考質問付きのベータ応募フォームと、応募者を採点してリストから各コホートを選ぶスクリプトを紹介します。