MakeでWebflowフォームとHubSpotを連携するには?

クイックアンサー:標準アプリを使わなくても、Makeのシナリオを組めばWebflowのフォームとHubSpotを連携できます。シナリオでは、Webflowの新しいフォーム送信を監視し、各フィールドをHubSpotのコンタクトプロパティにマッピングし、重複を処理し、適切なライフサイクルステージを自動で設定します。標準の連携よりもクリーンなデータが得られ、より細かく制御できます。

Webflow標準のHubSpotアプリは、基本的な設定であれば問題なく使えます。しかし、名前とメールアドレス以外のフィールドマッピング、重複排除のロジック、ライフサイクルステージの自動設定が必要になると、すぐに限界に突き当たります。

その差を埋めるのがMake(旧Integromat)です。Webflowのフォーム送信をMakeのシナリオ経由にすることで、Webサイトとビジネス側のCRMの間に、自由に設定できるパイプラインを構築できます。コードは不要で、連携先でデータ品質に悩まされることもありません。

このチュートリアルでは、MakeでWebflowとHubSpotを接続する、フィールドを正しくマッピングする、重複を除外する、送信されたフォームに応じてライフサイクルステージを設定するという手順を、具体的に説明します。

始める前に必要なもの

シナリオを作成する前に、次のものを用意してください。

フォームが少なくとも1つ公開されているWebflowサイト
HubSpotアカウント(無料プランを含め、どのプランでも可)
Makeアカウント(このシナリオなら無料プランで対応可能)
3つのプラットフォームすべての管理者権限

ステップ1:MakeでWebflowのトリガーを設定する

Webflowのトリガーは、新しいフォーム送信を監視し、送信があるたびにシナリオを起動します。

Makeを開き、Create a new scenarioをクリックします
Webflowを検索し、Watch Form Submissionsモジュールを選択します
Addをクリックして、新しいWebflow接続を作成します
WebflowでSite Settings > Integrations > API Accessに移動し、新しいAPIトークンを生成します
そのトークンをMakeに貼り付けて、接続を保存します
ドロップダウンからサイトを選択します
監視したいフォームを選択します(フォームごとに異なるロジックが必要な場合は、別々のシナリオを作成できます)
リアルタイム処理にするため、limitを1に設定します

OKをクリックし、テスト送信でモジュールを1回実行して、Makeにデータ構造を取得させます。次のステップに進む前に、ダミーデータでWebflowのフォームを送信してください。

ステップ2:まずHubSpotで既存のコンタクトを検索する

この種の連携で最もよくある間違いは、重複排除を省略することです。重複排除をしないと、フォームが送信されるたびに新しいコンタクトレコードが作成され、数週間でHubSpotのデータベースが重複だらけになります。

何かを作成する前に、HubSpotのSearch for a Contactモジュールを追加します。

Webflowトリガーの後に新しいモジュールを追加します
HubSpot CRMを検索し、Search for Contactsを選択します
OAuthでHubSpotアカウントを接続します(Makeが案内してくれます)
フィルターを、Webflowのフォーム送信に含まれるメールアドレスの値(ステップ1の出力からマッピング)を使ってメールアドレスで検索するように設定します
結果の上限を1に設定します

このモジュールは、該当するコンタクトがあればそれを返し、一致するものがなければ空の結果を返します。次のステップでは、この結果に応じて処理を分岐させます。

ステップ3:ルーターを追加して新規コンタクトと既存コンタクトを振り分ける

Routerモジュールは、シナリオを2つのパスに分けます。1つは新規コンタクト用、もう1つは既存コンタクト用です。

検索ステップの後にRouterモジュールを追加します
パス1(新規コンタクト):「Number of results equals 0」という条件のフィルターを追加します
パス2(既存コンタクト):「Number of results greater than 0」という条件のフィルターを追加します

この構成にすると、フォームの空欄でコンタクトの既存データを誤って上書きすることも、重複を作成してしまうこともありません。

ステップ4:フィールドをマッピングしてHubSpotのコンタクトを作成する(パス1)

