HubSpot は、顧客データを監視して販売およびマーケティング戦略を最適化できる、広く使用されている顧客関係管理 (CRM) システムです。Logic を利用することで、フォーム送信から Hubspot に連絡先を効率的に転送し、Webflow ポータルを CRM と統合できます。
始める: まだ行っていない場合は、 HubSpotにアカウントを設定するさらに、HubSpot の必須フィールドと一致するフィールドを含むフォームが Webflow サイトに含まれていることを確認してください。
このチュートリアルでは、次の内容について説明します。
- HubSpot APIキーを生成するプロセス
- Logicワークフローの認証を設定する
- HubSpot API documentation の検索
- HTTPリクエスト設定の構成
- ワークフローのテストと展開
- ワークフローの潜在的な問題のトラブルシューティング
HubSpot APIキーの生成
覚えておいてください: HubSpotは2つの選択肢を提供します 認証方法 (OAuthとプライベートアプリアクセストークン)。このガイドでは、 プライベートアプリアクセストークン 方法。
- アクセス HubSpotアカウント そして、 プライベートアプリを作成するまだ行っていない場合は
- を選択 スコープ タブをクリックし、このAPIキーを使用して実行するアクションを CRM ドロップダウン(少なくとも crm.objects.contacts.write 連絡先をHubspotに送信する
- クリック トークンを表示 そしてあなたの APIキー
Logicワークフローの認証を構成する
- 新しいタブを開いてWebflowデザイナーでWebflowサイトを開きます
- デザイナーキャンバスでフォームを選択し、アクセスします フォーム設定
- を選択 ソース ドロップダウンから選択 論理
- クリック 新しいフローを追加
- 新しいフローに名前を付けます(例:「HubSpotで接続を確立」)。 名前 フィールドに説明を追加し、必要に応じて 説明 分野
- ドラッグ HTTPリクエストを行う フローエディタキャンバスにブロックを追加し、名前を割り当てます(例:「HubSpotで新しいコンタクトを開始」)
- から 認証 ドロップダウンメニューで選択 APIトークン
- 選ぶ ヘッダ から に追加 オプション
- 「承認」と入力し、 ヘッダ 分野
- クリック 資格情報を選択 > 新しい資格情報を追加
- APIトークンに名前を付けます(例:「HubSpot APIトークン」)。 名前 フィールドに説明を記入し、 説明 必要に応じてフィールド
- 「ベアラー」と入力 {API キー}" の中に トークン フィールド、置換 {API キー} HubSpotからコピーしたAPIキー
- クリックして新しい認証情報を保存します 作成する そして確実に このタブを開いたままにしておく!
プロのヒント: さらに、フォームを新しいロジックワークフローにリンクすることもできます。 ロジックパネル > 流れ タブ。フォーム送信トリガーに関する詳細は、Logic で確認できます。



HubSpot API documentation の検索
- 訪問 HubSpot APIリファレンス documentation
- 下にスクロール CRM 左パネルにあります
- 案内する オブジェクト > 連絡先 > 連絡先を作成する そして このタブを開いたままにする ガイダンスのために!
HTTPリクエスト設定の構成
ロジック フローと HubSpot 認証資格情報を設定したら、Webflow に戻ってフロー内の HTTP リクエストを定義します。この段階での HTTP リクエスト構成により、訪問者がフォームを送信するたびに、Hubspot に新しい連絡先が作成されます。
注記: Webflowサイトが開いていたタブを閉じた場合は、 ロジックパネル > 流れ タブを開き、前の手順で作成したフローを選択します。 HTTPリクエストを行う フロー エディター キャンバスのブロックをクリックしてブロック設定を開き、次の手順に進みます。
- 選ぶ 役職 から リクエスト方法 落ちる
- 「https://api.hubapi.com/crm/v3/objects/contacts」を貼り付けます。 URL 分野
- 隣にある「プラス」アイコンをクリックします ヘッダー 新しいヘッダーを追加する
- 「content-type」を入力 名前 フィールドと「application/json」 価値 分野
- の中に 体 フィールドにコードスニペットを貼り付けます 連絡先の作成 HubSpotで提供される API 1TP32 チューニング — こんな感じになります(ただし、プロパティが含まれています)
続行するには、フォーム経由で受信した送信からデータを収集するために、HTTP リクエストにライブ情報を組み込む必要があります。
- HubSpotの連絡先から既存のコンテンツを消去し、空の引用符内にカーソルを置きます。 コンテンツ セクション
- 紫色を選択してくださいドット” 記号をクリックし、対応する動的フォーム要素 (名前、電子メールなど) を選択します。


シーケンスをテストしてリリースする手順
- プレス 構成を確定するためにテストを実行する
- 適切なフィールドにテスト値を入力します
- プレス テストを実行する
- タップする 終了 または データを受け入れる テストモードを終了する
- クリック 公にする
- 打つ 公開フローの準備
- ウェブサイトの公開に進む
ヒント: テスト プロセス中にエラー通知が発生した場合は、問題解決の手順に従って問題を解決し、前述の手順を繰り返します。HTTP リクエストの調査に関する追加の詳細を確認してください。
シーケンス内の懸念に対処する手順
シーケンスのテスト中にエラーが発生した場合は、次の対策を試してください。
- 資格情報を設定するときに、API キーの前に「Bearer」(スペースを含む)が含まれていることを確認します(例:Bearer 123456789)
- 次のような無料ツールを使用してリクエスト本文にエラーがないか検査します。 JSONリント
Ewan Mak による最新の投稿 (すべてを見る)
- ワークスペーススポットとメンバーの追加または削除 - 2024年4月15日
- センタリングボックスの概要 - 2024年4月15日
- 将来の参照用にサイトを保存する - 2024年4月15日