Easily create mobile-optimized pop-up forms. Get started with HubSpot’s form  builder.

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

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

更新日時 2020年 7月 15日

対象製品

すべての製品とプラン

ポップアップフォームツールを利用すると、新規リードをアトラクトする (惹き付ける) リード獲得フォームを簡単に作成することができます。ポップアップフォームは、HubSpot でホストされているブログ記事、ランディングページまたはウェブサイトページで使用できます。外部ページにポップアップフォームを追加するには、外部サイトに HubSpot トラッキングコードをインストールするか、WordPress サイトに HubSpot WordPress プラグインをインストールする必要があります。

  • HubSpot アカウントから [フォーム] を開きます。
    • Professional および Enterprise のアカウントの場合、[マーケティング] > [リードの獲得] > [フォーム] の順に移動します。
    • Starter および Free アカウントの場合、[マーケティング] > [フォーム] の順に移動します。
  • 右上の [フォームを作成] をクリックします。
  • 左側のサイドバーで、[ポップアップフォーム]を選択します。
  • 右上にある [次へ] をクリックします。
  • ポップアップフォームの名前をカスタマイズするには、上部の edit鉛筆アイコンをクリックして名前を入力します。

1.タイプ - ポップアップフォームのタイプを選択する

タイプタブには以下の 3 種類のポップアップフォームがあり、[タイプ] タブで、作成するポップアップフォームのタイプを選択します:

  • ポップアップボックス: ページのポップアップボックスとして表示されます。
  • ドロップダウンバナー: ページ上部からドロップダウンバナーとして表示されます。
  • スライドインボックス左/右: ページの左下または右のスライドインボックスとして表示されます。

右上にある [次へ] をクリックします。

2.コールアウト - アクションを選択する

[コールアウト] タブで、訪問者の注意を引き出すためにコールアウトを追加し、カスタマイズします。

  • 注目の画像: (ポップアップボックスのみ) コールアウトとフォームの両方のステップに表示するサムネイル画像を選択します
  • コールアウトテキスト: コールアウトのメインヘッダー。
  • コールアウト本文: コールアウトの追加情報または詳細。任意
  • コールアウトボタンテキスト: コールアウトフォームのボタンテキスト。
  • テーマカラー: ポップアップフォームのボタンのテーマカラーを設定します。既定のをクリックするか、16 進値の横にあるカラーバブルをクリックしてグラジエントからカラーを選択するか、16 進値を入力します。
  • リンクボタン: コールアウトボタンのリンク先を選択します:
    • フォームステップ: ポップアップフォームからユーザーをフォームに誘導します。[フォーム] タブをクリックしてフォームをカスタマイズします。
    • 非 HubSpot URL: 外部ページへのリンクを貼り付けます。
    • HubSpot ページまたはブログ記事 (Marketing Hub StarterProfessional、Enterprise、CMS): ドロップダウンで HubSpot ページまたはブログ記事を選択します。
    • ファイルダウンロード: [ファイルを参照] をクリックしてファイルを追加します。
    • ミーティングリンク: ドロップダウンメニューからミーティングリンクを選択します。
    • カレンダーイベント: カレンダーイベントを作成し、イベント名開始日終了日タイムゾーン所在地、および詳細を設定します。イベントは、顧客の Google または Outlook カレンダー内に作成されます。

コールアウトのカスタマイズは、右側のプレビューに直ちに表示されるため、ページで公開されたときにポップアップフォームがどのように表示されるかを把握できます。

右上にある [次へ] をクリックします。

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