新規コンタクトのパスに、HubSpotのCreate a Contactモジュールを追加します。

多くの連携が失敗するのはフィールドマッピングです。Webflowのフィールド名とHubSpotのプロパティ名は、初期状態では一致しないことがほとんどです。正しく対応する方法は次のとおりです。

標準的なフィールドマッピング:

Webflowのフィールド	HubSpotのプロパティ
名前	firstname + lastname(必要に応じて分割)
メールアドレス	email
電話番号	phone
企業	company
メッセージ	message(カスタムプロパティ)

氏名フィールドの分割:

Webflowのフォームに「Name」フィールドが1つしかない場合は、Makeの組み込みテキスト関数で分割します。

名: {{1.name | split: " " | first}}
姓: {{1.name | split: " " | last}}

リードソースのマッピング:

どこから来たコンタクトかがわかるように、フォーム名またはページURLを必ずHubSpotのプロパティとして渡してください。Webflowの送信データの pageUrl 値を、次のHubSpotのカスタムプロパティにマッピングします: lead_source_url.

ステップ5:既存のコンタクトを更新する(パス2)

既存コンタクトのパスに、HubSpotのUpdate a Contactモジュールを追加します。

検索モジュールの出力からContact IDをマッピングします(これにより、HubSpotはどのレコードを更新するかを判断します)
再送信時に更新すべきフィールドだけをマッピングします(次のようなフィールドの上書きは避けてください: createdate または original_source)
安全な初期設定:更新するのは last_form_submitted および last_activity_date のみにします。ユースケース上、それ以上が必要な場合は除きます

これにより、既存のコンタクトレコードをクリーンに保ちながら、新しいやり取りも記録できます。

ステップ6:ライフサイクルステージを自動で設定する

ライフサイクルステージはHubSpotで最も価値のあるプロパティの1つですが、空欄のままになりがちな項目でもあります。シナリオに組み込んで、すべてのコンタクトが適切なステージ設定済みで登録されるようにしましょう。後でファネルのパフォーマンスを見直す際には、ステージの進捗をより広範なB2B SaaSのベンチマークと比較するのも有効です。

このロジックを、作成パスと更新パスの両方に追加します。

オプションA:フォームごとに固定のライフサイクルステージを設定する

「Request a Demo」フォームから常にSales Qualified Leadが生まれるのであれば、そのシナリオのモジュールで lifecyclestage を次のように固定で指定します: salesqualifiedlead そのシナリオのモジュール内で設定します。

オプションB:フォーム名に基づく条件分岐を使う

1つのシナリオで複数のフォームを処理する場合は、HubSpotモジュールの前にSet Variableモジュールを追加し、条件式を使います。

If form name = "Request a Demo" → lifecyclestage = salesqualifiedlead
If form name = "Download Guide" → lifecyclestage = lead
If form name = "Contact Us" → lifecyclestage = marketingqualifiedlead

その変数を、次のフィールドにマッピングします: lifecyclestage (HubSpot側のフィールド)。

HubSpotのライフサイクルステージの値(この文字列をそのまま使用してください):

subscriber
lead
marketingqualifiedlead
salesqualifiedlead
opportunity
customer

ステップ7:エラー処理を追加して取りこぼしを防ぐ

Makeのシナリオは、初期設定では失敗しても通知されません。HubSpot APIのタイムアウトや不正なフィールドがあると、送信データは警告なしに破棄されます。

失敗を検知するため、基本的なエラーハンドラーを追加します。

HubSpotのCreate/Updateモジュールを右クリックします
Add error handlerを選択します
Resumeを選び、失敗時に通知するSend an EmailまたはSlackモジュールに接続します
必要に応じて手動でコンタクトを追加できるように、通知に送信された生データを含めます

設定にかかる時間は5分ほどで、シナリオが止まったときのデータ損失を防げます。

ステップ8:シナリオ全体をテストする

シナリオを有効にする前に、エンドツーエンドの完全なテストを実施します。

