HubSpot フォームに、入力を助ける EFO 機能を足す無償ツールを公開しました（add apps 10）
項目の多いフォームでは、どれが必須かわかりにくい、あといくつ入力すればよいかわからない、「送信」を押してから誤りに気づく、といったことが起こりがちです。HubSpot のフォームは、必須項目がそろうまで「送信」を押せないことがあり、どの項目が足りないのかがわからないまま、入力をやめてしまう方もいます。
そこで、フォームに入力を助ける 6 つの機能を足す無償ツール「EFO 機能」を公開しました。EFO（エントリーフォーム最適化）は、フォームを入力しやすくして、途中での離脱を減らす取り組みのことです。使う機能を選んで作ったコードを 1 つ貼り付けるだけで使えます。
add apps は、HubSpot を日本の商習慣に合わせて使いやすくする小さな部品です。「フォームの確認画面」「入力補助」「グループ選択」「希望日ピッカー」「郵便番号検索」「ふりがなの自動入力」「全角半角コンバータ」「テキスト項目をフォームだけ選択型に」「添付ファイル送信」に続く 10 本目です。
できること
次の 6 つの機能から、使うものを選べます。初めはすべてオンです。
| 機能 | 内容 |
|---|---|
| 必須項目のカラーリング | まだ入力していない必須項目の入力欄に、背景の色を付けます。入力すると色が消えます |
| 入力済みマーク | 正しく入力できた項目の名前の横に、チェックの印を付けます |
| 残りの必須項目数の表示 | 「必須項目は残り 3 つです」のように、まだ入力していない必須項目の数を表示します。フォームの上（画面を動かしても上に残る）か、送信ボタンの上に表示します |
| リアルタイムエラー | 入力欄を離れたときに、未入力やメールアドレスの形式の誤りをその場で知らせます。直ればすぐにメッセージを消します |
| エラー項目の背景色の変更 | 誤りのある項目の背景と枠に色を付けます |
| 送信ボタンの制御 | 誤りや未入力が残ったまま「次へ」「送信」を押すと、先へ進めずに、直す項目の一覧を表示し、最初の項目へ移動します |
- どの項目が必須かは、フォームの項目の「必須」の設定に従います。項目を 1 つずつ設定する必要はありません
- 表示の文言（「必須項目は残り {count} つです」「入力してください」など）や、残りの必須項目数の表示の色は、設定ページで変えられます
- HubSpot フォームが出すエラーと二重に表示しないように、同じ内容のメッセージは 1 つにまとめます
送信は HubSpot フォームの標準のボタンで行います。送信後の動き（お礼の表示、通知、ワークフローなど）は今までどおりです。
使える条件
| 対象 | 使えるか |
|---|---|
| 「フォームエディター」で作ったフォーム | 使えます |
| 「旧フォームエディター」で作ったフォーム | 使えません |
| HubSpot のランディングページ・ウェブサイトページに置いたフォーム | 使えます |
| HubSpot 以外のサイトに埋め込んだフォーム | 使えません |
| フォームの共有リンク（フォームだけを開く URL） | 使えません |
- 誤りとして知らせるのは「必須の未入力」と「メールアドレスの形式」です。それ以外の確認（電話番号の形式など）は、これまでどおり HubSpot フォームのメッセージで知らせます
- 複数ステップのフォームでは、いま表示しているステップの必須項目を数えます
- フォームに値を書き込むことはありません。入力内容を外部に送ることもありません。確認は、ご覧になっているブラウザの中だけで行います
- 「フォームの確認画面」などほかの add apps と一緒に使えます
使い方（3 ステップ）
フォームを準備する
- HubSpot でフォームの編集画面を開き、必ず入力してもらう項目の「必須」をオンにします
- フォームを公開します
設定ページでコードを作る
- 設定ページを開きます
- HubSpot でフォームを開いたときの、ブラウザのアドレス欄の URL（
https://app.hubspot.com/forms/…またはhttps://app.hubspot.com/submissions/…で始まるもの）を貼り付け、「読み取る」を押します - 使う機能を選び、必要なら文言や見た目を変えます。右側のプレビューで、入力の途中と「送信」を押したときの表示を確かめられます
- 「コードをコピー」を押します
ページに貼り付ける
- HubSpot で、フォームを置いたページの編集画面を開きます
- 「設定」→「詳細」→「HeadのHTML」に、コピーしたコードを貼り付けます。コードは長くなりますが、途中で切らずに全部を貼り付けてください。ほかの add apps と一緒に使う場合は、それぞれのコードを貼り付けます
- ページを更新（公開）します
- 公開したページで、必須項目に色が付くこと、残りの数が入力に合わせて減ること、未入力のまま「送信」を押すと直す項目の一覧が出ることを確かめます
詳しい使い方は、ご利用ガイドをご覧ください。
設定を変えた、フォームを変えた場合は
使う機能や文言を変えるとき、別のフォームに差し替えたときは、設定ページでコードを作り直し、「HeadのHTML」のコードを貼り替えてください。フォームの項目を増やした・減らした、必須を変えただけのときは、貼り替える必要はありません。add apps の新しい版も、作り直したコードに含まれます。
困ったとき
表示されない
- フォームが「フォームエディター」（「旧フォームエディター」ではない方）で作られているか、フォームを公開したかを確認してください
- 必須項目の色や残りの数は、表示しているページに必須項目があるときだけ表示します。フォームの項目の「必須」がオンになっているかを確認してください
- コードが途中で切れずに全部貼り付けられているか、ページを更新（公開）したかを確認してください
動作の記録を見る
ページの URL の末尾に ?kp_debug=1 を付けて開くと（すでに ? がある場合は &kp_debug=1）、ページの下部に動作の記録が表示されます。入力の内容は記録しません。お問い合わせの際は、この記録を添えてください。
次の add apps
新しい add apps の公開や更新のお知らせは、メールで受け取れます。add apps のページを開くと右下に登録の枠が表示されますので、メールアドレスをご登録ください。
お問い合わせ
使い方がわからないとき、うまく動かないとき、ご要望は、add apps のお問い合わせからご連絡ください。
HubSpot の導入・活用のご相談も承っています。HubSpot導入支援
ご利用にあたって
- 無償・無保証で提供しています
- HubSpot の仕様変更により、動かなくなる場合があります
- 本ツールの利用により生じた損害について、当社は責任を負いません