ハブスポット(Hubspot)のフォームを完全解説!スタンドアロンフォーム、埋め込みフォームなど専門用語も解説

Mia Bytefield
October 10, 2024

動画解説

今回のテーマ

HubSpotのフォーム機能は、Webサイト上でユーザーの情報を収集し、 資料ダウンロードなど効果的なマーケティングを実現するための重要なツールです。本記事では、HubSpotフォームの基本的な機能と、その活用方法について詳しく解説します。

HubSpotフォームの2つの種類

HubSpotフォームには、大きく分けて2種類あります。

  1. HubSpot内で作成するフォーム
  2. HubSpot以外のツールで作成したフォームとの連携

前者は、HubSpotのドラッグ&ドロップ式のエディタを使って簡単にフォームを作成できます。一方、後者は、既存のフォームとHubSpotを連携させることで、フォーム送信時の情報をHubSpotで管理できるようになります。

Hubspotのスタンドアロンページと埋め込みフォームの違い

HubSpotでフォームを作成する際、スタンドアロンページと埋め込みフォームの2つの選択肢があります。両者の違いを理解することで、目的に応じた最適なフォームを作成できます。

スタンドアロンページ

スタンドアロンページは、HubSpot上に独立したフォーム専用のページを作成する方式です。このページには、HubSpotが生成したユニークなURLが割り当てられます。スタンドアロンページは、専用のランディングページを作成したい場合や、HubSpotの機能を最大限に活用したい場合に適しています。

埋め込みフォーム

埋め込みフォームは、HubSpotで作成したフォームを既存のWebサイトに組み込む方式です。フォームのHTMLコードを生成し、そのコードをWebサイトの任意の場所に貼り付けることで、フォームを設置できます。

埋め込みフォームは、既存のWebサイトにフォームを追加したい場合や、Webサイトのデザインとの一貫性を維持したい場合に適しています。

使い分け方

スタンドアロンページと埋め込みフォームは、目的に応じて使い分けることが重要です。以下のようなケースを参考に、適切な方式を選択しましょう:

  • 専用のランディングページを作成したい場合 → スタンドアロンページ
  • 既存のWebサイトにフォームを追加したい場合 → 埋め込みフォーム
  • HubSpotの機能を最大限に活用したい場合 → スタンドアロンページ
  • Webサイトのデザインとの一貫性を維持したい場合 → 埋め込みフォーム

フォームの作成と設定

HubSpotでフォームを作成する際は、入力フィールドに必要な項目を追加し、必須項目や非表示項目を設定します。また、フォーム送信後の挙動や、フォームデザインのカスタマイズも可能です。

フォーム フィールド 項目には、以下のようなものがあります:

  • テキスト入力欄
  • ドロップダウンリスト
  • チェックボックス
  • ラジオボタン
  • 日付選択
  • ファイルアップロード

これらの項目を組み合わせることで、目的に応じたフォームを作成できます。

tips:フォームにEメールの設定が推奨される理由

HubSpotのフォームを作成する際、Eメールの設定は必須ではありませんが、強く推奨されています。

コンタクトの一意性を保証

HubSpotでは、Eメールアドレスを基にコンタクトの一意性を保証しています。つまり、同一のEメールアドレスを持つコンタクトを重複して作成することはできません。フォームにEメールの設定を行うことで、フォーム送信時に収集したEメールアドレスを基に、コンタクトの重複をチェックできます。

コンタクトのマージ

フォーム送信時に収集したEメールアドレスが、既存のコンタクトと一致する場合、HubSpotは自動的にそのコンタクトにマージします。これにより、コンタクトの情報を一元管理できるようになります。Eメールの設定を行わない場合、この自動マージ機能を活用できません。

ファーストパーティクッキーの活用

HubSpotでは、ファーストパーティクッキーを使用して、Webサイト訪問者の行動履歴を追跡しています。フォームにEメールの設定を行うことで、フォーム送信時にファーストパーティクッキーを紐付けできます。これにより、コンタクトの行動履歴をより詳細に把握できるようになります。

