add apps 10

EFO 機能ご利用ガイド

HubSpot のフォームに、入力を助ける 6 つの機能を足します。必須項目を色で示す、入力済みの項目に印を付ける、残りの必須項目の数を表示する、誤りをその場で知らせる、送信できない理由と場所を示す、といった機能で、入力の途中での離脱や、送信できずに困ることを減らします。お問い合わせ・資料請求・お申し込みなど、項目の多いフォームに向いています。設定ページで使う機能を選んで作ったコードを、フォームを置いたページに貼り付けるだけで使えます。

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

設定ページを開く

できること

機能	内容
必須項目のカラーリング	まだ入力していない必須項目の入力欄に、背景の色を付けます。入力すると色が消えます
入力済みマーク	正しく入力できた項目の名前の横に、チェックの印を付けます
残りの必須項目数の表示	「必須項目は残り 3 つです」のように、まだ入力していない必須項目の数を表示します。すべて入力すると「必須項目はすべて入力済みです」に変わります。表示する位置は、フォームの上（画面を動かしても上に残る）か、送信ボタンの上から選べます
リアルタイムエラー	入力欄を離れたときに、未入力やメールアドレスの形式の誤りをその場で知らせます。一度知らせた項目は、入力するたびに確かめ直し、直ればすぐにメッセージを消します
エラー項目の背景色の変更	誤りのある項目の背景と枠に色を付けます
送信ボタンの制御	誤りや未入力が残ったまま「次へ」「送信」を押すと、先へ進めずに、直す項目の一覧を表示し、最初の項目へ移動します。直した項目は、一覧で「入力済み」に変わります

機能はどれも、初めはオンになっています。使わない機能は、設定ページでオフにできます。送信は HubSpot フォームの標準のボタンで行い、送信後の動き（お礼の表示、通知、ワークフローなど）は今までどおりです。

使える条件

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

ご注意

必須項目は、フォームの項目の「必須」の設定から判断します。設定ページで項目を選ぶ必要はありません
誤りとして知らせるのは「必須の未入力」と「メールアドレスの形式」です。それ以外の確認（電話番号の形式、ブロックしたメールアドレスのドメインなど）は、これまでどおり HubSpot フォームのメッセージで知らせます
EFO 機能がメッセージを出している項目では、同じ内容の HubSpot フォームのメッセージを隠し、二重に表示しないようにします
必須の同意のチェック（個人データの処理への同意など）も、必須項目として数えます
複数ステップのフォームでは、いま表示しているステップの必須項目を数えます。必須項目のないステップ（確認ステップなど）では、残りの数は表示しません
非表示の項目は対象にしません
HubSpot フォームは、必須項目がそろうまで「次へ」「送信」を押せない状態にすることがあります。送信ボタンの制御がオンのときは、その状態のボタンを押しても、直す項目の一覧を表示します（このとき、マウスを乗せたときに出るボタンの説明は表示されません）
フォームに値を書き込むことはありません。入力内容を外部に送ることもありません。確認は、ご覧になっているブラウザの中だけで行います
「フォームの確認画面」「入力補助」など、ほかの add apps と一緒に使えます。ほかの add apps が入力欄を置き換えた項目（入力補助の電話番号欄など）は、それぞれの add apps がメッセージを出します
お使いのテーマ・テンプレートはそのまま使えます。見た目はサイトの CSS が優先されます。ただし、テーマが独自の JavaScript でフォームの見た目や動きを大きく作り変えている場合は、正しく表示されないことがあります
同じフォームに、同じ add apps を 2 つ以上入れないでください（コードを 2 回貼り付ける、HubSpot のテンプレートマーケットプレイス版のモジュールと一緒に使うなど）。二重に動きます

導入の手順

STEP 1

フォームを準備する

HubSpot でフォームの編集画面を開きます
必ず入力してもらう項目の「必須」をオンにします
フォームを公開します

STEP 2

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

設定ページを開きます
HubSpot でフォームを開いたときの、ブラウザのアドレス欄の URL（https://app.hubspot.com/forms/… または https://app.hubspot.com/submissions/… で始まるもの）を貼り付け、「読み取る」を押します
「フォームの確認」を確かめます。必須項目の数と、メールアドレスの形式を確かめる項目が表示されます。「要対応」が出た場合は、表示された案内に沿ってフォームを直してください。フォームを読み取れない場合も、URL のフォーム ID でコードを作れます（必須項目の数は確認できません）
「使う機能」で、使う機能にチェックを入れます。初めはすべてオンです

「文言と見た目」で、必要なら文言や見た目を変えます。文言を空欄にすると、初期の文言を使います。オフにした機能の設定欄は表示されません

