HubSpot フォームで、郵便番号から住所を自動で入力する無償ツールを公開しました（add apps 5）
資料請求やお申し込み、お届け先の入力など、フォームで住所を受け取る場面は多くあります。HubSpot のフォームでは、都道府県から町域まで、住所はすべて手で入力していただくことになります。入力の手間がかかるうえ、書き間違いや表記の揺れも起きやすくなります。
そこで、郵便番号を入力すると、都道府県・市区町村・町域を住所の項目へ自動で入力する無償ツール「郵便番号検索」を公開しました。コードを 1 つ貼り付けるだけで使えます。
add apps は、HubSpot を日本の商習慣に合わせて使いやすくする小さな部品です。「フォームの確認画面」「入力補助」「グループ選択」「希望日ピッカー」に続く 5 本目です。
できること
- 郵便番号の項目に 7 桁の数字がそろうと、住所を探して、住所の項目へ入力します。全角の数字やハイフン付き（例：１００－０００１）でも入力できます
- 郵便番号は「100-0001」の形に整えて書き戻します
- 住所は、都道府県・市区町村・町域を別々の項目に入れるか、住所 1 つの項目にまとめて入れるかを選べます
- 住所を入れたあと、最後に入れた項目にカーソルを移します。続けて番地を入力できます
- 自動で入力した項目を、一瞬だけ色付けしてお知らせします
- 住所が見つからないときは、郵便番号の項目の下にメッセージを表示します
| 使い方の例 | 住所の入れ方 |
|---|---|
| 資料請求・お申し込み・お届け先の入力 | 都道府県・市区町村・町域を別々の項目に |
| 住所の項目が 1 つだけのフォーム | 住所 1 つの項目にまとめて（例：「東京都千代田区千代田」） |
送信は HubSpot フォームの標準のボタンで行います。送信後の動き（お礼の表示、通知、ワークフローなど）は今までどおりです。
使える条件
| 対象 | 使えるか |
|---|---|
| 「フォームエディター」で作ったフォーム | 使えます |
| 「旧フォームエディター」で作ったフォーム | 使えません |
| HubSpot のランディングページ・ウェブサイトページに置いたフォーム | 使えます |
| HubSpot 以外のサイトに埋め込んだフォーム | 使えません |
| フォームの共有リンク（フォームだけを開く URL） | 使えません |
- 住所のデータは、外部で公開されている郵便番号のデータ（yubinbango-data。GitHub Pages で配信）から、ページを見ている人のブラウザが読み込みます。読み込むときに、郵便番号の上 3 桁がファイル名として送られます。そのほかの入力内容は送りません。アカウントの登録は必要ありません。
- 住所のデータが更新されるまでの間、新しい郵便番号は見つからないことがあります。その場合は「住所が見つからないときのメッセージ」を表示し、住所は手で入力してもらいます
- 「フォームの確認画面」などほかの add apps と一緒に使えます
使い方（3 ステップ）
フォームを準備する
- HubSpot でフォームの編集画面を開きます
- 郵便番号の項目と、住所を入れる項目をフォームに置きます。郵便番号の項目は非表示にはしないでください。すでに置いてある項目なら、そのままで構いません
- フォームを公開します
設定ページでコードを作る
- 設定ページを開きます
- HubSpot でフォームを開いたときの、ブラウザのアドレス欄の URL（
https://app.hubspot.com/forms/…またはhttps://app.hubspot.com/submissions/…で始まるもの）を貼り付け、「読み取る」を押します - 「郵便番号の項目」と「住所の入れ方」を決め、住所を入れる項目を設定します
- 「コードをコピー」を押します
ページに貼り付ける
- HubSpot で、フォームを置いたページの編集画面を開きます
- 「設定」→「詳細」→「HeadのHTML」に、コピーしたコードを貼り付けます。コードは長くなりますが、途中で切らずに全部を貼り付けてください。ほかの add apps と一緒に使う場合は、それぞれのコードを貼り付けます
- ページを更新（公開）します
- 公開したページで、郵便番号の項目に 7 桁を入力すると、住所の項目に住所が入ることを確かめます
詳しい使い方は、ご利用ガイドをご覧ください。
設定を変えた、項目を変えた場合は
住所の入れ方やメッセージを変えるとき、フォームの項目を変えたときは、設定ページでコードを作り直し、「HeadのHTML」のコードを貼り替えてください。add apps の新しい版も、作り直したコードに含まれます。
困ったとき
住所が入らない
- 郵便番号の項目と住所の項目がフォームに置かれているか、郵便番号の項目が非表示になっていないか、フォームが「フォームエディター」（「旧フォームエディター」ではない方）で作られているかを確認してください
- コードが途中で切れずに全部貼り付けられているか、ページを更新（公開）したかを確認してください
「住所が見つからないときのメッセージ」が出る
- 郵便番号が 7 桁で正しいかを確認してください
- 新しい郵便番号は、住所のデータが更新されるまで見つからないことがあります。住所は手で入力してください
動作の記録を見る
ページの URL の末尾に ?kp_debug=1 を付けて開くと（すでに ? がある場合は &kp_debug=1）、ページの下部に動作の記録が表示されます。お問い合わせの際は、この記録を添えてください。
次の add apps
11 月 12 日（木）は 6 本目として、氏名などを入力すると、漢字に変換する前の読みをふりがなの項目へ自動で入力する「ふりがなの自動入力」を公開予定です。
新しい add apps の公開や更新のお知らせは、メールで受け取れます。add apps のページを開くと右下に登録の枠が表示されますので、メールアドレスをご登録ください。
お問い合わせ
使い方がわからないとき、うまく動かないとき、ご要望は、add apps のお問い合わせからご連絡ください。
HubSpot の導入・活用のご相談も承っています。HubSpot導入支援
ご利用にあたって
- 無償・無保証で提供しています
- HubSpot の仕様変更により、動かなくなる場合があります
- 本ツールの利用により生じた損害について、当社は責任を負いません