マーケティングオートメーションの実現

HubSpotのマーケティングオートメーション機能を活用するには、コンタクトのEメールアドレスが必須です。フォームにEメールの設定を行うことで、フォーム送信時に収集したEメールアドレスを基に、マーケティングオートメーションのワークフローをトリガーできます。

HubSpotのフォームのフィールドの出し分けができるロジックの説明

HubSpotのフォームでは、フィールドの出し分けを行うことで、ユーザーの回答に応じて動的にフォームを変更できます。

出し分けロジックの基本

HubSpotのフォームでは、特定のフィールドの値に基づいて、他のフィールドの表示/非表示を切り替えることができます。この機能を「出し分けロジック」と呼びます。出し分けロジックを使用することで、ユーザーの回答に応じてフォームを動的に変更し、ユーザーエクスペリエンスを向上させることができます。

出し分けロジックの設定方法

出し分けロジックを設定するには、以下の手順を実行します:

  1. フォームエディタで、出し分けの基準となるフィールドを選択します。
  2. フィールドの設定画面で、「ロジック」タブを選択します。
  3. 「ロジックを追加」をクリックし、出し分けの条件を設定します。
  4. 条件に応じて表示/非表示にするフィールドを選択します。
  5. 必要に応じて、複数の条件を組み合わせることができます。

出し分けロジックは、チェックボックス、ドロップダウンリスト、ラジオボタンなどのフィールドに対して設定できます。

出し分けロジックの活用例

出し分けロジックは、様々なシナリオで活用できます。以下に、代表的な活用例を紹介します:

例1:製品の種類に応じたフィールドの表示

お問い合わせフォームで、「製品の種類」をドロップダウンリストで選択させる場合、選択した製品に応じて追加の質問を表示することができます。例えば、「製品A」を選択した場合は「製品Aの用途」を、「製品B」を選択した場合は「製品Bの予算」を表示するなどの設定が可能です。

例2:ユーザーの属性に応じたフィールドの表示

ユーザーの属性(企業規模、業種、職種など)に応じてフォームのフィールドを出し分けることができます。例えば、「企業規模」が「大企業」の場合は「年間予算」を、「中小企業」の場合は「導入時期」を表示するなどの設定が可能です。

フォーム送信時の挙動設定

フォーム送信後の挙動は、以下の3つから選択できます:

  1. サンクスページへの遷移
  2. 外部リンクへの遷移
  3. サンクスメッセージの表示

また、エンタープライズプランでは、フォーム送信後に予約フォームを表示することもできます。

同一端末で顧客自身にHubSpotフォームを入力させる場合の注意点

展示会やイベントなどで、同一端末(タブレットやPC)を使って複数の顧客にHubSpotフォームを入力してもらう場合、いくつかの注意点があります。

クッキーによるコンタクトのマージ

HubSpotでは、フォーム送信時のファーストパーティクッキーを使用して、コンタクトのマージを行っています。同一端末で複数の顧客がフォームを送信した場合、HubSpotはクッキー情報に基づいて、全てのフォーム送信を同一のコンタクトとしてマージしてしまう可能性があります。

「新しいメールで常にコンタクトを作成」オプション

この問題を解決するには、フォームの設定で「新しいメールで常にコンタクトを作成」オプションを有効にする必要があります。このオプションを有効にすることで、同一端末からのフォーム送信であっても、Eメールアドレスが異なる場合は別のコンタクトとして作成されます。

オプションの有効化手順

「新しいメールで常にコンタクトを作成」オプションを有効にするには、以下の手順を実行します:

  1. HubSpotのフォームエディタを開きます。
  2. 設定したいフォームを選択します。
  3. 「オプション」タブを選択します。
  4. 「新しいメールで常にコンタクトを作成」のチェックボックスをオンにします。
  5. フォームを保存します。

このオプションを有効にすることで、同一端末からのフォーム送信でも、個別のコンタクトとして作成されるようになります。