[フォーム] タブで、ポップアップフォームボタンをクリックしたときに訪問者が表示される内容をカスタマイズします。
  • [フォーム本文]: (任意) リードフローによって提供する価値について詳しくアピールするテキストを追加できます。
  • 追加されたフィールド: 既定の E メールフィールドは自動的に含まれます。
    • フォームに追加のフィールドを追加するには、[+別のフォームフィールドを追加] をクリックします。ポップアップフォームは、以下のフィールドタイプをサポートします:単行テキスト、複数行テキスト、ドロップダウン選択、単一チェックボックス、数値カッピッカー、ファイル (ポップアップフォームでカスタムコンタクトプロパティを作成できるのは Marketing Hub Starter、Professional、および Enterprise のみ)。
    • 鉛筆アイコン editをクリックすると、フィールドのラベルを編集したりプレースホルダーテキストを追加したりすることで、訪問者への見せ方をカスタマイズできます。E メールのフィールドには、ブロックする E メールアドレスやドメインを設定できます。
  • フォームボタンテキスト: [コールアウト] タブからフォームボタンテキストが自動的にこのフィールドに移動します。フォームステップでボタンテキストを変更するには、ここで更新してください。
  • 通知および同意/正当な利害関係 (GDPR): HubSpot アカウントで GDPR が有効になっている場合、このポップアップフォームの通知と同意のオプションを設定できます。既定のテキストをカスタマイズし鉛筆アイコン editをクリックします。
  • 言語: フォームの言語を設定します。これにより、フォームフィールドのラベル、通知と同意/正当な利害関係のメッセージ、フォームに表示されるエラーメッセージが表示されます。その他の編集可能なフィールドはすべて手動で翻訳する必要があります。
  • ライフサイクルステージの設定: ポップアップフォームを送信するライフサイクルステージのコンタクトを選択します。これは既定でリードに設定されています。
  • CAPTCHA: スパム送信に対する追加の保護を提供する CAPTCHA を有効にします。

pop-up-forms-edit-form

右上にある [次へ] をクリックします。

4.サンキュー- サンキューメッセージを作成する

[サンキュー] タブで、訪問者がポップアップフォームを送信した後に表示するサンキューメッセージを入力します。リッチテキストエディターを使って、提供するリソースやダウンロード用コンテンツへのリンク、簡易なフォーマットのテキストを設定できます。

ウェブページ、ファイルダウンロード、ミーティングリンクなどの訪問者をリダイレクトするサンキューメッセージの後にボタンを追加するためのもの。

  • [ボタンを追加] チェックボックスを選択します。
  • ボタンテキストをカスタマイズします。
  • [このボタンのリンク先を指定してください] の下で、ボタンのリンクを選択します:
    • 非 HubSpot URL: 訪問者を外部ページにリダイレクトします。ページの非 HubSpot URL を入力します。
    • HubSpot ページまたはブログ記事
    • (Marketing Hub StarterProfessional、Enterprise、CMS Hub): 訪問者を HubSpot ページまたはブログ記事の 1 つにリダイレクトします。[HubSpot ページまたはブログ記事を選択] ドロップダウンメニューをクリックし、公開済み HubSpot ページまたはブログ記事を選択します。
    • ファイルダウンロード: 訪問者をファイルダウンロードにリダイレクトします[ファイルを参照] をクリックして、画面右のファイルマネージャーからファイルを選択します。右下のペインの左下の新しいファイルをアップロードするには、downCarat [ファイルを追加] をクリックし、デバイス、Dropbox または Google Drive からファイルをアップロードします。
    • ミーティングリンク: 訪問者がミーティングリンクを使用して、チームとのミーティングをスケジュール設定できるようにします。 [ミーティングリンク] ドロップダウンメニューをクリックして既存のミーティングリンクを選択します。
    • カレンダーイベント: 訪問者が新しいカレンダーイベントを Google または Outlook カレンダーに追加できるようにする。イベント名、日付、時間、タイムゾーン、場所、詳細を入力します。

右上にある [次へ] をクリックします。

5.フォローアップ - フォローアップ E メールを作成する

[フォローアップ] のタブでは、[フォローアップ E メールを作成] をクリックしてフォーム送信後に訪問者が受け取るフォローアップ E メールを作成できます。

