ポップアップフォームを作成する
更新日時 2021年 1月 22日
ポップアップフォームツールを利用すると、新しいリードを惹き付けるリード獲得フォームを簡単に作成できます。ポップアップフォームは、HubSpotでホスティングされているブログ記事、ランディングページ、またはウェブサイトページで使用できます。外部ページにポップアップフォームを追加するには、外部サイトにHubSpotトラッキングコードをインストールするか、WordPressサイトにHubSpot WordPressプラグインをインストールする必要があります。
- HubSpotアカウント上で、[フォーム]を開きます。
- ProfessionalまたはEnterpriseをご利用の場合、[マーケティング] > [リードの獲得] > [フォーム]の順に進みます。
- Starterまたは無料版をご利用の場合、[マーケティング] > [フォーム]の順に進みます。
- 右上の[フォームを作成]をクリックします。
- 左側のサイドバーで、[ポップアップフォーム]を選択します。
- 右上にある[次へ]をクリックします。
- ポップアップフォームの名前をカスタマイズするには、上部のedit鉛筆アイコンをクリックして名前を入力します。
1. タイプ - ポップアップフォームのタイプを選択する
ポップアップフォームには以下の3種類があります。[タイプ]タブで、作成するポップアップフォームのタイプを選択します。
- ポップアップボックス:ページのポップアップボックスとして表示されます。
- ドロップダウンバナー:ページ上部からドロップダウンバナーとして表示されます。
- スライドインボックス(左)/(右):ページ下部の左または右のスライドインボックスとして表示されます。
右上にある[次へ]をクリックします。
2. コールアウト - アクションを選択する
[コールアウト]タブでは、訪問者の注意を喚起するためのコールアウトを追加し、カスタマイズします。
- キービジュアル:(ポップアップボックスのみ)コールアウトとフォームの両方のステップに表示するキービジュアルを選択します。
- コールアウトテキスト:コールアウトのメインの見出し。
- コールアウト本文:コールアウトの追加情報または詳細。(任意)
- コールアウト ボタン テキスト:コールアウトフォームのボタンテキスト。
- テーマカラー:ポップアップフォームのボタンのテーマカラーを設定します。既定の色をクリックするか、16進値の横にある色見本をクリックしてカラーピッカーから色を選択するか、16進値を入力します。
- リンクボタン:コールアウトボタンのリンク先を選択します。
- フォームステップ:ポップアップフォームからユーザーをフォームに誘導します。[フォーム]タブをクリックしてフォームをカスタマイズします。
- HubSpot以外のURL:外部ページへのリンクを貼り付けます。
- HubSpotページまたはブログ記事(Marketing Hub Starter、Professional、Enterprise、およびCMS):ドロップダウンでHubSpotページまたはブログ記事を選択します。
- ファイルダウンロード:[ファイルを参照]をクリックしてファイルを追加します。
- ミーティングリンク:ドロップダウンメニューからミーティングリンクを選択します。
- カレンダーイベント:カレンダーイベントを作成し、イベント名、開始日、終了日、タイムゾーン、場所、および詳細を設定します。イベントは、顧客のGoogleまたはOutlookカレンダー内に作成されます。
コールアウトのカスタマイズは、右側のプレビューに直ちに表示されるため、ページで公開されたときにポップアップフォームがどのように表示されるかを把握できます。

