add apps テンプレートマーケットプレイス版
EFO 機能 ご利用ガイド（テンプレートマーケットプレイス版）
HubSpot のフォームに、入力を助ける 6 つの機能を足します。必須項目を色で示す、入力済みの項目に印を付ける、残りの必須項目の数を表示する、誤りをその場で知らせる、送信できない理由と場所を示す、といった機能で、入力の途中での離脱や、送信できずに困ることを減らします。お問い合わせ・資料請求・お申し込みなど、項目の多いフォームに向いています。機能は、モジュールの設定欄でひとつずつオン・オフできます。
- 提供
- 株式会社ハレフル（add apps）
- 料金
- 無償
- 版
- 1.0.0
できること
| 機能 | 内容 |
|---|---|
| 必須項目のカラーリング | まだ入力していない必須項目の入力欄に、背景の色を付けます。入力すると色が消えます |
| 入力済みマーク | 正しく入力できた項目の名前の横に、チェックの印を付けます |
| 残りの必須項目数の表示 | 「必須項目は残り 3 つです」のように、まだ入力していない必須項目の数を表示します。すべて入力すると「必須項目はすべて入力済みです」に変わります。表示する位置は、フォームの上（画面を動かしても上に残る）か、送信ボタンの上から選べます |
| リアルタイムエラー | 入力欄を離れたときに、未入力やメールアドレスの形式の誤りをその場で知らせます。一度知らせた項目は、入力するたびに確かめ直し、直ればすぐにメッセージを消します |
| エラー項目の背景色の変更 | 誤りのある項目の背景と枠に色を付けます |
| 送信ボタンの制御 | 誤りや未入力が残ったまま「次へ」「送信」を押すと、送信を止めて、直す項目の一覧を表示し、最初の項目へ移動します。直した項目は、一覧で「入力済み」に変わります |
機能はどれも、初めはオンになっています。送信は HubSpot フォームの標準のボタンで行い、送信後の動き（お礼の表示、通知、ワークフローなど）は今までどおりです。
使える条件
| 対象 | 使えるか |
|---|---|
| 「フォームエディター」で作ったフォーム | 使えます |
| 「旧フォームエディター」で作ったフォーム | 使えません |
| HubSpot のランディングページ・ウェブサイトページに置いたフォーム | 使えます |
| HubSpot 以外のサイトに埋め込んだフォーム | 使えません |
| フォームの共有リンク（フォームだけを開く URL） | 使えません |
ご注意
- 必須項目は、フォームの項目の「必須」の設定から判断します。モジュールの設定欄で必須項目を選ぶ必要はありません
- 誤りとして知らせるのは「必須の未入力」と「メールアドレスの形式」です。それ以外の確認（電話番号の形式、ブロックしたメールアドレスのドメインなど）は、これまでどおり HubSpot フォームのメッセージで知らせます
- このモジュールがメッセージを出している項目では、同じ内容の HubSpot フォームのメッセージを隠し、二重に表示しないようにします
- 必須の同意のチェック（個人データの処理への同意など）も、必須項目として数えます
- 複数ステップのフォームでは、いま表示しているステップの必須項目を数えます。必須項目のないステップ（確認ステップなど）では、残りの数は表示しません
- 非表示の項目は対象にしません
- HubSpot フォームは、必須項目がそろうまで「次へ」「送信」を押せない状態にすることがあります。送信ボタンの制御がオンのときは、その状態のボタンを押しても、直す項目の一覧を表示します（このとき、マウスを乗せたときに出るボタンの説明は表示されません）
- 入力内容を外部に送ることはありません。確認は、ご覧になっているブラウザの中だけで行います
- 「フォームの確認画面」「入力補助」など、ほかの add apps と一緒に使えます。ほかの add apps が入力欄を置き換えた項目（入力補助の電話番号欄など）は、それぞれの add apps がメッセージを出します
- お使いのテーマ・テンプレートはそのまま使えます。ページのドラッグ＆ドロップのエリアにモジュールを置いてください。ドラッグ＆ドロップのエリアがないテンプレートでは、モジュールを置けません
- 見た目はサイトの CSS が優先されます。ただし、テーマが独自の JavaScript でフォームの見た目や動きを大きく作り変えている場合は、正しく表示されないことがあります
- 同じフォームに、同じ add apps を 2 つ以上入れないでください（モジュールを 2 つ置く など）。二重に動きます
導入の手順
1. フォームを準備する
- HubSpot でフォームの編集画面を開きます
- 必ず入力してもらう項目の「必須」をオンにします
- フォームを公開します
2. ページにモジュールを置く
- HubSpot で、フォームを置いたページの編集画面を開きます
- 「追加」から「add apps EFO 機能」のモジュールを探し、ページのドラッグ＆ドロップのエリアに置きます。置く場所は、フォームの近くでなくても構いません。モジュールを置いた位置には何も表示されず、表示はフォームの中とフォームの上に出ます
- モジュールの設定欄で、次の項目を設定します
| 設定欄 | 内容 |
|---|---|
| フォーム | 同じページに置いたフォームを選びます |
| 必須項目のカラーリング | 「必須項目のカラーリングを使う」でオン・オフします |
| 入力済みマーク | 「入力済みマークを使う」でオン・オフします |
| 残りの必須項目数の表示 | 下の表をご覧ください |
| リアルタイムエラー | 下の表をご覧ください |
| エラー項目の背景色の変更 | 「エラー項目の背景色を変える」でオン・オフします |
| 送信ボタンの制御 | 「送信ボタンの制御を使う」でオン・オフします。「一覧の見出し」で、直す項目の一覧の見出しを変えられます（既定は「次の項目を確認してください」） |
| 詳細設定 | 動作の記録（ブラウザの開発者ツールに出す記録の詳しさ：警告だけ／主な動作／くわしく） |
「残りの必須項目数の表示」の設定欄：
| 設定欄 | 内容 |
|---|---|
| 残りの必須項目数を表示する | オン・オフします |
| 表示の文言 | {count} は残りの数に置き換わります（既定は「必須項目は残り {count} つです」） |
| すべて入力したときの文言 | 既定は「必須項目はすべて入力済みです」 |
| 表示する位置 | フォームの上（画面を動かしても上に残る）／送信ボタンの上 |
「リアルタイムエラー」の設定欄：
| 設定欄 | 内容 |
|---|---|
| リアルタイムエラーを使う | オン・オフします。オフのときは、「次へ」「送信」を押したときだけメッセージを出します |
| 未入力のメッセージ | 文字を入力する必須項目が空のときの文です（既定は「入力してください」） |
| 選んでいないときのメッセージ | ラジオボタン・チェックボックス・ドロップダウン・ファイルの必須項目で、何も選んでいないときの文です（既定は「選択してください」） |
| チェックを入れていないときのメッセージ | 同意のチェックなど、チェックボックスが 1 つだけの必須項目の文です（既定は「チェックを入れてください」） |
| メールアドレスの形式が違うときのメッセージ | 既定は「メールアドレスの形式で入力してください」 |
- ページを更新（公開）します
- 公開したページで、次のことを確かめます
- 必須項目に色が付き、入力すると消えること
- 残りの必須項目の数が、入力に合わせて減ること
- 必須項目を空のまま入力欄を離れると、メッセージが出ること
- 未入力のまま「送信」を押すと、直す項目の一覧が出ること
見た目の調整
モジュールの設定欄の「スタイル」タブで、残りの必須項目数の表示の色を変えられます。初期の色は、お使いのテーマのメインの色です（テーマにメインの色がないときは標準の色）。「標準の見た目を使う」をオフにすると、色を付けずに表示します（サイトの CSS で見た目を付ける場合）。
必須項目の色、エラーの色、入力済みマークの色は、サイトの CSS で次の変数を指定すると変えられます。表示の見た目は、サイトの CSS より弱く設定しているため、サイトの CSS が常に優先されます。
| CSS の変数 | 対象 | 既定 |
|---|---|---|
--kp-efo-required-bg・--kp-efo-required-line | 必須項目の背景・枠 | 薄い黄 |
--kp-efo-error-bg・--kp-efo-error-line・--kp-efo-error-text | エラーの背景・枠・文字 | 薄い赤・赤 |
--kp-efo-ok | 入力済みマーク、すべて入力済みの表示 | 緑 |
--kp-efo-sticky-top | 画面の上に残る表示の、上の余白（固定のヘッダーがあるサイトで使います） | 8px |
調整に使えるクラス名：
| クラス名 | 対象 |
|---|---|
efo-remaining | 残りの必須項目数の表示（すべて入力済みのときは data-done="true" が付きます） |
efo-mark | 入力済みマーク |
efo-message | このモジュールのメッセージ |
efo-summary | 直す項目の一覧（直した項目には efo-summary-item--done が付きます） |
項目の要素には、状態に合わせて data-kp-efo に required-empty（必須で未入力）・ok（入力済み）・error（誤りがある）が付きます。
困ったとき
色や印、残りの数が表示されない
- モジュールの設定欄で、フォームが正しく選ばれているか、その機能がオンになっているかを確認してください
- フォームが「フォームエディター」（「旧フォームエディター」ではない方）で作られているかを確認してください
- 必須の色と残りの数は、フォームの項目の「必須」がオンの項目だけが対象です
- ページを更新（公開）したかを確認してください
残りの数が画面の上に残らない
- テーマによっては、フォームを囲む要素の設定で、画面の上に残らないことがあります。表示する位置を「送信ボタンの上」にしてください
- 固定のヘッダーに隠れるときは、サイトの CSS で
--kp-efo-sticky-topにヘッダーの高さを指定してください
動作の記録を見る
ページの URL の末尾に ?kp_debug=1 を付けて開くと（すでに ? がある場合は &kp_debug=1）、ページの下部に動作の記録が表示されます。お問い合わせの際は、この記録を添えてください。
ご利用にあたって
- 無償・無保証で提供しています
- HubSpot の仕様変更により、動かなくなる場合があります
- 本ツールの利用により生じた損害について、当社は責任を負いません
Contact
add apps のお問い合わせ
使い方がわからないとき、うまく動かないとき、
ご要望はこちらからご連絡ください。