料金プランを有効化して学習を始めましょう。

ロジックでHubspotのコンタクトを作成

LogicのMake HTTPリクエストブロックを使用して、Webflowのフォーム送信からHubSpotに新しい連絡先を作成します。

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。

引用元

HubSpotは人気のある顧客関係管理（CRM）プラットフォームで、顧客データを追跡し、営業とマーケティングの取り組みを効率化することができます。Logicを使用すると、フォームの送信から直接HubSpotに連絡先を送信し、WebflowサイトをCRMにリンクさせることができます。

開始する前に： もしまだであれば、HubSpotアカウントをセットアップしてください。また、HubSpotで必須フィールドに設定したフィールドに対応するフィールドを持つフォームをWebflowサイトに追加する必要があります。

このレッスンで学ぶこと

HubSpot APIキーの作成方法

注意： HubSpotは2つの認証方法（OAuthおよびプライベートアプリアクセストークン）を提供しています。このレッスンではプライベートアプリアクセストークンの方法を説明します。
  1. HubSpotアカウントに移動し、プライベートアプリを作成します（まだ作成していない場合）。
  2. Scopesタブをクリックし、CRMのドロップダウンでこのAPIキーを使用して行う操作を選択します（少なくとも、crm.objects.contacts.writeを選択してHubSpotに連絡先を送信する必要があります）。
  3. トークンを表示をクリックして、APIキーをコピーします。

Logicフローの認証の設定方法

  1. 新しいタブでWebflow Designerでサイトを開きます
  2. デザイナーキャンバスでフォームを選択し、Form settingsを開きます
  3. Sourceドロップダウンをクリックし、Logicを選択します
  4. Add new flowをクリックします
  5. Name フィールドに新しいフローの名前（例：「HubSpotに連絡先を作成」）を入力し、必要ならば Description フィールドに説明を追加します
  6. フローエディターキャンバスにMake HTTPリクエストブロックをドラッグし、名前を付けます（例：「HubSpotに新しい連絡先を作成」）
  7. AuthenticationドロップダウンからAPIトークンを選択します
  8. Add toドロップダウンから Headerを選択します
  9. Headerフィールドに「Authorization」と入力します
  10. Select a credentialをクリック > Add new credentialをクリックします
  11. APIトークンの名前フィールドにAPIトークンの名前（例：「HubSpot APIトークン」）を入力し、必要ならばDescriptionフィールドに説明を追加します
  12. Tokenフィールドに「Bearer {APIキー}」を入力し、**{APIキー}**をHubSpotからコピーしたAPIキーで置き換えます
  13. Createをクリックして新しい資格情報を保存し、このタブを開いたままにしておいてください！
プロのヒント： フォームを新しいLogicフローに接続するには、Logic panel > Flowから行うこともできます。ロジックのフォームサブミッションについて学ぶ。

フォーム設定、フォームブロック設定、またはLogic panel > Flowから、フォームをロジックに接続できます。

ベアラ認証を使用するAPI（Hubspotなど）の場合は、TokenフィールドでAPIキーの前に「Bearer」と入力する必要があります。

HubspotのAPIドキュメントを見つける方法

  1. Go to the Hubspot API reference documentation
  2. Scroll down to CRM in the left panel
  3. Go to Objects > Contacts > Create contacts and keep this tab open for reference!
  4. Hubspot APIリファレンスドキュメントにアクセスします
  5. 左のパネルでCRMまでスクロールします
  6. Objects > Contacts > Create contactsに移動し、このタブを開いたままにしておいてください！

HTTPリクエストの設定方法

これでLogicフローとHubSpotの認証資格情報を作成したので、Webflowに戻ってフロー内でHTTPリクエストを設定する必要があります。このステップで設定するHTTPリクエストは、サイトの訪問者がフォームを送信するたびに、HubSpotに新しいコンタクトを作成します。

注意： もしWebflowのサイトが開いていたタブを閉じてしまった場合、Logicパネル > Flowsタブに移動し、前の手順で設定したフローを選択します。フローエディターキャンバスでMake HTTPリクエストブロックを選択してブロック設定を開き、以下の手順を完了します。
  1. リクエストメソッドドロップダウンをクリックし、POSTを選択します。
  2. URLフィールドに「https://api.hubapi.com/crm/v3/objects/contacts」と貼り付けます。
  3. ヘッダーの隣にある「プラス」アイコンをクリックして新しいヘッダーを作成します。
  4. 名前フィールドに「content-type」と入力し、値フィールドに「application/json」と入力します。
  5. ボディフィールドに、HubSpotのAPIドキュメントからのコンタクトの作成**のコードブロックを貼り付けます — これは次のようになります（ただし、HubSpotのコンタクトに関するプロパティを含みます）：

{"company": "Biglytics","email": "bcooper@biglytics.net","firstname": "Bryan","lastname": "Cooper","phone": "(877) 929-0687","website": "biglytics.net"}

‍

その後、フォームの送信情報から情報を取得するために、HTTPリクエストに動的なデータを追加する必要があります：

  1. HubSpotのコンタクトの値を削除し、Bodyフィールドの空の引用符の間にカーソルを置きます。
  2. 紫色の「点」アイコンをクリックし、対応する動的フォームフィールド（例：名前、メールなど）を選択します。

LogicのMake HTTPリクエストブロックからの完全なHubSpotへのPOSTリクエスト。

テストと公開の方法

  1. Run test to complete setup をクリックします
  2. 関連する入力フィールドにサンプルの値を入力します
  3. テストを実行をクリックします
  4. テストモーダルを終了するためにキャンセルまたはデータを適用をクリックします
  5. 公開をクリックします
  6. 公開のためにフローをステージングをクリックします
  7. サイトを公開します
注意: テスト中にエラーメッセージを受け取った場合は、トラブルシューティング手順に従って、上記の手順を再試行してください。HTTPリクエストのテストについて詳しく学ぶ。

フローの問題をトラブルシューティングする方法

フローのテスト中にエラーが発生した場合は、次の手順を試してみてください：

  • クレデンシャルズの設定時にAPIキーの前に「Bearer」と（スペースを入れて）入力したことを確認してください（例：Bearer 123456789）
  • 無料のツールであるJSONLintを使用して、リクエストボディにエラーがないか確認してください。