add apps 5

郵便番号検索ご利用ガイド

HubSpot のフォームで、郵便番号の項目に 7 桁を入力すると、都道府県・市区町村・町域を住所の項目へ自動で入力します。住所の入力の手間と、書き間違いを減らせます。資料請求、お申し込み、お届け先の入力など、フォームで住所を受け取る場面に向いています。設定ページで作ったコードを、フォームを置いたページに貼り付けるだけで使えます。

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

設定ページを開く

できること

郵便番号の項目に 7 桁の数字がそろうと、住所を探して、住所の項目へ入力します。全角の数字やハイフン付き（例：１００－０００１）でも入力できます
郵便番号は「100-0001」の形に整えて書き戻します
住所の入れ方を選べます
- 都道府県・市区町村・町域を別々の項目に入れる
- 住所 1 つの項目にまとめて入れる（例：「東京都千代田区千代田」）
住所を入れたあと、最後に入れた項目（町域の項目、または住所の項目）にカーソルを移します。続けて番地を入力できます
自動で入力した項目を、一瞬だけ色付けしてお知らせします
住所が見つからないときは、郵便番号の項目の下にメッセージを表示します。郵便番号を入力し直すと消えます

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

使える条件

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

ご注意

郵便番号の項目と住所の項目は、フォームに置いてください。郵便番号の項目は非表示にせずに置いてください
住所の項目にすでに入力があっても、郵便番号から探した住所で書き換えます
住所を別々の項目に入れる場合、都道府県・市区町村・町域の項目のどれかを空欄にすると、その部分は隣の項目にまとめて入れます（例：市区町村の項目を空欄にすると、町域の項目に「千代田区千代田」と入れます）
住所のデータは、外部で公開されている郵便番号のデータ（yubinbango-data。GitHub Pages で配信）から、ページを見ている人のブラウザが読み込みます。読み込むときに、郵便番号の上 3 桁がファイル名として送られます。そのほかの入力内容は送りません。アカウントの登録は必要ありません
住所のデータが更新されるまでの間、新しい郵便番号は見つからないことがあります。その場合は「住所が見つからないときのメッセージ」を表示し、住所は手で入力してもらいます
住所のデータを読み込めなかったときも、「住所が見つからないときのメッセージ」を表示します
「フォームの確認画面」（add apps 1）などほかの add apps と一緒に使えます
お使いのテーマ・テンプレートはそのまま使えます。見た目はサイトの CSS が優先されます。ただし、テーマが独自の JavaScript でフォームの見た目や動きを大きく作り変えている場合は、正しく動かないことがあります
同じフォームに、同じ add apps を 2 つ以上入れないでください（コードを 2 回貼り付ける、HubSpot のテンプレートマーケットプレイス版のモジュールと一緒に使うなど）。二重に動きます

導入の手順

STEP 1

フォームを準備する

HubSpot でフォームの編集画面を開きます
郵便番号の項目と、住所を入れる項目をフォームに置きます。HubSpot のコンタクトの標準のプロパティ（内部名 zip、state、city、address）を使えます。ほかのプロパティを使っても構いません。すでに置いてある項目なら、そのままで構いません
フォームを公開します

STEP 2

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

設定ページを開きます
HubSpot でフォームを開いたときの、ブラウザのアドレス欄の URL（https://app.hubspot.com/forms/… または https://app.hubspot.com/submissions/… で始まるもの）を貼り付け、「読み取る」を押します
「フォームの確認」を確かめます。「要対応」が出た場合は、表示された案内に沿ってフォームや設定を直してください。フォームを読み取れない場合も、項目を入力すればコードを作れます（項目がフォームにあるかは確認できません）

次の項目を設定します。項目は、フォームに表示される項目名か、プロパティの内部名のどちらかを書きます。フォームを読み取ると、入力欄でフォームの項目から選べます

設定欄	内容
郵便番号の項目	郵便番号を入力するテキストの項目です
住所の入れ方	都道府県・市区町村・町域を別々の項目に／住所 1 つの項目にまとめて
都道府県の項目	「別々の項目に」のときに設定します。空欄にすると、都道府県は市区町村の項目の先頭に入れます
市区町村の項目	「別々の項目に」のときに設定します。空欄にすると、市区町村は町域の項目の先頭に入れます
町域の項目	「別々の項目に」のときに設定します。入力後、この項目にカーソルを移します。空欄にすると、町域は市区町村の項目の末尾に入れます
住所の項目	「まとめて」のときに設定します。都道府県・市区町村・町域を空白なしでつなげて入れます。入力後、この項目にカーソルを移します
住所が見つからないときのメッセージ	郵便番号の項目の下に表示します。郵便番号を入力し直すと消えます
動作の記録	ブラウザの開発者ツールに出す記録の詳しさです（警告だけ／主な動作／くわしく）

「コードをコピー」を押します

STEP 3

ページに貼り付ける

HubSpot で、フォームを置いたページの編集画面を開きます
「設定」→「詳細」→「HeadのHTML」に、コピーしたコードを貼り付けます。コードは長くなりますが、途中で切らずに全部を貼り付けてください。ほかの add apps と一緒に使う場合は、それぞれのコードを貼り付けます
ページを更新（公開）します
公開したページで、次のことを確かめます
- 郵便番号の項目に 7 桁を入力すると、住所の項目に住所が入ること
- 送信すると、それぞれの項目に保存されること

見た目の調整

メッセージや色付けの見た目は、サイトの CSS より弱く設定しているため、サイトの CSS が常に優先されます。

調整に使えるクラス名：

クラス名	対象
`postal-code-message`	住所が見つからないときのメッセージ
`postal-code-filled`	自動で入力した直後の項目（一瞬だけ付きます）

設定を変えた、項目を変えた場合は

住所の入れ方やメッセージを変えるとき、フォームの項目を変えたときは、設定ページでコードを作り直し、「HeadのHTML」のコードを貼り替えてください。add apps の新しい版も、作り直したコードに含まれます。

困ったとき

住所が入らない

郵便番号の項目と住所の項目がフォームに置かれているか、郵便番号の項目が非表示になっていないか、フォームが「フォームエディター」（「旧フォームエディター」ではない方）で作られているかを確認してください
設定ページで、郵便番号の項目、住所の入れ方と住所の項目が正しく設定されているかを確認してください
コードが途中で切れずに全部貼り付けられているか、ページを更新（公開）したかを確認してください
フォームの項目を差し替えた場合は、設定ページでコードを作り直してください

「住所が見つからないときのメッセージ」が出る

郵便番号が 7 桁で正しいかを確認してください
新しい郵便番号は、住所のデータが更新されるまで見つからないことがあります。住所は手で入力してください
住所のデータを読み込めなかったときも、このメッセージを表示します。少し待ってから、郵便番号を入力し直してください

動作の記録を見る

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

ご利用にあたって

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