フォームの確認画面 ご利用ガイド（テンプレートマーケットプレイス版）

• 2 ステップ以上のフォームの最終ステップ（送信ボタンのあるステップ）の先頭に、入力内容を一覧で表示します
• 一覧に出す項目と表示名、並び順を決められます。決めない場合は、フォームのすべての項目（同意のチェックを除く）をフォームの並び順で表示します
• ドロップダウン・ラジオボタン・チェックボックスの項目は、選んだ選択肢の表示名で表示します。複数選んだ項目は「、」で区切って表示します
• 入力がない項目は「（未入力）」と表示します（表示する文言は変更できます）
• 一覧の上に見出しを付けられます
• 確認画面を表示している間と送信後は、ほかの add apps の入力部品（「希望日ピッカー」「グループ選択」など）を操作できないようにします
• 入力に戻るときは「戻る」、送信するときは「送信」を押します。どちらも HubSpot フォームの標準のボタンです

送信は HubSpot フォームの標準のボタンで行い、送信後の動き（お礼の表示、通知、ワークフローなど）は今までどおりです。

ご注意

• フォームを 2 ステップ以上 にする必要があります。最終ステップを確認画面として使います（準備の手順は下記）。1 ステップのフォームでは、確認画面は表示されません
• 最終ステップには、入力の項目を置かないでください。同意のチェックなど、確認したあとに操作するものだけを置きます。最終ステップで入力した内容は、一覧には反映されません
• 非表示の項目は、標準の設定では一覧に表示されます（URL から受け取った値などを確かめるためです）。非表示の項目にはフォーム上のラベルがないため、項目名にはプロパティの内部名が表示されます。わかりやすい名前で表示するには、「表示する項目」に追加して表示名を入れてください。一覧に出さないときは、詳細設定の「非表示の項目も表示する」をオフにしてください
• 送信を止める機能ではありません。入力内容のチェックは、HubSpot フォームの設定（必須項目など）で行ってください
• 入力内容を外部に送ることはありません。確認画面の表示は、ご覧になっているブラウザの中だけで行います
• 「入力補助」（add apps 2）・「グループ選択」などほかの add apps と一緒に使えます。「入力補助」で入力した電話番号は入力されたままの表記で、「グループ選択」で選んだ選択肢は表示名で、一覧に表示されます
• 1 つのページに複数のフォームを置いた場合は、フォームごとにモジュールを 1 つずつ置き、それぞれの設定欄でフォームを選んでください
• お使いのテーマ・テンプレートはそのまま使えます。ページのドラッグ＆ドロップのエリアにモジュールを置いてください。ドラッグ＆ドロップのエリアがないテンプレートでは、モジュールを置けません
• 見た目はサイトの CSS が優先されます。ただし、テーマが独自の JavaScript でフォームの見た目や動きを大きく作り変えている場合は、正しく表示されないことがあります
• 同じフォームに、同じ add apps を 2 つ以上入れないでください（モジュールを 2 つ置く、設定ページで作ったコードと一緒に使う など）。二重に動きます

1. フォームを準備する

1. HubSpot でフォームの編集画面を開きます
2. ステップを追加し、2 ステップ以上にします
3. 最終ステップには入力の項目を置かず、同意のチェックなど、確認したあとに操作するものだけを置きます。最終ステップには、案内文などを 1 つ以上置きます（空のステップがあるフォームは公開できません）
4. 最終ステップのボタン名を、必要に応じて「修正する」「送信する」などに変えます
5. フォームを公開します

一覧は、最終ステップの先頭に表示されます。表示する位置を変えたいときだけ、最終ステップにリッチテキストを置いて「入力内容をご確認ください」などの文言を書きます。手順 2 で、同じ文言を「確認ステップの目印の文言」に入れると、その文言のすぐ下に一覧が表示されます。

2. ページにモジュールを置く

1. HubSpot で、フォームを置いたページの編集画面を開きます
2. 「追加」から「add apps フォームの確認画面」のモジュールを探し、ページのドラッグ＆ドロップのエリアに置きます。置く場所は、フォームの近くでなくても構いません。モジュールを置いた位置には何も表示されず、確認画面はフォームの中に表示されます
3. モジュールの設定欄で、次の項目を設定します

詳細設定：

1. ページを更新（公開）します
2. 公開したページで、次のことを確かめます
   • 入力して最終ステップに進むと、入力内容の一覧が表示されること
   • 「戻る」で入力に戻れること、「送信」で送信できること

モジュールの設定欄の「スタイル」タブで、見出し・項目名・入力内容の文字の色と、区切り線の色を変えられます。「標準の見た目を使う」をオフにすると、区切り線や余白を付けずに表示します（サイトの CSS で見た目を付ける場合）。

確認画面の見た目は、サイトの CSS より弱く設定しているため、サイトの CSS が常に優先されます。画面の幅が狭いとき（480px 以下）は、項目名と入力内容を縦に並べて表示します。

調整に使えるクラス名：

確認画面が表示されない

• フォームが 2 ステップ以上になっているかを確認してください。最終ステップに「戻る」と「送信」のボタンがあることが必要です
• 「確認ステップの目印の文言」を入れた場合は、最終ステップのリッチテキストに同じ文言が書いてあるかを確認してください
• モジュールの設定欄で、フォームが正しく選ばれているかを確認してください
• フォームが「フォームエディター」（「旧フォームエディター」ではない方）で作られているかを確認してください
• ページを更新（公開）したかを確認してください

項目名が英数字（内部名）で表示される

• 非表示の項目は、フォーム上のラベルがないため、プロパティの内部名で表示されます。「表示する項目」に追加して表示名を入れるか、詳細設定の「非表示の項目も表示する」をオフにしてください

動作の記録を見る

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

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