ポップアップフォームを作成する
更新日時 2023年 1月 19日
対象製品
すべての製品とプラン |
ポップアップ フォーム ツールを利用して、新しいリードを惹き付けるリード情報の収集フォームを作成できます。ポップアップフォームは、HubSpotでホスティングしている任意のブログ記事、ランディングページ、ウェブサイトのページで利用できます。
外部ページにポップアップフォームを追加するには、外部サイトにHubSpotトラッキングコードをインストールするか、WordPressサイトにHubSpot WordPressプラグインをインストールする必要があります。
ポップアップフォームを作成する
新しいポップアップフォームを作成するには:- HubSpotアカウント上で、[フォーム]を開きます。
- ProfessionalまたはEnterpriseをご利用の場合、[マーケティング]>[リード情報の収集]>[フォーム]の順に進みます。
- Starterまたは無料版をご利用の場合、[マーケティング]>[フォーム]の順に進みます。
- 右上の[フォームを作成]をクリックします。
- フォームをビジネスユニット(「ビジネスユニット追加オプション」のみ)と関連付けるには:
- [ビジネスユニットを選択]ドロップダウンメニューをクリックします。
- このフォームを関連付けたいビジネスユニットを選択します。
- フォームタイプを選択します。ポップアップフォームを作成するには、次のフォームタイプのいずれかを選択します。
- ポップアップボックス
- ドロップダウンバナー
- スライドインボックス(左)
- スライド イン ボックス(右)
- 右上にある[次へ]をクリックします。
- フォームエディターの上部 にある[ 鉛筆の編集]アイコンを クリックして、フォーム名を編集します。
吹き出しを設定する
[コールアウト]タブでは、訪問者の注意を喚起するためのコールアウトを追加し、カスタマイズします。コールアウトのカスタマイズは右側のプレビューに表示されるため、ページで公開されたときにポップアップフォームがどのように表示されるかを把握できます。
- アイキャッチ画像:吹き出しとフォームステップの両方に表示するアイキャッチ画像を選択します(ポップアップボックスとスライドインボックスのみ)。
- 吹き出しテキスト:吹き出しのメインヘッダーのテキストを入力します。
- 吹き出し本文:吹き出しに追加情報または詳細を入力します。(任意)
- 吹き出しボタンのテキスト:吹き出しフォームのボタンのテキストを入力します。
- テーマカラー:ポップアップフォームのボタンのテーマカラーを設定します。カラーピッカーからカスタム色を選択するか、16進数の値を手動で入力します
- リンクボタン:コールアウトボタンのリンク先を選択します。
- フォームステップ:ポップアップフォームからユーザーをフォームに誘導します。[フォーム]タブをクリックしてフォームをカスタマイズします。
- 非HubSpot URL :外部ページへのリンクを入力します。
- HubSpotページまたはブログ投稿( Marketing HubまたはCMS Hub S tarter、Professional、またはEnterprise ) :ドロップダウンでHubSpotページまたはブログ投稿を選択します。
- ファイルダウンロード:[ファイルを参照]をクリックしてファイルを追加します。
- ミーティングリンク:ドロップダウンメニューからミーティングリンクを選択します。
- カレンダーイベント:カレンダーイベントを作成し、イベントの詳細を設定します。イベントは、顧客のGoogleまたはOutlookカレンダーに作成されます。
ポップアップフォームをカスタマイズ
吹き出しボタンがフォームステップにリンクしている場合は、表示されるフォームをカスタマイズできます。 [フォーム]タブで、次の詳細をカスタマイズします。- フォーム本文:フォームフィールドの前に表示される追加情報または詳細を入力します。これはオプションの手順です。
- 追加フィールド:ポップアップフォームのフィールドを選択します。デフォルトのメールフィールドは自動的に含まれ、フォームに追加できるフィールドは最大4つです。
- フォームにフィールドを追加するには、[+別のフォームフィールドを追加]をクリックします。
- ポップアップフォームでサポートされているフィールドタイプは、単行テキスト、複数行テキスト、ドロップダウン選択、単一チェックボックス、数値、日付入力、ファイルです。
- 「Marketing Hub Starter」、「Professional」、および「Enterprise」アカウントのユーザーは、ポップアップフォーム内にカスタム コンタクト プロパティーを作成できます。
- 訪問者に対するフォームフィールドの表示方法をカスタマイズするには、edit鉛筆アイコンをクリックします。
- フィールドのラベルを編集したり、プレースホルダのテキストを追加したり、デフォルト値を入力したりできます。
- Eメールのフィールドには、ブロックするEメールアドレスやドメインを設定できます。
- フォームにフィールドを追加するには、[+別のフォームフィールドを追加]をクリックします。
- フォームボタンのテキスト:フォームボタンのテキストをカスタマイズします。デフォルトでは、[吹き出し]タブのフォームボタンテキストがこのフィールドに入力されます。
- 通知と同意/正当な利害関係(GDPR):HubSpotアカウント上でGDPRが有効化されている場合、このポップアップフォームの通知と同意のオプションを設定できます。既定のテキストをカスタマイズするには、edit鉛筆アイコンをクリックします。
- 言語:フォームの言語を設定します。これにより、フォームフィールドのラベル、通知と同意/正当な利害関係のメッセージ、フォームに表示されるエラーメッセージが変更されます。編集可能なその他すべてのフィールドは、手動で翻訳する必要があります。
- CAPTCHA : CAPTCHAを有効にして、スパム送信に対する追加の保護を提供します。
フォームサンキューメッセージを作成する
吹き出しボタンがフォームステップにリンクしている場合は、[ありがとうございます]タブで訪問者がポップアップフォームを送信した後に何が起こるかを設定します。
- [ありがとうございます]メッセージフィールドに、訪問者がポップアップフォームを送信した後に表示するメッセージを入力します。リッチテキストエディタを使用して、テキストを書式設定できます。
- サンキューメッセージの後に訪問者を別の場所にリダイレクトするためのボタンを追加するには、次の手順に従います。
- [ボタンを追加]チェックボックスを選択します。
- ボタンテキストをカスタマイズします。
- ボタンのリンク先を選択します。
- HubSpot以外のURL:訪問者を外部ページにリダイレクトします。ページのURLを入力します。
- HubSpotページまたはブログ投稿( Marketing HubまたはCMS Hub S tarter、Professional、またはEnterprise ) :ドロップダウンメニューからHubSpotページまたはブログ投稿を 選択します。
- ファイルダウンロード:[ファイルを参照]をクリックし、ファイルを追加します。
- ミーティングリンク:ドロップダウンメニューからミーティングリンクを選択します。
- カレンダーイベント:カレンダーイベントを作成し、イベントの詳細を設定します。イベントは、顧客のGoogleまたはOutlookカレンダーに作成されます。