右上にある[次へ]をクリックします。
3. フォーム - ポップアップフォームをカスタマイズする
[フォーム]タブでは、ポップアップフォームボタンをクリックした訪問者に表示される内容をカスタマイズします。- [フォーム本文]:(任意)ポップアップフォームへの入力によって提供される価値について詳しくアピールするテキストを追加できます。
- 追加されたフィールド:既定のEメールフィールドが自動的に含まれます。
- フォームにフィールドを追加するには、[+別のフォームフィールドを追加]をクリックします。ポップアップフォームでは、次のフィールドタイプがサポートされます。単行テキスト、複数行テキスト、ドロップダウン選択、単一チェックボックス、数値ピッカー、ファイル(ポップアップフォームでカスタム コンタクト プロパティーを作成できるのはMarketing Hub Starter、Professional、およびEnterpriseのみ)。
- 鉛筆アイコンeditをクリックすると、フィールドのラベルを編集したりプレースホルダーテキストを追加したりして、訪問者への見え方をカスタマイズできます。Eメールのフィールドには、ブロックするEメールアドレスやドメインを設定できます。
- フォームボタンテキスト:[コールアウト]タブのフォーム ボタン テキストが自動的にこのフィールドに入力されます。フォームステップでボタンテキストを変更するには、ここで更新してください。
- 通知と同意/正当な利害関係(GDPR):HubSpotアカウント上でGDPRが有効化されている場合、このポップアップフォームの通知と同意のオプションを設定できます。既定のテキストをカスタマイズするには、鉛筆アイコンeditをクリックします。
- 言語:フォームの言語を設定します。これにより、フォームフィールドのラベル、通知と同意/正当な利害関係のメッセージ、フォームに表示されるエラーメッセージが変更されます。その他の編集可能なフィールドはすべて手動で翻訳する必要があります。
- ライフサイクルステージの設定:ポップアップフォームを送信するコンタクトのライフサイクルステージを選択します。既定でリードに設定されています。
- CAPTCHA:スパム送信に対する追加の保護を提供するCAPTCHAを有効にします。
右上にある[次へ]をクリックします。
4. サンキュー - サンキューメッセージを作成する
[サンキュー]タブでは、訪問者がポップアップフォームを送信した後に表示するサンキューメッセージを入力します。リッチ テキスト エディターを使って、提供する資料やダウンロード用コンテンツへのリンク、簡易フォーマットのテキストを設定できます。
ウェブページ、ファイルダウンロード、ミーティングリンクなどの訪問者をサンキューメッセージの後にリダイレクトするボタンを追加するには、次の手順に従います。
- [ボタンを追加]チェックボックスを選択します。
- ボタンテキストをカスタマイズします。
- [このボタンのリンク先を指定してください]の下で、ボタンのリンクを選択します。
- HubSpot以外のURL:訪問者を外部ページにリダイレクトします。HubSpot以外のページURLを入力します。
- HubSpotページまたはブログ記事
- (Marketing Hub Starter、Professional、Enterprise、およびCMS Hub):訪問者をHubSpotページまたはブログ記事の1つにリダイレクトします。[HubSpotページまたはブログ記事を選択]ドロップダウンメニューをクリックし、公開済みのHubSpotページまたはブログ記事を選択します。
- ファイルダウンロード:訪問者をファイルダウンロードにリダイレクトします。[ファイルを参照]をクリックして、ファイルマネージャーからファイルを選択します。新しいファイルをアップロードするには、右側のペインの左下にあるdownCarat[ファイルを追加]をクリックし、自分のデバイス、Dropbox、またはGoogle Driveからファイルをアップロードします。
- ミーティングリンク:訪問者がミーティングリンクを使用して、自分のチームとのミーティングをスケジュール設定できるようにします。[ミーティングリンク]ドロップダウンメニューをクリックして既存のミーティングリンクを選択します。
- カレンダーのイベント:訪問者が新しいカレンダーイベントをGoogleまたはOutlookカレンダーに追加できるようにします。イベント名、日付、時間、タイムゾーン、場所、詳細を入力します。

