HubSpotフォームの設定

HubSpotにサインアップし、コンタクトフォームを作成してコードを取得します。ページまたはウィジェットにそれを追加します。HubSpotのライブチャットをWordPressに連携させます。

HubSpotにサインアップ

HubSpotの公式サイト（https://app.hubspot.com/）にアクセスしてください。詳細については、サポートドキュメント「HubSpotにサインアップしてWordPressにライブチャットを連携させる」をご覧ください。

フォームを作成して埋め込みコードを取得する

  1. ダッシュボード（https://app.hubspot.com/reports-dashboard/）に移動します。
  2. [マーケティング]の下にある[フォーム]メニューをクリックします。
  3. [フォームを作成]ボタンをクリックします。
  4. 「埋め込みフォーム」を選択し、[次へ]ボタンをクリックします。
  5. テンプレートを選択するか、独自のフォームを作成し、[開始]をクリックします。
  6. [公開]をクリックします。
  7. [埋め込みコード]をクリックして、埋め込むためのJavaScriptコードを取得します。
  8. [コピー]ボタンをクリックしてコードをコピーします。
    …そしてコピーされました。

ページに埋め込む

  1. WordPressを起動してログインします。

  2. [ページ]の下にある[新規追加]をクリックします。

  3. [+]をクリックしてブロックを追加します。

  4. 「カスタムHTML」と入力し、[フォーマット]メニューの下にある[カスタムHTML]をクリックします。

  5. コピーしたHubSpotのフォームJavaScriptコードを貼り付け、[公開]をクリックします。

  6. アーティファクトを生成し、動作を確認します。

    例：

    <!-- HubSpotフォームの埋め込みコード -->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    portalId: "YOUR_PORTAL_ID",
    formId: "YOUR_FORM_ID"
  });
</script>

サイドバーウィジェットに埋め込む

  1. [カスタムHTML]メニューをクリックします。
  2. 適用したい位置を選択し、[ウィジェットを追加]ボタンをクリックします。
  3. コピーしたコードを貼り付けて保存します。
  4. アーティファクトを生成し、動作を確認します。

以上です！

HubSpotのライブチャットをWordPressに連携させる

ドキュメント「HubSpotにサインアップしてWordPressにライブチャットを連携させる」をご覧ください。