注意: HubSpotの無料ツールを使用するアカウントは、ポップアップフォームのダブルオプトインを有効にするためにメール設定ウィザードを完了する必要があります。フォローアップメールを作成すると、フォームに自動的にキャプチャが追加されます。
ポップアップフォームのターゲティングをカスタマイズする
このポップアップフォームをサイトに表示するタイミングを選択して訪問者のターゲティングを行います。複数のルールセットを組み合わせてポップアップフォームが表示されるタイミングを決定するddフィルタ。ターゲティングルールの詳細をご覧ください。
ウェブサイトURL
特定のウェブページURLや、クエリーパラメーター値の条件付きロジックを追加できます。既定では、ポップアップフォームがすべてのページに表示されます。
- 訪問者が特定のウェブサイトURLにアクセスしたときにポップアップフォームを表示するには、[ウェブサイトURL]セクションで、次の手順に従います。
- 最初のドロップダウンメニューをクリックし、[ウェブサイトURL]を選択します。
- 2つ目のドロップダウンメニューをクリックし、ターゲティングルールを選択します。
- テキストフィールドにルール条件を入力します。
- 訪問者がURLに特定のクエリーパラメーターが含まれるウェブサイトページにアクセスしたときにポップアップフォームを表示するには、次の手順に従います。
- 最初のドロップダウンメニューをクリックし、[クエリーパラメーター]を選択します。
- 1つ目のテキストフィールドに、クエリーパラメーター名を入力します。
- ドロップダウンをクリックし、ターゲッティングルールを選択します。
- 2番目のテキストフィールドに、クエリパラメータ値を入力します。

