郵便番号検索 ご利用ガイド（テンプレートマーケットプレイス版）

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

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

ご注意

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

1. フォームを準備する

1. フォームの編集画面を開き、郵便番号の項目と、住所を入れる項目をフォームに置きます。HubSpot のコンタクトの標準のプロパティ（内部名 zip、state、city、address）を使うと、モジュールの設定欄の初期値のまま使えます。ほかのプロパティを使っても構いません
2. フォームを公開します
3. 項目の、フォームに表示される項目名か、プロパティの「内部名」を控えておきます（内部名はプロパティの設定画面で確認できます）

2. ページにモジュールを置く

1. HubSpot で、フォームを置いたページの編集画面を開きます
2. 「追加」から「add apps 郵便番号検索」のモジュールを探し、ページのドラッグ＆ドロップのエリアに置きます。置く場所は、フォームの近くでなくても構いません。モジュールを置いた位置には何も表示されません
3. モジュールの設定欄で、次の項目を設定します。項目は、フォームに表示される項目名か、プロパティの内部名のどちらかを書きます

1. ページを更新（公開）します
2. 公開したページで、次のことを確かめます
   • 郵便番号の項目に 7 桁を入力すると、住所の項目に住所が入ること
   • 送信すると、それぞれの項目に保存されること

「郵便番号の項目」が空欄のときは、ページの編集画面の中でだけ、モジュールを置いた位置に案内を表示します。公開したページには表示しません。

モジュールの設定欄の「スタイル」タブで、メッセージの文字の色（住所が見つからないときのメッセージの色）を変えられます。「自動入力した欄を一瞬だけ色付けする」をオフにすると、自動で入力した項目に色を付けません。

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

調整に使えるクラス名：

住所が入らない

• モジュールの設定欄で、フォーム、郵便番号の項目、住所の入れ方と住所の項目が正しく設定されているかを確認してください
• 郵便番号の項目と住所の項目がフォームに置かれているか、郵便番号の項目が非表示になっていないか、フォームが「フォームエディター」（「旧フォームエディター」ではない方）で作られているかを確認してください
• ページを更新（公開）したかを確認してください

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

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

動作の記録を見る

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

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