HubSpotフォームのデザインについて

HubSpotフォームのデザインは、ユーザーエクスペリエンスと変換率に大きな影響を与えます。

デフォルトのデザインテンプレートの活用

HubSpotには、あらかじめ用意されたデザインテンプレートが複数用意されています。これらのテンプレートを活用することで、専門的なデザインスキルがなくても、見栄えの良いフォームを作成できます。テンプレートは、フォームの用途に合わせて選択しましょう。

未加工のHTMLフォームとして設定

より高度なデザインカスタマイズを行いたい場合、フォームの設定で「未加工のHTMLフォームとして設定」オプションを有効にすることで、HubSpotのデフォルトCSSを無効化できます。これにより、完全に自由にフォームのHTMLとCSSを記述できるようになります。ただし、HTMLとCSSの知識が必要となります。また、この機能はMarketing HubまたはCMS HubのProfessionalまたはEnterpriseサブスクリプションをご利用のでないと利用できません。

HubSpotフォームの自動化機能を活用する方法

HubSpotフォームの自動化機能を活用することで、フォーム送信後の処理を自動化し、業務の効率化を図ることができます。

自動化機能の概要

HubSpotフォームの自動化機能は、フォーム送信後に自動的に実行されるアクションを設定できる機能です。自動化機能は、フォームエディタの「自動化」タブで設定できます。自動化機能では、以下のようなアクションを設定できます:

  • メールの送信
  • コンタクトプロパティの更新
  • ワークフローの実行
  • Slackへの通知

これらのアクションを組み合わせることで、フォーム送信後の処理を自動化できます。

メールの自動送信

自動化機能を使用して、フォーム送信後に自動的にメールを送信できます。例えば、フォーム送信者に対して、お問い合わせありがとうございましたというメールを自動送信することができます。メールのテンプレートは、HubSpotのメールエディタで作成できます。

コンタクトプロパティの自動更新

フォーム送信時に収集した情報を、コンタクトプロパティに自動的に反映させることができます。例えば、「お問い合わせ内容」というカスタムプロパティを作成し、フォーム送信時にその値を自動的に更新するなどの設定が可能です。

ワークフローの自動実行

フォーム送信をトリガーとして、HubSpotのワークフローを自動的に実行できます。例えば、フォーム送信者を特定のリストに追加したり、スコアリングを行ったりするなどの処理を自動化できます。

Slackへの自動通知

フォーム送信時に、Slackに自動的に通知を送ることができます。これにより、営業担当者やカスタマーサポート担当者に、リアルタイムでお問い合わせがあったことを通知できます。

HubspotのHubspotフォーム以外の設定方法について

HubSpotでは、HubSpotフォームだけでなく、外部サイトのフォームをHubSpotと連携させることができます。

外部フォームとHubSpotの連携方法

設定方法

HubSpotアカウントで外部フォームの設定を行うには、まず上部のナビゲーションバーに表示される設定アイコン(歯車のマーク)をクリックします。次に、左側のサイドバーメニューから「マーケティング」>「フォーム」と進み、「HubSpot以外のフォーム」タブを選択します。

このタブでは、HubSpot以外のフォームからのデータ収集を有効または無効にすることができます。設定を変更するには、「ウェブサイトフォームからデータを収集」のスイッチをクリックしてオン/オフを切り替えます。

また、HubSpot以外のフォームの送信時にEメール通知を受け取ることも可能です。通知を受け取るには、「収集されたフォーム送信のEメール通知の宛先」フィールドに、通知を受け取りたいHubSpotユーザーのEメールアドレスを入力します。複数のアドレスを入力する場合は、コンマで区切ります。

外部フォームの要件

外部フォームがHubSpotと連携するためには、以下の要件を満たす必要があります:

  • フォームがHTMLで記述されていること
  • フォームが静的であること(動的に生成されるフォームは連携できません)
  • フォームにsubmitボタンが含まれていること
  • フォームがiframeで埋め込まれていないこと