注:HubSpot CRM Free ユーザーがポップアップフォームでダブルオプトインを有効にするには、E メールセットアップウィザードを完了する必要があります。

  • 右のパネルで、フォローアップ E メールの詳細設定をカスタマイズします。
    • サブスクリプションタイプ: フォローアップ E メールのサブスクリプションタイプをクリックして選択します。
    • ユーザーから: フォローアップ E メールの送信者をクリックして選択します。
    • 件名欄: フォローアップ E メールの件名を追加します。
    • E メール本文: コンタクトとのエンゲージメントを持続させることに役立つ E メール本文を追加します。
    • [E メールのフッターを編集]: フッターをクリックし、E メール設定で会社名や住所をカスタマイズできます。

  • 完了したら、[保存] をクリックします。E メールの簡単なプレビューが表示されます。Marketing Hub StarterBasic (レガシー)、ProfessionalEnterprise のアカウントは [別の E メールを追加] をクリックすると、最大 3 件のフォローアップ E メールを追加できます。
  • 右上にある [次へ] をクリックします。

注: フォローアップ E メールを作成すると、フォームに CAPTCHA が自動的に追加されます。

6.ターゲティング - ポップアップフォームの表示場所をカスタマイズする

このポップアップフォームをサイトに表示するタイミングを選択して訪問者をターゲットにします。訪問者がポップアップフォームを表示する複数のルールを統合するためのフィルターを追加します。

ウェブサイト URL

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

  • ウェブサイト URL に基づいて条件を設定するには、次の手順を実行します。
    • 最初のドロップダウンメニューをクリックし、[ウェブサイト URL] を選択します。
    • 2 つ目のドロップダウンメニューをクリックし、すべてのページである次の条件である次を含む次で始まる、または次のワイルドカードに一致を選択し、条件を入力します。
 
クエリパラメータ値に基づいてポップアップフォームを表示するターゲットルールを設定することもできます。たとえば、URL が UTM キャンペーンのパラメーター ebook オファーを含むページにポップアップフォームを表示するには、ルール utm_campaign = ebook_offer を入力します。
  • クエリパラメータに基づいて条件を設定するには、次の手順を実行します。
    • 最初のドロップダウンメニューをクリックし、[クエリパラメーター] を選択します。
    • 1 つ目のテキストフィールドに、クエリパラメーター名を入力します。
    • 2 つ目のテキストフィールドに、クエリパラメーター値を入力します。
  • 別のルールを追加するには、[ルールを追加] をクリックします。
  • 特定のページでポップアップフォーム (プライバシーポリシーページなど) を除外するには、[除外ルールを追加] をクリックします。
 
ターゲッティングルールの詳細を確認してください。

訪問者の情報および行動

ウェブサイトのターゲッティングルールは、訪問者がトラッキング対象のコンタクトかどうかに基づいて、さらにカスタマイズできます。Marketing Hub Professional、および Enterprise アカウントでは、ポップアップフォームを表示にするか非表示にするかを決めるためのルールを統合する追加のフィルターグループを作成できます。

以下の情報に基づいて、特定の訪問者に対するポップアップフォームの表示/非表示を切り替えることができます:

  • セグメント化されたリスト: 訪問者が特定のリストメンバーシップを含むデータベース内の追跡対象コンタクトであるかどうか。
  • 訪問者: 訪問者がデータベース内の追跡対象コンタクトか新しい訪問者か。
  • デバイスタイプ: 訪問者がサイトを訪問するときに使用するデバイスのタイプ。
  • ブラウザーの言語: 訪問者がブラウザーの設定で選択した言語。
  • 国: 現在の IP アドレスに基づく訪問者の出身国。
  • クリックされた CTA が次である: 訪問者が特定の CTA をクリックしたかどうか。
  • 前回の訪問からの日数: 訪問者が最後にウェブサイトを訪問してからの日数。
  • 閲覧されたフォームが次である: 訪問者が特定のフォームを閲覧したかどうか。
  • セッション数: 訪問者がウェブサイト上で実行したアナリティクスセッションの数。
  • 訪問されたページ: 訪問者が過去に特定のページ URL を訪問したかどうか。
  • リファーラル URL: 訪問者が特定のページ URL からウェブサイトにリンクされたかどうか。
  • SEO トピック: 訪問者が SEO ツールで特定のトピックにリンクされたページまたはブログ記事を現在閲覧しているかどうか。
  • SEO トピック履歴: 訪問者が SEO ツールで特定のトピックにリンクされたページを過去に閲覧したかどうか。

