メインコンテンツにスキップ
お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。

ポップアップフォームを作成する

更新日時 2024年 4月 24日

以下の 製品でご利用いただけます(別途記載されている場合を除きます)。

すべての製品とプラン

ポップアップ フォーム ツールを利用して、新しいリードを惹き付けるリード情報の収集フォームを作成できます。ポップアップフォームは、HubSpotでホスティングしている任意のブログ記事、ランディングページ、ウェブサイトのページで利用できます。 

ボタンでポップアップをトリガーしたい場合またはポップアップをさらにカスタマイズしたい場合は、代わりにフォームでCTAを作成することをお勧めします。 

注:ポップアップ フォーム ツールは廃止される予定です。2023年7月17日より、Starter、Professional、Enterpriseをご利用中の全てのユーザーは、ポップアップフォームの作成や複製ができなくなります。現時点では、既存のポップアップフォームを編集、削除、非公開することは可能です。スティッキーバナー、ポップアップボックス、スライドインCTAを作成するには、新規CTAツールを使用することをお勧めします。

ポップアップフォームを作成する

外部ページにポップアップフォームを追加するには、外部サイトにHubSpotトラッキングコードをインストールするか、WordPressサイトにHubSpot WordPressプラグインをインストールする必要があります。

新しいポップアップフォームを作成するには、次の手順に従います。 

  • HubSpotアカウント上で、[フォーム]を開きます。
    • 「Professional」または「Enterprise」をご利用の場合、[マーケティング]>[リード情報の収集]>[フォーム]の順に進みます。
    • 「Starter」または「無料版」をご利用の場合、[マーケティング]>[フォーム]の順に進みます。
  • 右上の[フォームを作成]をクリックします。
  • フォームをビジネスユニット ( ビジネスユニット追加オプションのみ) に関連付けする:
    • [ビジネスユニットを選択]ドロップダウンメニューをクリックします。
    • このフォームを関連付けたいビジネスユニットを選択します。 
  • フォームタイプを選択します。ポップアップフォームを作成するには、次のフォームタイプのいずれかを選択します。
    • ポップアップボックス
    • ドロップダウンバナー
    • スライド イン ボックス(左)
    • スライド イン ボックス(右)
  • 右上にある[次へ]をクリックします。
  • フォームエディターの上部にあるedit鉛筆アイコンをクリックし、フォーム名を編集します。

コールアウトを設定する 

[コールアウト]タブでは、訪問者の注意を喚起するためのコールアウトを追加し、カスタマイズします。コールアウトのカスタマイズは右側のプレビューに表示されるため、ページで公開されたときにポップアップフォームがどのように表示されるかを把握できます。

  • キービジュアル:コールアウトとフォームステップの両方に表示するキービジュアルを選択します(ポップアップボックスとスライドインボックスのみ)。
  • コールアウトテキスト:コールアウトのメインヘッダーのテキストを入力します。
  • コールアウト本文:コールアウトの追加情報または詳細を入力します。(任意)
  • コールアウト ボタン テキスト:コールアウトフォームのボタンテキストを入力します。
  • テーマカラー:ポップアップフォームのボタンのテーマカラーを設定します。カラーパレットからカスタムカラーを選択するか、16進数値を手動で入力します。
  • リンクボタン:コールアウトボタンのリンク先を選択します。
    • フォームステップ:ポップアップフォームからフォームにユーザーを誘導します。[フォーム]タブをクリックし、フォームをカスタマイズします。
    • HubSpot以外のURL:外部ページへのリンクを入力します。
    • HubSpotページまたはブログ記事 ( Marketing Hubまたは Content Hub Starter , Professional, または Enterprise ): ドロップダウンでHubSpotページまたはブログ記事を選択します。
    • ファイルダウンロード:[ファイルを参照]をクリックし、ファイルを追加します。
    • ミーティングリンク:ドロップダウンメニューからミーティングリンクを選択します。
    • カレンダーのイベント:カレンダーイベントを作成し、イベントの詳細を設定します。イベントは、顧客のGoogleまたはOutlookカレンダー内に作成されます。

ポップアップフォームをカスタマイズする

