Webflow のフォーム送信の上限：その中身と乗り越え方

無料の Starter サイトプランでは、Webflow が受け付けるフォームの送信はサイトごとに合計 50 件で、カウントはリセットされず、それ以降の送信は受け付けられません。有料のサイトプランは送信数無制限とされていますが、別のホストにエクスポートしたサイトではフォームは一切処理されません。Form Block にカスタムアクションを設定してフォームを Ikiform に送信させれば、Starter でも、有料プランでも、エクスポートしたコードでも動きます。

Webflow ならではの違い

Webflow の上限は以前より狭い範囲になっています。2026 年 10 月時点で、料金ページには無料の Starter サイトプランで 50 件のフォーム送信、Basic 以上のすべての有料サイトプランで無制限と記載されています。Webflow のヘルプセンターによると、Starter のカウントはリセットされない合計です。有料プランの月ごとの上限を挙げている古い記事は、その後変わった料金体系について書かれたものです。

では、実際に壁に当たるのは誰でしょうか。3 つのグループです。

• Starter のままのサイト。 サイトプランなしで webflow.io に公開した個人サイト、サイドプロジェクト、イベントページなどです。ボットがフォームを見つければ、50 件はすぐに埋まります。
• ステージングで制作するエージェンシー。 制作中のテスト送信はすべて、クライアントがホスティング料金を払う前から、同じ 50 件に数えられます。
• エクスポートしたサイト。 Webflow のコードエクスポートで HTML は手に入りますが、別の場所でホストしたサイトのフォームは Webflow によって一切処理されません。フォームの送信先がどこにも役立たない状態になります。

サイトが有料プランで、Webflow の受信箱と通知に満足しているなら、移す必要はありません。有料プランの人が移行する理由は別にあります。複数のサイトのフォームを 1 か所で管理したい、自分のツールに署名付きの Webhook を送りたい、調整できるスパムフィルタリングがほしい、Webflow から移ってもフォームが残るようにしたい、などです。

Designer でカスタムアクションを設定する

カスタムアクションを設定すると、訪問者のブラウザーは指定した URL に直接送信します。Webflow は送信を処理しないので、Webflow のフォーム送信には含まれません。Form Block のこの設定は Starter でも使え、この部分にカスタムコードは要りません。

1. Ikiform のダッシュボードでフォームを作り、エンドポイントをコピーします。
2. Designer で、Form Block そのものではなくその中の form 要素を選び、Settings を開きます。
3. Send to で Webflow 自身の送信先を外してカスタムアクションを選び、Action にエンドポイントを貼り付けて、Method を POST にします。
4. 各入力欄を選び、Name を小文字の ID にします：name、email、company、message。Webflow はラベルから name を付けるので、そのままだと Ikiform には Name や Field 2 が届きます。
5. フォームから reCAPTCHA の要素をすべて削除します。Ikiform はそれをチェックせず、トークンが余分なフィールドとして届いてしまいます。
6. _gotcha という名前の Input をもう 1 つ追加し、Display: none で隠して、カスタム属性 tabindex = -1 と autocomplete = off を追加します。これがハニーポットです。
7. your-site.webflow.io に公開します。カスタムアクションは Designer のキャンバスでは動きません。

https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx

送信後に訪問者に見えるもの

Webflow の成功ブロックとエラーブロックが表示されるのは、Webflow が送信を処理したときだけです。カスタムアクションでは、ブラウザーは代わりに Ikiform の応答に従います。次のどれかを選んでください。

Starter ではリダイレクトが正解です。コードが要らず、サイトのほかの部分と見た目もそろいます。有料プラン向けのスクリプトは Webflow のドキュメントにあります。fetch で送信するので Ikiform の人間確認は表示できません。使う場合は Spam check をオフのままにしてください。

エクスポートした Webflow サイト

コードをエクスポートして Netlify、Vercel、Cloudflare Pages、自分のサーバーでホストすると、フォームのマークアップは付いてきますが、Webflow のフォーム処理は付いてきません。フォームのあるエクスポートした HTML ファイルを開き、action と method を設定し、入力欄の名前を変え、リダイレクトとハニーポットを追加します。

<form id="wf-form-Contact" name="wf-form-Contact" data-name="Contact"
  method="post" action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" class="contact-form">
  <label for="name">Name</label>
  <input class="w-input" maxlength="256" name="name" id="name" type="text" required>
  <label for="email">Email</label>
  <input class="w-input" maxlength="256" name="email" id="email" type="email" required>
  <label for="company">Company</label>
  <input class="w-input" maxlength="256" name="company" id="company" type="text">
  <label for="message">Message</label>
  <textarea class="w-input" maxlength="5000" name="message" id="message" required></textarea>
  <input type="hidden" name="_redirect" value="https://studio.example/thanks">
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
  <input type="submit" class="w-button" value="Send">
</form>

• エクスポートした CSS がフォームのスタイルを当て続けるよう、w-input と w-button のクラスは残しておきます。
• _redirect は、送信が成功したあとにブラウザーをサンクスページへ移動させます。フォームの Allowed domains にある https: の URL でしか機能しません。
• 次のエクスポートで Webflow のデフォルトに上書きされないよう、Designer でもカスタムアクションとして同じ変更をしておきます。
• ホストから 1 回送信し、ブラウザーのネットワークパネルを見ます。送信は Webflow のアドレスではなく https://ikiform.com/f/ に向かい、リダイレクト付きの 303 が返るはずです。

Webflow の Allowed domains

フォームの Allowed domains に your-site.webflow.io と独自ドメインを追加します。一覧にあるドメインのサブドメインはすでに一致するので、example.com で www.example.com もカバーできます。webflow.io 単体は追加しないでください。すべての Webflow サイトがあなたのフォームに送信できてしまいます。エクスポートしたサイトなら、ホストしているドメインを追加します。

Webflow のファイルアップロードのフィールドは、料金ページでは Premium に記載されていますが、Ikiform には相当するものがありません。ファイルアップロードにはまだ対応していません。ファイル付きの送信には 422 files_not_supported が返ります。フォームからアップロードのフィールドを削除するか、そのフォームだけ Webflow に残してください。

Webflow で動作を確認する

1. フォームの Allowed domains に自分のサイトのドメインを追加し、開発中は localhost も追加します。空のままにすると、どこからの送信も受け付けます。
2. webflow.io に公開し、Designer ではなく公開したページからフォームを送信します。
3. サンクスページに移動すること、またはスクリプトを追加した場合は Webflow の成功ブロックが表示されることを確認します。
4. ダッシュボードで Submissions を開きます。送ったすべてのフィールドを含む新しい送信データがあります。
5. フィールド名を確認します。name、email、company、message になっていて、Field 2 やハニーポットがないはずです。
6. 通知の各受信者の受信トレイを確認します。それぞれにフィールド入りのメールが届き、フォームに email フィールドがあれば Reply で送信者に返信できます。
7. サイトの Webflow のフォーム送信を開き、テストがそこにないことを確認します。Webflow はもうそれを数えていません。

ハマりどころ

よくある質問