右上にある[次へ]をクリックします。
5. フォローアップ - フォローアップEメールを作成する
[フォローアップ]のタブでは、[フォローアップEメールを作成]をクリックしてフォーム送信後に訪問者が受け取るフォローアップEメールを作成できます。
注:HubSpot CRMの無料ユーザーがポップアップフォームのダブルオプトインを有効にするには、Eメールの設定ウィザードを完了する必要があります。
- 右のパネルで、フォローアップEメールの詳細設定をカスタマイズします。
- サブスクリプションタイプ:フォローアップEメールのサブスクリプションタイプをクリックして選択します。
- 送信元ユーザー:フォローアップEメールの送信者をクリックして選択します。
- 件名:フォローアップEメールの件名を追加します。
- 本文:コンタクトとのエンゲージメントを続けるためのEメール本文を追加します。
- Eメールのフッターを編集:クリックすると、Eメール設定で会社名や住所をカスタマイズできます。
- 完了したら、[保存]をクリックします。Eメールの簡単なプレビューが表示されます。Marketing Hub Starter、Basic(旧製品)、Professional、Enterpriseをご利用の場合は[別のEメールを追加]をクリックして、最大3件のフォローアップEメールを追加できます。
- 右上にある[次へ]をクリックします。
注:フォローアップEメールを作成すると、フォームにCAPTCHAが自動的に追加されます。
6. ターゲティング - ポップアップフォームの表示場所をカスタマイズする
このポップアップフォームをサイトに表示するタイミングを選択して訪問者のターゲティングを行います。ポップアップフォームをどの訪問者に表示するかについて、フィルターを追加して複数のルールを組み合わせます。
ウェブサイトURL
特定のウェブページURLや、クエリーパラメーター値の条件付きロジックを追加できます。既定では、ポップアップフォームがすべてのページに表示されます。
- ウェブサイトURLに基づいて条件を設定するには、次の手順に従います。
- 最初のドロップダウンメニューをクリックし、[ウェブサイトURL]を選択します。
- 2つ目のドロップダウンメニューをクリックし、[すべてのページである]、[次である]、[次を含む]、[次の文字で始まる]、または[次のワイルドカードに一致]を選択し、条件を入力します。
- クエリーパラメーターに基づいて条件を設定するには、次の手順に従います。
- 最初のドロップダウンメニューをクリックし、[クエリーパラメーター]を選択します。
- 1つ目のテキストフィールドに、クエリーパラメーター名を入力します。
- 2つ目のテキストフィールドに、クエリーパラメーター値を入力します。
- 別のルールを追加するには、[ルールを追加]をクリックします。
- 特定のページ(プライバシー ポリシー ページなど)をポップアップフォームの対象から除外するには、[除外ルールを追加]をクリックします。
訪問者の情報および行動
ウェブサイトのターゲティングルールは、訪問者がトラッキング対象のコンタクトかどうかに基づいて、さらにカスタマイズできます。Marketing Hub ProfessionalおよびEnterpriseをご利用の場合は、ポップアップフォームの表示/非表示の条件を組み合わせるための追加のフィルターグループを作成できます。
以下の情報に基づいて、特定の訪問者に対するポップアップフォームの表示/非表示を切り替えることができます。
- セグメント化されたリスト:訪問者が特定のリストに含まれ、データベース内で追跡されているコンタクトかどうか。
- 訪問者:訪問者がデータベース内で追跡されているコンタクトか、新しい訪問者か。
- デバイスタイプ:訪問者がサイトの訪問時に使用しているデバイスのタイプ。
- ブラウザーの言語:訪問者がブラウザーの設定で選択している言語。
- 国:訪問者の現在のIPアドレスに基づく国情報。
- CTAクリック:訪問者が特定のCTAをクリックしたかどうか。
- 前回の訪問からの日数:訪問者が最後にウェブサイトを訪問してからの日数。
- フォーム閲覧:訪問者が特定のフォームを閲覧したかどうか。
- セッション数:訪問者がウェブサイト上で実行したアナリティクスセッションの数。
- 訪問ページ:訪問者が過去に特定のページURLを訪問したかどうか。
- リファーラルURL:訪問者が特定のページURLからウェブサイト経由でリンクされたかどうか。
- SEOトピック:訪問者がSEOツールで特定のトピックにリンクされたページまたはブログ記事を現在閲覧しているかどうか。
- SEOトピック履歴:訪問者がSEOツールで特定のトピックにリンクされたページを過去に閲覧したかどうか。
ターゲティングルールの詳細をご覧ください。
フィルターグループを作成するには、次の手順に従います。
- ポップアップフォームを表示するタイミングを選択します。
- [ポップアップを表示]タイルで、最初のドロップダウンメニューをクリックし、訪問者にポップアップフォームを表示するタイミングを選択します。
-
- 次のドロップダウンメニューをクリックして、フィルタリングルールを選択します。
- ポップアップフォームを表示するタイミングに関するルールを追加するには、[ルールを追加]をクリックしてフィルターを選択します。
- ポップアップフォームを非表示にするタイミングを選択します。
- [除外ルールを追加]をクリックします。
- 最初のドロップダウンメニューをクリックして、ポップアップフォームを非表示にするタイミングを選択します。
- 次のドロップダウンメニューをクリックして、フィルタリングルールを選択します。
- ポップアップフォームを非表示にするタイミングに関するルールを追加するには、[除外ルールを追加]をクリックしてフィルターを選択します。
- 別のフィルタリングルールを作成するには、[フィルターグループを追加]をクリックし、フィルタリングルールを選択します。
トリガー
ポップアップフォームがページに表示されるタイミングを設定します。次のオプションを選択できます。
- 50%ページをスクロールしたとき:訪問者がページを半分までスクロールした時点でフォームが表示されます。
- 離脱意図があるとき(ポップアップボックスのみ):訪問者がブラウザーウィンドウの上部バーにカーソルを移動すると、フォームが表示されます。
- 経過時間後:指定された秒数の後にフォームが表示されます。
複数のトリガーを選択すると、最初に満たされたトリガー条件に従ってフォームが表示されます。
右上にある[次へ]をクリックします。
注:コンタクトがポップアップフォームを入力すると、同じ閲覧セッションの中で再度ポップアップフォームが表示されることはありません。
7. オプション - ポップアップフォームをさらにカスタマイズする
[オプション]タブでは、以下のオプションをカスタマイズします。
- 予約設定(ProfessionalまたはEnterpriseをご利用の場合のみ):ポップアップフォームをスケジュール設定して、特定の日付以降にのみ有効にするには、[後の予定としてスケジュール設定]を選択します。
- 特定の日時にポップアップフォームを公開するには、[開始日] ドロップダウンメニューと[時間]ドロップダウンメニューを使用します。
- 特定の日時にポップアップフォームを非公開にするには、[非公開日時を設定]チェックボックスを選択し、[終了日]ドロップダウンメニューと[時間]ドロップダウンメニューを使用します。
- 画面サイズ(小):モバイルデバイスでポップアップフォームを無効にするには、[画面サイズ(小)のポップアップフォームをオフにする]チェックボックスを選択します。ポップアップフォームはモバイル環境にも最適化されていますが、モバイルでは無効にすることをお勧めします。
- 却下されたポップアップフォームをもう一度表示するまでの時間:ドロップダウンメニューをクリックして、ポップアップフォームを却下した訪問者にポップアップフォームを再表示するまでの経過が必要な時間を設定します。
- コンタクトをSalesforceキャンペーンに追加:Salesforce連携を使用している場合に、ドロップダウンメニューをクリックして、ポップアップフォームを送信したコンタクトを特定のSalesforceキャンペーンに関連付けます。
- GoToWebinarにコンタクトを追加:GoToWebinar連携を使用している場合に、ドロップダウンメニューをクリックして、特定のウェビナーのポップアップフォームを送信したコンタクトを登録します。
- コンタクトを獲得したときにEメール通知を送信:ドロップダウンメニューをクリックして、コンタクトが獲得された時点で通知を受け取るEメールアドレスを入力するか、ユーザーまたはチームを選択します。
- オプトインEメールを送信:ダブルオプトインが有効になっている場合に、ポップアップフォームのダブルオプトイン設定を管理するには、[設定で管理]をクリックします。
- フォローアップ サブスクリプション タイプ:GDPR設定が有効になっている場合、ドロップダウンメニューをクリックして、Eメール送信のサブスクリプションタイプを選択します。
- 新規コンタクトをEメールプロバイダーにプッシュする(任意):[設定で管理]をクリックして、獲得したコンタクトをプッシュするEメールプロバイダーを設定できます。コンタクトをMailChimpリストにプッシュする方法をご覧ください。
8. プレビュー - ポップアップフォームのプレビューを表示する
[プレビュー]タブでは、ポップアップフォームのプレビュー動作をテストできます。
- ポップアップフォームが別のデバイスに表示される方法を確認するには、左上の[デスクトップ]、[タブレット]または[モバイル]ボタンをクリックします。
- ポップアップフォームの各ステップを表示するには、leftright左/右の矢印アイコンをクリックします。
公開
右上の[公開]をクリックしてポップアップフォームを公開します。
関連記事
-
HubSpotコンテンツに動画を追加する
HubSpot動画は、リッチ テキスト モジュール内のページ、ブログ記事、およびナレッジベース記事上のコンテンツに追加できます。HubSpot動画は、ドラッグ&ドロップ ページ エディターとドラッグ&ドロップ...
ナレッジベース -
HubSpot以外のフォームを使用する
HubSpot以外のフォームとは、外部サイト上に設置された、HubSpot上で作成されていないHTMLフォームです。外部ページにHubSpotのトラッキングコード...
ナレッジベース -
外部サイト上にHubSpotフォームを埋め込み、スタイルを設定する
フォームツールを使用すると、ウェブサイトへの訪問者から情報を収集できるため、自社とやり取りを行った訪問者に対するマーケティング、販売、サービス提供が可能になります。HubSpot上でフォームを作成したら、...
ナレッジベース