【HubSpot】フォームに確認画面を付ける方法｜標準機能の限界と実装例

日本のお問い合わせフォームや資料請求フォームでは、送信の前に「入力内容の確認画面」を出すのが一般的です。ところが、HubSpotのフォームには確認画面を出す設定がありません。この記事では、HubSpotのフォームで確認画面を付けたいときに、標準機能でできること・できないことを整理し、確認画面を付ける方法を比べて紹介します。

確認画面が求められる理由

確認画面は、送信する前に、入力した内容を一覧で見直してもらうための画面です。日本のフォームでよく使われるのは、次のような理由からです。

• 入力の誤りに気づいてもらえる：メールアドレスや電話番号の打ち間違いに、送信する前に気づいてもらえます。メールアドレスが間違っていると、お礼のメールや資料が届かず、連絡も取れなくなります
• 送信する方が安心できる：「何を送ったか」を確かめてから送れるため、特に法人のお問い合わせや見積もり依頼では、確認画面があることが当たり前と考える方も多くいます
• 社内の規定やこれまでのサイトに合わせる：これまでのサイトのフォームに確認画面があった場合や、社内のウェブサイトの規定で確認画面を求められている場合、HubSpotに移したときにも同じ形を求められます

一方で、確認画面はひと手間増えるため、入力の途中でやめる方が増えるという考え方もあります。フォームの目的や、入力してもらう項目の多さに合わせて、付けるかどうかを決めてください。

HubSpotの標準機能でできること・できないこと

HubSpotのフォームでは、入力内容のチェックや、送信後の表示は標準機能で設定できます。ただし、送信の前に入力内容を一覧で見せる機能はありません。

フォームを複数のステップに分けて、最後のステップに「入力内容をご確認ください」と書くことはできます。ただし、標準機能だけでは、そのステップに入力した内容は表示されません。ステップを戻って確かめてもらうことになり、確認画面とは言いにくい形になります。

HubSpot
導入支援・保守運用のサービス資料

• Sales Hub・Marketing Hub の導入支援プラン
• 導入後の保守・運用支援とお見積りの例

初期導入支援の
資料を見る保守運用の
資料を見る

確認画面を付ける方法

HubSpotのフォームに確認画面を付けるには、主に次の3つの方法があります。

HubSpotのフォームの機能や、送信後の流れ（通知、ワークフロー、リードの記録）をそのまま使いたい場合は、3つ目の方法が手軽です。

確認画面を付ける無償ツール

ハレフルでは、HubSpotのフォームに確認画面を付ける無償ツール「フォームの確認画面」を、add apps（HubSpotを日本の商習慣に合わせて使いやすくする小さな部品のシリーズ）の1つとして公開しています。

• フォームの最後のステップで、入力内容を一覧で表示します
• 一覧に出す項目、表示名、並び順を選べます
• ドロップダウン・ラジオボタン・チェックボックスの項目は、選んだ選択肢の表示名で表示します
• 入力がない項目は「（未入力）」と表示します。表示する文言は変えられます
• 入力に戻るボタンと送信のボタンは、HubSpotのフォームの標準のボタンです。送信後の動き（お礼の表示、通知、ワークフローなど）は今までどおりです
• 入力内容を外部に送ることはありません。確認画面の表示は、ご覧になっているブラウザの中だけで行います

導入の流れ

1. HubSpotでフォームを2ステップ以上にし、最後のステップには項目を置かず、「入力内容をご確認ください」と書いたリッチテキストだけを置きます
2. add appsの設定ページに、HubSpotでフォームを開いたときのURLを貼り付けて読み取り、確認画面に出す項目を選んでコードを作ります
3. フォームを置いたページの「設定」→「詳細」→「HeadのHTML」にコードを貼り付けて、ページを更新（公開）します

コードを貼り付けずに、ページにモジュールを置いて使うこともできます。モジュール版はHubSpotのテンプレートマーケットプレイスで公開しています。詳しい手順はご利用ガイドをご覧ください。

使える条件

確認画面を付けるときの注意点

• 入力内容のチェックはフォームの設定で行う：確認画面は、入力内容を見直してもらうための画面です。必須項目や入力の形式のチェックは、これまでどおりHubSpotのフォームの設定で行ってください
• ボタンの名前を分かりやすくする：最後のステップのボタンの名前は、「修正する」「送信する」のように、押すと何が起きるかが分かる名前に変えておくと迷われにくくなります
• 項目を変えたらコードを作り直す：フォームの項目やステップを変えたときは、設定ページでコードを作り直して、貼り替えてください
• 送信後のメールと組み合わせる：確認画面に加えて、入力内容を載せたお礼のメールも送ると、送信した方の手元に記録が残ります

よくある質問

確認画面を付けると、送信のデータやワークフローに影響はありますか？

ありません。送信はHubSpotのフォームの標準のボタンで行うため、送信のデータの記録、通知、ワークフローなどは今までどおりに動きます。

「旧フォームエディター」で作ったフォームで使いたいです。

この無償ツールは、「フォームエディター」で作ったフォームが対象です。旧フォームエディターのフォームで使う場合は、フォームエディターでフォームを作り直してください。

HubSpot以外のサイトにフォームを埋め込んでいます。使えますか？

この無償ツールは、HubSpotのランディングページ・ウェブサイトページに置いたフォームが対象です。HubSpot以外のサイトに埋め込んだフォームでは使えません。

まとめ

HubSpotのフォームには、送信の前に入力内容を一覧で見せる確認画面の設定はありません。フォームを複数のステップに分けることはできますが、標準機能だけでは入力内容を表示できません。HubSpotのフォームの機能や送信後の流れをそのまま使いながら確認画面を付けたい場合は、最後のステップに入力内容の一覧を出す部品を使う方法が手軽です。フォームの目的に合わせて、確認画面を付けるかどうかを決めてください。

ハレフルへのご相談

株式会社ハレフルは、HubSpotの導入・運用支援と、HubSpotを日本の商習慣に合わせて使いやすくする無償ツール「add apps」の提供を行っています。「これまでのサイトと同じように確認画面を付けたい」「フォームに郵便番号からの住所の入力やふりがなの自動入力も付けたい」といったご相談をお受けしています。

日本向けのフォームで確かめたい項目は、HubSpotフォームを日本向けにする設定チェックリストにまとめています。add appsの一覧はadd appsのページで、HubSpotの導入・運用支援はHubSpot導入支援のページでご紹介しています。

まずはお気軽にお問い合わせください。