コールアウトボタンがフォームステップにリンクしている場合、表示されるフォームをカスタマイズできます。[フォーム] タブで以下の詳細をカスタマイズします。
  • フォーム本文:フォームフィールドの前に表示される追加情報または詳細を入力します。これはオプションのステップです。 
  • 追加されたフィールド:ポップアップフォームのフィールドを選択します。既定の[Eメール]フィールドが自動的に組み込まれます。フォームには最大4つのフィールドを追加できます。
    • フォームにフィールドを追加するには、[+別のフォームフィールドを追加]をクリックします。
    • 訪問者に対するフォームフィールドの表示方法をカスタマイズするには、edit 鉛筆アイコンをクリックします。 
      • フィールドのラベルを編集するか、プレースホルダーテキストを追加するか、または既定の値を入力することができます。
      • Eメールのフィールドには、ブロックするEメールアドレスやドメインを設定できます。
  • フォーム ボタン テキスト:フォーム ボタン テキストをカスタマイズします。既定では、このフィールドには、[コールアウト]タブのフォーム ボタン テキストが自動的に入力されます。 
  • GDPRオプション:HubSpotアカウント上でデータプライバシー設定が有効化されている場合、このポップアップフォームの通知と同意のオプションを設定できます。既定のテキストをカスタマイズするには、edit 鉛筆アイコンをクリックして編集します。
  • 言語:フォームの言語を設定します。これにより、フォームフィールドのラベル、通知と同意/正当な利害関係のメッセージ、フォームに表示されるエラーメッセージが変更されます。編集可能なその他すべてのフィールドは、手動で翻訳する必要があります。
  • CAPTCHA:スパム送信に対する追加の保護を提供するCAPTCHAを有効にします。

フォームのサンキューメッセージを作成する

コールアウトボタンがフォームステップにリンクしている場合、[サンキュー]タブで、訪問者がポップアップフォームを送信した後の動作を設定します。 

  • [サンキューメッセージ]フィールドに、訪問者がポップアップフォームを送信した後に表示するメッセージを入力します。リッチ テキスト エディターを使用して、テキストを書式設定できます。
  • サンキューメッセージの後に訪問者を別の場所にリダイレクトするためのボタンを追加するには、次の手順に従います。
    • [ボタンを追加]チェックボックスを選択します。
    • ボタンテキストをカスタマイズします。
    • ボタンのリンク先を選択します。
      • HubSpot以外のURL:訪問者を外部ページにリダイレクトします。ページのURLを入力します。
      • HubSpotページまたはブログ記事 ( Marketing HubまたはContent Hub Starter , Professional, または Enterprise ) :ドロップダウンメニューからHubSpotページまたはブログ記事を選択します。
      • ファイルダウンロード:[ファイルを参照]をクリックし、ファイルを追加します。
      • ミーティングリンク:ドロップダウンメニューからミーティングリンクを選択します。
      • カレンダーのイベント:カレンダーイベントを作成し、イベントの詳細を設定します。イベントは、顧客のGoogleまたはOutlookカレンダー内に作成されます。

 

注: HubSpotの無料ツールを使用しているアカウントは、メールのセットアップウィザードを完了する必要があります。ポップアップフォームのダブルオプトインを有効にするフォローアップメールを作成すると、フォームにCAPTCHAが自動的に追加されます。

ポップアップフォームのターゲティングをカスタマイズする

このポップアップフォームをサイトに表示するタイミングを選択して訪問者のターゲティングを行います。フィルターを追加して複数のルールセットを組み合わせ、ポップアップフォームを表示するタイミングを決定します。ターゲティングルールの詳細をご覧ください。

ウェブサイトURL

特定のウェブページURLや、クエリーパラメーター値の条件付きロジックを追加できます。既定では、ポップアップフォームがすべてのページに表示されます。

  • 訪問者が特定のウェブサイトURLにアクセスしたときにポップアップフォームを表示するには、[ウェブサイトURL]セクションで、次の手順に従います。
    1. 最初のドロップダウンメニューをクリックし、[ウェブサイトURL]を選択します。
    2. 2つ目のドロップダウンメニューをクリックし、ターゲティングルールを選択する。
    3. テキストフィールドにルールの条件を入力します。

  • 訪問者がURLに特定のクエリーパラメーターが含まれるウェブサイトページにアクセスしたときにポップアップフォームを表示するには、次の手順に従います。
    1. 最初のドロップダウンメニューをクリックし、[クエリーパラメーター]を選択します。
    2. 1つ目のテキストフィールドに、クエリーパラメーター名を入力します。
    3. ドロップダウンをクリックし、ターゲティングルールを選択します。
    4. 2つ目のテキストフィールドに、クエリーパラメーターの値を入力します。


  • 別のルールを追加するには、[ルールを追加]をクリックします。
  • 特定のページ(プライバシー ポリシー ページなど)からポップアップフォームを除外するには、[除外ルールを追加]をクリックします。

訪問者の情報および行動(任意)

