add apps 1

フォームの確認画面ご利用ガイド

HubSpot のフォームに、送信前の「入力内容の確認画面」を追加します。設定ページで作ったコードを、フォームを置いたページに貼り付けるだけで使えます。

提供: 株式会社ハレフル（add apps）
料金: 無償
版: 1.0.0

できること

フォームの最後のステップで、入力内容を一覧で表示します
一覧に出す項目、表示名、並び順を選べます
ドロップダウン・ラジオボタン・チェックボックスの項目は、選んだ選択肢の表示名で表示します
入力がない項目は「（未入力）」と表示します（表示する文言は変更できます）
「修正する」で入力に戻り、「送信する」で送信します。どちらも HubSpot フォームの標準のボタンです

使える条件

対象	使えるか
「フォームエディター」で作ったフォーム	使えます
「旧フォームエディター」で作ったフォーム	使えません
HubSpot のランディングページ・ウェブサイトページに置いたフォーム	使えます
HubSpot 以外のサイトに埋め込んだフォーム	使えません
フォームの共有リンク（フォームだけを開く URL）	使えません

ご注意

フォームを 2 ステップ以上 にする必要があります。最後のステップを確認画面として使います（準備の手順は下記）
送信を止める機能ではありません。入力内容のチェックは、HubSpot フォームの設定（必須項目など）で行ってください
入力内容を外部に送ることはありません。確認画面の表示は、ご覧になっているブラウザの中だけで行います

導入の手順

STEP 1

フォームを 2 ステップにする

HubSpot でフォームの編集画面を開きます
ステップを追加し、2 ステップ以上にします
最後のステップには項目を置かず、リッチテキストを 1 つだけ置いて「入力内容をご確認ください」と書きます。この文言の位置に、入力内容の一覧が表示されます
最後のステップのボタン名を、必要に応じて「修正する」「送信する」などに変えます
フォームを公開します

STEP 2

設定ページでコードを作る

設定ページを開きます
HubSpot でフォームを開いたときの、ブラウザのアドレス欄の URL（https://app.hubspot.com/forms/… または https://app.hubspot.com/submissions/… で始まるもの）を貼り付け、「読み取る」を押します
「フォームの確認」がすべて OK になっていることを確かめます。「要対応」が出た場合は、表示された案内に沿ってフォームを直し、もう一度読み取ってください
確認画面に出す項目を選びます。表示名の書き換え、並べ替えもできます
「コードをコピー」を押します

STEP 3

ページに貼り付ける

HubSpot で、フォームを置いたページの編集画面を開きます
「設定」→「詳細」→「HeadのHTML」に、コピーしたコードを貼り付けます。コードは長くなりますが、途中で切らずに全部を貼り付けてください
ページを更新（公開）します
公開したページで、入力して次のステップに進み、確認画面が表示されることを確かめます

見た目の調整

設定ページの「標準の見た目を使う」をオンにすると、区切り線などの簡単な見た目が付きます。オフにすると、ページの CSS だけで見た目を整えられます。標準の見た目はサイトの CSS より弱く設定しているため、サイトの CSS が常に優先されます。

調整に使えるクラス名

クラス名	対象
`kp-confirm`	確認画面の全体
`kp-confirm-heading`	一覧の見出し
`kp-confirm-list`	一覧
`kp-confirm-row`	1 項目の行
`kp-confirm-label`	項目名
`kp-confirm-value`	入力内容

1 つのページに複数のフォームがある場合

フォームごとに設定ページでコードを作り、すべて「HeadのHTML」に貼り付けてください。

項目を追加した、更新した場合は

フォームの項目を追加したり、更新したりしたときは、設定ページでコードを作り直し、「HeadのHTML」のコードを貼り替えてください。add apps の新しい版も、作り直したコードに含まれます。

困ったとき

確認画面が表示されない

フォームが 2 ステップ以上になっているか、最後のステップに「入力内容をご確認ください」のリッチテキストがあるかを確認してください
フォームが「フォームエディター」（「旧フォームエディター」ではない方）で作られているかを確認してください
コードが途中で切れずに全部貼り付けられているか、ページを更新（公開）したかを確認してください
フォームの項目やステップを変えた場合は、設定ページでコードを作り直してください

動作の記録を見る

ページの URL の末尾に ?kp_debug=1 を付けて開くと（すでに ? がある場合は &kp_debug=1）、ページの下部に動作の記録が表示されます。お問い合わせの際は、この記録を添えてください。

ご利用にあたって

無償・無保証で提供しています
HubSpot の仕様変更により、動かなくなる場合があります
本ツールの利用により生じた損害について、当社は責任を負いません

設定ページを開く

Contact

add apps のお問い合わせ

使い方がわからないとき、うまく動かないとき、
ご要望はこちらからご連絡ください。

お問い合わせ

フォームの確認画面 ご利用ガイド