これらの要件を満たしていない場合、HubSpotとの連携ができない可能性があります。

フィールドマッピングの設定

外部フォームとHubSpotを連携させる際、フォームのフィールドとHubSpotのプロパティを紐付ける必要があります。この作業を「フィールドマッピング」と呼びます。

外部フォームで設定されているフィールドのnameタグとHubspotのプロパティの内部値を同一にする必要があります。詳しくは動画で確認してください。

フィールドマッピングを適切に設定することで、外部フォームから収集した情報を、HubSpotのコンタクトプロパティに正しく反映させることができます。

まとめ

いかがだったでしょうか。Hubspotのフォーム機能はマーケティングオートメーションをする上でも重要な機能ですので、基礎を理解してどんどん活用していきましょう。

よくある質問

HubSpot CRMに自動でコンタクト情報が収集されますか?

HubSpot CRMには、コンタクト情報を自動的に収集・更新する機能があります。この機能により、手動でデータを入力する手間を大幅に削減し、常に最新の顧客情報を維持することができます。自動収集の主な方法

Eメールからの情報収集

HubSpotのAI機能を活用することで、受信したEメールから自動的にコンタクト情報を抽出し、CRMに反映させることができます

機能は以下の情報を自動で収集します:

  • 名前
  • 電話番号
  • 役職
  • 会社名
  • 住所情報(市区町村、都道府県、国、郵便番号など)

ウェブサイトからの情報収集

HubSpotのフォームやチャットボットを通じて、ウェブサイト訪問者が入力した情報を自動的にCRMに取り込むことができます。

企業情報の自動入力

新しいコンタクトが追加された際、HubSpotの2,000万社以上のデータベースを活用して、関連する企業情報を自動的に入力します。

自動収集の設定と注意点

  • この機能はデフォルトで有効になっていますが、個別に設定を変更することも可能です。
  • 自動収集された情報は、既存のデータを上書きすることはありません。
  • 日本語のEメールは現在サポートされていないため、注意が必要です。

HubSpot CRMの自動データ収集機能を活用することで、営業チームは情報収集に時間を割くことなく、より価値の高い営業活動に集中することができます。ただし、プライバシーや法令遵守の観点から、自動収集されたデータの取り扱いには十分注意を払う必要があります。

HubSpotでメールにフォームを埋め込むことは可能ですか?

HubSpotでは、メール本文に直接フォームを埋め込むことはできません。その理由は次の通りです:

  1. 多くのメールクライアントがセキュリティ上の理由からJavaScriptを無効にしているため、フォームが正常に機能しません。
  2. メールクライアント間で表示が一貫しないため、ユーザー体験が損なわれる可能性があります。

代替方法としては、以下の方法が推奨されます:

  • フォームへのリンクをメールに含める。
  • フォームのスクリーンショットを画像としてメールに挿入し、クリックするとフォームページに遷移するようにする。

WordPressでHubSpotフォームを埋め込む方法

WordPressサイトにHubSpotフォームを埋め込む手順は以下の通りです:

  1. WordPressの管理画面で「HubSpot All-In-One Marketing」プラグインをインストールし、有効化します。
  2. プラグインの設定でHubSpotアカウントと連携します。
  3. 投稿や固定ページの編集画面で「HubSpot Form」ブロックを追加します。
  4. ブロック設定で埋め込みたいフォームを選択します。

また、標準の外部埋め込みのコードの埋め込みでも対応可能となっています。

HubSpotでフォーム送信後にリダイレクトするには?

フォーム送信後に特定のページにリダイレクトさせるには、次の手順を行います:

  1. フォームエディターで「オプション」タブを選択します。
  2. 「フォーム送信後の動作」セクションで「別ページにリダイレクト」を選択します。
  3. リダイレクト先のページをドロップダウンリストから選ぶか、外部URLを入力します。
  4. 設定を保存し、フォームを公開します。

これで、フォーム送信後に指定したページやURLに自動的にリダイレクトされるようになります。

Mia Bytefield
October 10, 2024