既知の訪問者の情報と行動に基づいて、ポップアップフォームを表示する対象のコンタクトを限定することもできます。追加できるフィルタリングルールのタイプは、アカウントのサブスクリプションによって異なります。「Marketing Hub Professional」および「Enterprise」アカウントでは、ポップアップフォームを表示または非表示にする条件を追加したフィルターを作成できます。

訪問者の情報および行動 セクションで、訪問者情報 に基づいて基準 を設定する:

  • ポップアップフォームを表示するタイミングを選択します。
    • [ポップアップを表示]タイルで、最初のドロップダウンメニューをクリックし、訪問者にポップアップフォームを表示するタイミングを選択します。
    • 次のドロップダウンメニューをクリックして、フィルタリングルールを選択します。
    • ポップアップフォームを表示するタイミングに関するルールを追加するには、[ルールを追加]をクリックしてフィルターを選択します。
  • ポップアップフォームを非表示にするタイミングを選択します。
    • [除外ルールを追加]をクリックします。
    • 最初のドロップダウンメニューをクリックして、ポップアップフォームを非表示にするタイミングを選択します。
    • 次のドロップダウンメニューをクリックして、フィルタリングルールを選択します。
    • ポップアップフォームを非表示にするタイミングに関するルールを追加するには、[除外ルールを追加]をクリックしてフィルターを選択します。
  • 別のフィルタリング ルール セットを作成するには、[フィルターグループを追加]をクリックし、フィルタリングルールを選択します。

add-filter-groups

トリガー

ポップアップフォームがページに表示されるタイミングを設定します。


 

次のオプションを選択できます。

  • 50%ページをスクロールしたとき:訪問者がページを半分までスクロールした時点でフォームが表示されます。
  • 離脱意図があるとき(ポップアップボックスのみ):訪問者がブラウザーウィンドウの上部バーにカーソルを移動すると、フォームが表示されます。
  • 経過時間後:指定された秒数の後にフォームが表示されます。

ポップアップ フォーム オプションをカスタマイズする 

[オプション]タブで、ポップアップフォームの設定をさらにカスタマイズします。利用しているHubSpotサブスクリプションと追加した連携によっては、一部のオプションが表示されないことがあります。次のオプションを設定できます。

  • スケジュール設定(「Professional」または「Enterprise」のアカウントのみ):既定では、ポップアップフォームは即時に公開されます。ポップアップフォームをスケジュール設定して、特定の日付からのみアクティブにするには、[予定としてスケジュール]を選択します。
    • 特定の日時にポップアップフォームを公開するには、[開始日]ドロップダウンメニューと[時間]ドロップダウンメニューをクリックし、日付、時刻をそれぞれ設定します。
    • 特定の日時にポップアップフォームを非公開するには、[非公開の日時を設定]ドロップダウンメニューをクリックし、[終了日]ドロップダウンメニューと[時間]をクリックし、日付、時刻をそれぞれ設定します。 



ポップアップフォームで自動化を使用する

コンタクトへのフォローアップEメールの送信や、ポップアップフォームを使用した自動内部Eメール通知など、シンプルな自動化機能を使用します。また、シンプルなワークフローでフォーム送信をトリガーとして使用することもできます。フォームツールでの自動化の使用方法について詳細をご確認ください。 

  • 上部にある[Automations(自動化)]タブをクリックします。[自動化]タブで、フォーム送信後の動作を設定することができます。
    • [フォーム送信後の動作を選択]セクションで、必要に応じてフォームの設定をカスタマイズします。
    • [シンプルなワークフローを作成]セクションで、Eメールの送信やコンタクトプロパティーの設定などのフォローアップアクションを自動化するためのシンプルなワークフローを設定します。

ポップアップフォームをプレビューする

[プレビュー]タブでは、ポップアップフォームのプレビュー動作をテストできます。

  • ポップアップフォームがどのように表示されるかをデバイスの種類別に確認するには、左上の[パソコン]、[タブレット]、[モバイル]のボタンを押して表示を切り替えます。
  • また、ポップアップフォームの入力手順ごとに表示を確認するには、leftright左右の矢印のアイコンをクリックします。.

ポップアップフォームを公開/非公開にする

  • フォームのセットアップが完了したら、右上の[公開]をクリックしてポップアップフォームを公開します。
  • [オプション]タブで、公開されているフォームを非公開にすることもできます。
    • [オプション]タブに移動します。
    • [非公開]をクリックします。
    • ダイアログボックスで[ポップアップフォームを非公開]をクリックします。
    • フォームを非公開にした後は、[ダッシュボードに移動する]を選択してフォームに戻ることも、[エディターに留まる]を選択してフォームエディターに留まることもできます。

New Call-to-action

この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。