MakeでRun onceをクリックします
新しいメールアドレスでWebflowのフォームを送信します
HubSpotにコンタクトが登録され、フィールドとライフサイクルステージが正しいことを確認します
同じメールアドレスで、もう一度同じフォームを送信します
HubSpotのコンタクトが2件ではなく1件で、該当するフィールドが更新されていることを確認します

重複排除のパスが動作しない場合は、検索モジュールがWebflowの出力にある正しいメールフィールドでフィルターしているか確認してください。フィールド名は、Webflowでのフォームのラベル付けによって異なります。

ステップ9:シナリオを有効化してスケジュールを設定する

テストに問題がなければ、次の設定を行います。

シナリオをActiveに切り替えます
スケジュール間隔を15分ごとに設定します(Makeの無料プラン)。有料プランの場合は即時トリガーも使えます
最初の24時間はScenario Historyタブを確認し、想定外のケースがないか監視します

送信数の多いフォームの場合は、MakeのCoreプランにアップグレードすると、即時トリガーとより高いオペレーション上限が利用できます。

Webflow標準のHubSpotアプリではなくMakeを使う理由

Webflow標準のHubSpot連携は、基本的なフィールドの受け渡しに対応しています。次のような場合は、Makeのほうが適しています。

レコード作成前の重複排除ロジック
フォームの種類に応じたライフサイクルステージの条件付き設定
複数ステップのワークフロー(例:コンタクトの作成と併せて、Slackへの通知やHubSpotの取引作成も行う)
標準以外のプロパティに対応するカスタムフィールドマッピング
フォールバック通知を備えたエラー処理

複数のフォームを運用しているチームや、既存データのあるCRMを管理しているチームにとって、Makeは標準アプリにはない制御力をもたらします。それらのフォームが重要なコンバージョンページにある場合は、SaaSのランディングページのベストプラクティスと組み合わせて連携を強化すると、さらに効果的です。

よくある質問

Q: 1つのMakeシナリオで、複数のWebflowフォームをHubSpotに連携できますか?

A: はい、可能です。Routerモジュールを使い、Webflowトリガーの出力にあるフォーム名に基づいてシナリオを分岐させます。各分岐に、それぞれ専用のフィールドマッピングとライフサイクルステージのロジックを設定できます。メンテナンスを分かりやすくしたい場合は、フォームごとに別々のシナリオを作成する方法もあります。

Q: Webflow標準のフォームだけが対象ですか?それとも埋め込みフォームでも使えますか?

A: このチュートリアルでは、APIトリガー経由でWebflow標準のフォームを使います。Webflow標準のフォームビルダーで作成したフォームであれば、どれでも利用できます。WebflowにHubSpotの埋め込みフォームを直接設置している場合、その送信はそのままHubSpotに届くため、間にMakeを挟む必要はありません。

Q: フォーム送信時にHubSpotがダウンしていたらどうなりますか?

A: Makeは、エラーハンドラーの設定に基づいて、失敗した処理を自動的に再試行します。ステップ7で説明したとおりにエラーハンドラーを設定しておけば、送信に失敗した場合は通知が届くため、手動で対応できます。また、Makeは失敗した実行をすべてScenario Historyタブに記録します。

Q: 既存コンタクトのライフサイクルステージを上書きしてしまうのを防ぐには?

A: Update Contactのパスでは、次の場合にのみ設定します: lifecyclestage 現在の値が新しい値よりもファネルの下流にない場合です。Updateモジュールの前にフィルターを置き、既存コンタクトのライフサイクルステージを確認します。新しいステージが上位への移行である場合(たとえば次からの移行: lead に次の値を入れます: marketingqualifiedlead).

Q: このユースケースならMakeは無料で使えますか?

A: Makeの無料プランには、月1,000オペレーションと15分間隔のポーリングが含まれます。月間送信数が500件未満の低〜中ボリュームのフォームであれば、ここで説明したシナリオは無料プランで十分に運用できます。ボリュームが多い場合やインスタントトリガーを使う場合は、月額約$9からの有料プランが必要です。