ターゲッティングルールの詳細を確認してください。

フィルターグループを作成するには、次のようにします:

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

add-filter-groups

トリガー

ポップアップフォームがページに表示されるタイミングを設定します。次のオプションを選択できます:

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

複数のトリガーを選択すると、最初に満たされたトリガー条件に従ってフォームが表示されます。

右上にある [次へ] をクリックします。

注: コンタクトがポップアップフォームを入力したなら、同じ閲覧セッションの中で再度ポップアップフォームが表示されることはありません。 

7.オプション - ポップアップフォームをさらにカスタマイズする 

[オプション] タブで、以下のオプションをカスタマイズします:

  • 予約設定 (Professional アカウントおよび Enterprise アカウントのみ): ポップアップフォームをスケジュール設定して、特定の日付からのみアクティブにするには、[後でスケジュール設定] を選択します。
    • 特定の日時にポップアップフォームを公開するには、[開始日] ドロップダウンメニューと時間ドロップダウンメニューを使用します。
    • 特定の日時にポップアップフォームを非公開にするには、[非公開日時を設定] チェックボックスを選択し、[終了日] ドロップダウンメニューと [時間] ドロップダウンメニューを使用します。
  • 小さな画面サイズ: モバイルデバイスでポップアップフォームを無効にするには、小さな画面サイズチェックボックスで [Turn off] ポップアップフォームを選択します。ポップアップフォームはモバイル最適化されていますが、モバイルを無効にすることをお勧めします
  • 却下されたポップアップフォームを再度表示する:ドロップダウンメニューをクリックして、訪問者がポップアップフォームを再び見る前にポップアップフォームを却下した時間を設定します。
  • コンタクトを Salesforce キャンペーンに追加する:Salesforce 統合を使用している場合は、ドロップダウンメニューをクリックして、Salesforce キャンペーンを使用してポップアップフォームを送信するコンタクトを関連付けます。
  • コンタクトを GoToWebinar に追加する:GoToWebinar 統合を使用している場合は、ドロップダウンメニューをクリックして、特定のウェビナーのポップアップフォームを送信するコンタクトを登録します。
  • コンタクトが取得されたら E メール通知を送信します: ドロップダウンメニューをクリックして E メールアドレスを入力するか、コンタクトが獲得された時点で通知を受信するユーザーまたはチームを選択します。
  • オプトインの E メールを送信する: ダブルオプトインが有効になっている場合、ポップアップフォームのダブルオプトイン設定を管理するには、[設定で管理] をクリックします。
  • フォローアップのサブスクリプションタイプ: GDPR 設定が有効になっている場合、ドロップダウンメニューをクリックして、E メール送信のサブスクリプションタイプを選択します。
  • [新規コンタクトを E メールプロバイダーにプッシュする (任意)] [設定で管理] をクリックすると、獲得したコンタクトをプッシュするEメールプロバイダーを設定できます。コンタクトを MailChimp リストにプッシュする方法についてもっと詳しく説明します
右上にある [次へ] をクリックします。
 

8.プレビュー - ポップアップフォームのプレビューを表示する

[プレビュー] タブで、ポップアップフォームのインタラクティブプレビューをテストできます。

  • ポップアップフォームが別のデバイスに表示される方法を確認するには、左上の [デスクトップ][タブレット] または [モバイル] ボタンをクリックします。
  • ポップアップフォームの各ステップを表示するには、leftright左/右矢印アイコンをクリックしますt

公開

右上の [公開] をクリックしてポップアップフォームを公開します。

New Call-to-action

/jp/pop-up-forms/create-pop-up-forms