- 別のルールを追加するには、[ルールを追加]をクリックします。
- 特定のページ(プライバシーポリシーページなど)からポップアップフォームを除外するには、[除外ルール を追加]をクリックします。
訪問者の情報および行動(任意)
既知の訪問者の情報と行動に基づいて、ポップアップフォームを表示する対象のコンタクトを限定することもできます。追加できるフィルタリングルールのタイプは、アカウントのサブスクリプションによって異なります。「Marketing Hub Professional」および「Enterprise」アカウントでは、ポップアップフォームを表示または非表示にする条件を追加したフィルターを作成できます。
訪問者情報に基づいて条件を設定するには、[訪問者の情報および行動]セクションに進み、次の手順に従います。
- ポップアップフォームを表示するタイミングを選択します。
- ポップアップタイルを表示するには、最初のドロップダウンメニューをクリックして、ポップアップフォームが表示されるタイミングを選択します。
-
- 次のドロップダウンメニューをクリックして、フィルタリングルールを選択します。
- ポップアップフォームを表示するタイミングに関するルールを追加するには、[ルールを追加]をクリックしてフィルターを選択します。
- ポップアップフォームを非表示にするタイミングを選択します。
- [除外ルールを追加]をクリックします。
- 最初のドロップダウンメニューをクリックして、ポップアップフォームを非表示にするタイミングを選択します。
- 次のドロップダウンメニューをクリックして、フィルタリングルールを選択します。
- ポップアップフォームを非表示にするタイミングに関するルールを追加するには、[除外ルールを追加]をクリックしてフィルターを選択します。
- フィルタリングルールの別のセットを作成するには、[フィルタグループの追加]をクリックして、フィルタリングルールを選択します。
トリガー
ポップアップフォームがページに表示されるタイミングを設定します。
注:
-
複数のトリガーを選択すると、最初に満たされたトリガー条件に従ってフォームが表示されます。
-
連絡先がポップアップフォームに入力した場合、連絡先が同じ閲覧セッションにある場合は、そのフォームは再び表示されません。
次のオプションを選択できます。
- 50%ページをスクロールしたとき:訪問者がページを半分までスクロールした時点でフォームが表示されます。
- 離脱意図があるとき(ポップアップボックスのみ):訪問者がブラウザーウィンドウの上部バーにカーソルを移動すると、フォームが表示されます。
- 経過時間の後:指定された秒数後にフォームが表示されます。
ポップアップフォームのオプションをカスタマイズする
[オプション]タブで、ポップアップフォームの設定をさらにカスタマイズします。HubSpotサブスクリプションと追加した統合によっては、一部のオプションが表示されない場合があります。次のオプションを設定できます。
- スケジュール(プロフェッショナルアカウントまたはエンタープライズアカウントのみ) :デフォルトでは、ポップアップフォームがすぐに公開されます。ポップアップフォームが特定の日付からのみアクティブになるようにスケジュールするには、後でスケジュールを選択します。
- 特定の日時にポップアップフォームを公開するには、[開始日]ドロップダウンメニューと[時間]ドロップダウンメニューをクリックし、日付、時刻をそれぞれ設定します。
- 特定の日時にポップアップフォームを非公開するには、[非公開の日時を設定]ドロップダウンメニューをクリックし、[終了日]ドロップダウンメニューと[時間]をクリックし、日付、時刻をそれぞれ設定します。
- 取引先責任者または会社が作成されたときにライフサイクルステージを設定します。[ライフサイクルステートをドロップダウンメニューに設定]をクリックし、ライフサイクルステージを選択します。訪問者がフォームを送信すると、対応するレコードが選択したライフサイクルステージに設定されます。
- レコードのライフサイクルステージを後方に移動することはできません。既存の取引先責任者またはライフサイクルステージのある会社がフォームを送信した場合、ライフサイクルステージは更新されません。
-
- フォームに設定されたライフサイクルステージは、HubSpot設定で設定されたデフォルトのライフサイクルステージを上書きします。
- 画面サイズ(小):モバイルデバイスでポップアップフォームを無効にするには、[画面サイズ(小)のポップアップフォームをオフにする]チェックボックスをオンにします。ポップアップフォームはモバイル環境にも最適化されていますが、モバイルでは無効にすることをお勧めします。
- 非表示のポップアップフォームをもう一度表示する:ドロップダウンメニューをクリックして、訪問者がポップアップフォームを非表示にした後、再び表示される前に経過する時間を設定します。
- コンタクトをSalesforceキャンペーンに追加:Salesforce連携を使用している場合に、ドロップダウンメニューをクリックして、ポップアップフォームを送信したコンタクトを特定のSalesforceキャンペーンに関連付けます。
- GoToWebinarにコンタクトを追加:GoToWebinar連携を使用している場合に、ドロップダウンメニューをクリックして、特定のウェビナーのポップアップフォームを送信したコンタクトを登録します。
- 連絡先がキャプチャされたら、次の場所に電子メール通知を送信します。連絡先がキャプチャされたら、ドロップダウンメニューをクリックしてHubSpotユーザーまたはチームに通知します。
- オプトインの E メールを送信する:ポップアップフォームのダブルオプトイン設定を管理するには、[設定で管理]をクリックします。
- マーケティング連絡先として作成された連絡先を設定します。HubSpotアカウントがマーケティング連絡先にアクセスできる場合は、このフォームから作成された連絡先を自動的にマーケティングとして設定できます。
- 新規コンタクトをEメールプロバイダーにプッシュする(任意):[設定で管理]をクリックして、獲得したコンタクトをプッシュするEメールプロバイダーを設定できます。コンタクトをMailChimpリストにプッシュする方法をご覧ください。

