Webflow のコンタクトフォームはデザインが洗練されていますが、標準機能ではフォームの送信データをメールで通知するだけです。データベースへの保存、CRM との連携、カスタムロジックの実行といった機能は備わっていません。メール通知以上のことが必要な場合は、フォームの送信データを外部サービス経由でルーティングする必要があります。ただし、バックエンドのコードを一切書かずに実現できるので安心してください。
目次
Webflow の標準機能でできること
Webflow の組み込みフォームハンドラーには、サイトオーナーへのメール通知、送信完了メッセージの表示、そして有料プランでのダッシュボードへの送信ログ記録という3つの機能があります。小規模サイトのシンプルなコンタクトフォームならこれで十分ですが、以下のような要件が出てくるとすぐに限界が見えてきます。
- フォーム送信者への自動返信メール
- 特定のチームの受信トレイや CRM への転送
- 条件分岐ロジック（例: 問い合わせ内容に応じたルーティング）
- Webflow 標準のハニーポット以上のスパムフィルタリング
- タイムスタンプと再試行を含む信頼性の高い配信記録
これらはいずれも標準機能では対応できません。外部の仕組みが必要になりますが、現実的な方法は3つあります。
ネイティブ連携 - Zapier と Make
Webflow は Zapier および Make（旧 Integromat）と直接連携できます。新しいフォーム送信が届くとトリガーが発火し、Google スプレッドシートへの行追加、HubSpot への連絡先作成、Slack へのメッセージ送信など、あらゆるアクションを連鎖させることができます。
ノーコードで実現できるため、デザイナーが最初に手を伸ばすことが多い方法です。設定手順は次のとおりです。
- Webflow で プロジェクト設定 > 連携 を開き、Zapier アカウントを接続します。
- Zapier で新しい Zap を作成し、トリガーとして Webflow - New Form Submission を選択します。
- 対象のフォームを名前で選択します。
- アクションステップ（Gmail、Slack、Airtable など）を追加します。
- 実際の送信でテストし、Zap を有効にします。
Make は複雑なワークフローに対してコストを抑えられますが、どちらのプラットフォームも依存関係が生まれるという問題があります。Zapier や Make がダウンしたり、アカウントが上限に達したりすると、送信データが無音で失敗したりキューに溜まったりします。
Webflow の webhook を使う
Webflow の webhook はより直接的な方法です。フォームが送信されるたびに、Webflow が指定した URL に HTTP POST を送信します。受信 endpoint を自分でコントロールできるため、payload を使って何でも処理できます。
設定手順は以下のとおりです。
- Webflow の プロジェクト設定 > 連携 > Webhook を開きます。
- Webhook を追加 をクリックし、トリガーとして フォーム送信 を選択します。
- 受信サービスの endpoint URL を貼り付けます。
- 保存して実際の送信でテストします。
Webflow が送信する payload は、すべてのフィールド値、フォーム名、サイトのメタデータを含む JSON オブジェクトです。典型的な payload は次のようになります。
{
"name": "Contact Form",
"site": "my-webflow-site",
"data": {
"Name": "Jane Smith",
"Email": "[email protected]",
"Message": "Hi, I'd like a quote."
},
"submittedAt": "2024-11-15T10:22:00Z"
}ただし、この webhook を受信する仕組みが別途必要です。選択肢としては、小さな Cloudflare Worker 、Pipedream のワークフロー、あるいは専用のフォームバックエンドなどがあります。独自の受信処理を書くことは、この記事が避けようとしている「カスタムバックエンド」の問題そのものです。そこで、フォームからメールへ転送するサービスが最もシンプルな解決策になります。
フォームの endpoint をフォームサービスに差し替える
Webflow のフォームハンドラーを使わずに、フォームの
action
属性をサードパーティのフォームサービスに向ける方法もあります。サービス側が POST を受信し、バリデーション、スパムフィルタリングを行い、結果をメールで送信します。自分側にバックエンドは一切不要です。
Webflow での設定手順は次のとおりです。
- Webflow デザイナーでフォーム要素を選択します。
-
フォーム設定
パネルの
アクション
フィールドに、フォームサービスの endpoint URL を設定します（例:
https://sendform.net/!your-form-id）。 - メソッド を POST に設定します。
-
各入力フィールドに
name属性があることを確認します（Webflow はデフォルトで設定済みです）。 - サイトを公開して送信テストを行います。
この方法では Webflow のフォームハンドラーを完全に迂回します。送信データは訪問者のブラウザからフォームサービスに直接送られます。メールはサービス側で処理され、再試行やスパム対策もサービスが担当します。Webflow は純粋に UI レイヤーとして機能します。
この方法は静的サイトやノーコードサイト全般で使えます。GitHub Pages や Cloudflare Pages でホスティングしている場合も同じアプローチが使えます。詳しくは コンタクトフォーム付きで静的サイトを無料ホスティングする方法 の記事をご覧ください。
Sendform と他サービスの比較
Webflow と連携できるフォームサービスはいくつかあります。コンタクトフォームの設定において実際に重要な項目で主要な選択肢を比較してみましょう。
| サービス | 無料プラン | 設定の複雑さ | カスタムリダイレクト | スパムフィルタリング | GDPR 対応 |
|---|---|---|---|---|---|
| Sendform | あり | URL を貼り付けるだけ | あり | あり | あり |
| Formspree | 月50件まで | 登録 + URL 貼り付け | 有料のみ | 基本のみ（reCAPTCHA は有料） | 一部対応 |
| Netlify Forms | 月100件まで | Netlify ホスティングが必要 | あり | あり | 一部対応 |
| Zapier（webhook 経由） | 月100タスクまで | 複数ステップのワークフロー | 手動設定が必要 | 組み込みなし | Zap の内容による |
| Basin | 月100件まで | 登録 + URL 貼り付け | あり | あり | 一部対応 |
Sendform が表に収まりきらない具体的な理由でも際立っている点があります。
- 摩擦ゼロのセットアップ: アカウント登録なしでフォームの endpoint URL を取得できます。Webflow のアクションフィールドに貼り付けるだけで完了です。
- デフォルトで送信データを保存しない: Sendform はデータをメールで転送するだけで、自社サーバーに保持しません。これは GDPR コンプライアンスの観点から正しいデフォルト設定です。Formspree などの競合サービスはすべての送信データをダッシュボードに保存するため、ユーザーのデータがサードパーティのサーバーに無期限に残り続けます。
- 開発者にも、ノーコードユーザーにも使いやすい: Zapier と違ってメンテナンスが必要なワークフローがなく、Netlify Forms と違って特定のホスティングプロバイダーに縛られません。Webflow でも GitHub Pages でも、どのホストでも動作します。
- 正直な無料プラン: 「リダイレクトを使うには有料プランへ」といった、他サービスがよく使うアップグレードへの誘導がありません。
どの方法を選ぶべきか
最適な方法は、フォーム送信後に何をしたいかによって変わります。
- メール通知だけでよい場合: Sendform を使いましょう。Webflow のアクションフィールドに endpoint URL を貼り付けるだけで、2分で完了します。
- メール + CRM やスプレッドシートとの同期が必要な場合: メール配信には Sendform を使い、受信メールをトリガーにした Zapier ステップを追加するか、プランによっては Sendform の webhook 出力を活用しましょう。
- 複雑な複数ステップの自動化が必要な場合: Webflow の webhook を Make や Zapier に接続する方法が適していますが、有料プランの費用を見込んでおきましょう。
- すでに Netlify を使っている場合: シンプルなケースなら Netlify Forms で問題ありませんが、アクティブなサイトでは月100件の上限にすぐ達してしまいます。
名前、メールアドレス、メッセージを受け取って確実に受信トレイに届けるという、大多数の Webflow コンタクトフォームのニーズには、Sendform が最速かつ最もシンプルな選択肢です。バックエンド不要、月間タスク数の監視も不要、そして忘れた頃にサードパーティのダッシュボードに残り続ける送信データの心配もありません。
バックエンドを書かずに Webflow のコンタクトフォームを処理する
Sendform は Webflow のアクションフィールドにそのまま貼り付けられる既製の endpoint を提供します。フォームの送信データはスパムフィルタリングと GDPR 対応のデフォルト設定付きで、すぐに受信トレイに届きます。
Sendform を無料で試す →
Webflow のフォームアクションを外部の endpoint に向けると、Webflow 組み込みの送信完了状態は自動的にはトリガーされなくなります。多くのフォームサービスは、指定したサンクスページへリダイレクトすることでこれに対応しています。Sendform ではフォーム設定でリダイレクト URL を指定できるため、送信後に独自の確認ページに誘導できます。あるいは、JavaScript でフォームの送信イベントをインターセプトし、fetch() で POST を送ってから Webflow の送信完了状態を手動で表示する方法もあります。
はい。プロジェクト設定 > 連携 > Webhook から、新しいフォーム送信のたびに発火する webhook を追加できます。Webflow は指定した URL に、すべてのフィールド値、フォーム名、タイムスタンプを含む JSON の POST を送信します。これを受信するには、サーバーレス関数、Pipedream のワークフロー、または webhook を受け付けるフォームサービスが必要です。webhook 機能は Webflow の CMS プランおよびビジネスプランで利用できます。
Zapier は Webflow と送信先（メール、CRM など）の間に入り、ワークフローレイヤーを追加します。複数ステップの自動化には強力ですが、月100タスクを超えると費用が発生し、障害点が増えます。Sendform は直接的な form endpoint で、送信データはブラウザから Sendform に直接送られ、すぐにメールが届きます。メンテナンスが必要なワークフローも、タスクカウンターも、Zap が無音で壊れるリスクもありません。シンプルなコンタクトフォームなら、Sendform の方がセットアップが速く、日々の運用も安定しています。
サービスによって異なります。送信データを自社データベースに保存するサービス（Formspree、Basin、Netlify Forms）はデータ処理者として機能するため、データ処理契約（DPA）の締結とプライバシーポリシーへの記載が必要です。Sendform はデフォルトでデータを転送するのみで保持しない設計になっており、コンプライアンス対応の負担を大幅に軽減できます。どのサービスを使う場合でも、コンタクトフォームのデータがどのように処理・送信されるかをプライバシーポリシーに明記することをお勧めします。
はい、いくつかの方法があります。Sendform を含む多くのフォームサービスは、サービス側で組み込みのスパムフィルタリングを提供しています。ハニーポットフィールド（ボットは入力するが実際のユーザーは入力しない非表示の input フィールド）を追加する方法もあり、そのフィールドに値がある送信を受信サービスが無視します。トラフィックの多いフォームには、reCAPTCHA v3 や hCaptcha に対応したサービスを使うことでさらなる防御層を追加できます。Webflow 独自のスパムフィルターは Webflow のネイティブフォームハンドラーを使う場合にのみ機能するため、外部の endpoint に切り替えた場合はサービス側のスパム対策ツールを活用することになります。
いいえ。フォームの Action 属性を外部 URL に向けることは、公開済みページの HTML 属性を変更するだけなので、無料のスタータープランを含むすべての Webflow プランで動作します。無料プランでの制限は、Webflow 自身のフォーム処理（ダッシュボードへの保存、Webflow 経由のメール通知）にサイトプランが必要という点です。Sendform のような外部サービスを使えばその制限を完全に回避できます。Webflow のプランレベルに関係なく、フォームは Sendform のサーバーに POST を送信するだけです。