設定欄	内容
表示の文言	残りの必須項目数の表示の文です。`{count}` は残りの数に置き換わります（初期は「必須項目は残り {count} つです」）
すべて入力したときの文言	初期は「必須項目はすべて入力済みです」
表示する位置	フォームの上（画面を動かしても上に残る）／送信ボタンの上
未入力のメッセージ	文字を入力する必須項目が空のときの文です（初期は「入力してください」）
選んでいないときのメッセージ	ラジオボタン・チェックボックス・ドロップダウン・ファイルの必須項目で、何も選んでいないときの文です（初期は「選択してください」）
チェックを入れていないときのメッセージ	同意のチェックなど、チェックボックスが 1 つだけの必須項目の文です（初期は「チェックを入れてください」）
メールアドレスの形式が違うときのメッセージ	初期は「メールアドレスの形式で入力してください」
一覧の見出し	送信ボタンの制御で出す、直す項目の一覧の見出しです（初期は「次の項目を確認してください」）
標準の見た目を使う	オフにすると、色を付けずに表示します（サイトの CSS で見た目を付ける場合）
残りの必須項目数の表示の色	「色を指定する」にチェックを入れると、表示の帯の背景の色を選べます。文字は白で表示します。指定しないときは紺です
動作の記録	ブラウザの開発者ツールに出す記録の詳しさです（警告だけ／主な動作／くわしく）

メッセージは、リアルタイムエラーと、送信ボタンの制御の一覧の両方で使います。リアルタイムエラーをオフにして送信ボタンの制御をオンにしたときは、「次へ」「送信」を押したときだけメッセージを出します。

右側の「Preview」で、「入力の途中」「「送信」を押したとき」を切り替えて、表示のイメージを確かめます
「コードをコピー」を押します

STEP 3

ページに貼り付ける

HubSpot で、フォームを置いたページの編集画面を開きます
「設定」→「詳細」→「HeadのHTML」に、コピーしたコードを貼り付けます。コードは長くなりますが、途中で切らずに全部を貼り付けてください。ほかの add apps と一緒に使う場合は、それぞれのコードを貼り付けます
ページを更新（公開）します
公開したページで、次のことを確かめます
- 必須項目に色が付き、入力すると消えること
- 残りの必須項目の数が、入力に合わせて減ること
- 必須項目を空のまま入力欄を離れると、メッセージが出ること
- 未入力のまま「送信」を押すと、直す項目の一覧が出ること

見た目の調整

必須項目の色、エラーの色、入力済みマークの色は、サイトの 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-accent`	残りの必須項目数の表示の帯	紺（設定ページで色を指定したときはその色）
`--kp-efo-sticky-top`	画面の上に残る表示の、上の余白（固定のヘッダーがあるサイトで使います）	8px

調整に使えるクラス名：

クラス名	対象
`efo-remaining`	残りの必須項目数の表示（すべて入力済みのときは `data-done="true"` が付きます）
`efo-mark`	入力済みマーク
`efo-message`	EFO 機能のメッセージ
`efo-summary`	直す項目の一覧（直した項目には `efo-summary-item--done` が付きます）

項目の要素には、状態に合わせて data-kp-efo に required-empty（必須で未入力）・ok（入力済み）・error（誤りがある）が付きます。

設定を変えた、フォームを変えた場合は

使う機能や文言を変えるとき、フォームを差し替えたときは、設定ページでコードを作り直し、「HeadのHTML」のコードを貼り替えてください。フォームの項目を増やした・減らした、必須を変えただけのときは、貼り替える必要はありません（ページを開いたときのフォームの項目を読みます）。add apps の新しい版も、作り直したコードに含まれます。

困ったとき

表示されない

フォームが「フォームエディター」（「旧フォームエディター」ではない方）で作られているか、フォームを公開したかを確認してください
必須項目のカラーリング・残りの必須項目数の表示は、表示しているページに必須項目があるときだけ表示します。フォームの項目の「必須」がオンになっているかを確認してください
設定ページで、使う機能が 1 つもオンになっていないとき、「表示の文言」に {count} がないときは、コードを作らずに直し方を表示します
コードが途中で切れずに全部貼り付けられているか、ページを更新（公開）したかを確認してください
別のフォームに差し替えた場合は、設定ページでコードを作り直してください

残りの数が画面の上に残らない

ページの作りによっては（フォームを囲む要素に overflow が指定されている場合など）、「フォームの上」に表示しても、画面を動かしたときに上に残らないことがあります。そのときは、表示する位置を「送信ボタンの上」にしてください。固定のヘッダーに隠れるときは、サイトの CSS で --kp-efo-sticky-top を指定してください。

動作の記録を見る

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

ご利用にあたって

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