ポップアップフォームで自動化を使用する
連絡先にフォローアップメールを送信したり、ポップアップフォームと共に自動的に内部メール通知を送信したりするなど、簡単な自動化機能を使用します。フォームのサブミッションは、シンプルなワークフローでトリガーとして使用することもできます。フォームツールで自動化を使用する方法について詳しくは、こちらをご覧ください。
- 上部にある[Automations(自動化)]タブをクリックします。[Automations(自動化)]タブから、フォーム送信後の動作を設定することができます。
- 「フォーム送信後の動作を選択」セクションで、必要に応じてフォームの設定をカスタマイズしてください。
- [シンプルなワークフローの作成]セクションで、メールの送信や連絡先プロパティの設定などのフォローアップアクションを自動化するシンプルなワークフローを設定します。
ポップアップフォームをプレビュー
[プレビュー]タブでは、ポップアップフォームのプレビュー動作をテストできます。
- ポップアップフォームがどのように異なるデバイスに表示されるかを確認するには、左上にある[デスクトップ]、[タブレット]、または[モバイル]ボタンをクリックします。
- ポップアップフォームの各ステップを表示するには、左右の矢印アイコンをクリックします。
ポップアップフォームを公開/非公開にする
- フォームのセットアップが完了したら、右上の[公開]をクリックしてポップアップフォームを公開します。
- [オプション]タブで、公開されているフォームを非公開にすることもできます。
- [オプション]タブに移動します。
- [非公開]をクリックします。
- ダイアログボックスで[ポップアップフォームを非公開]をクリックします。
- フォームを非公開にした後、[ダッシュボードに移動]を選択してフォームダッシュボードに戻るか、[エディターに留まる]を選択してフォームエディターに留まるかを選択できます。
Thank you for your feedback, it means a lot to us.