add apps株式会社ハレフル

add apps 5

HubSpot のフォームで郵便番号から住所を自動で入力する

HubSpot フォームの URL を入力すると、フォームの項目を読み取り、郵便番号検索の埋め込みコードを作成します。郵便番号の項目に 7 桁を入力すると、都道府県・市区町村・町域を住所の項目へ自動で入力します。作成したコードは、フォームを設置したページの「HeadのHTML」に貼り付けてご利用ください。

ご利用ガイドを見る
STEP 1

フォームの URL を入力

HubSpot でフォームを開き、ブラウザのアドレス欄に表示される URL を入力してください（https://app.hubspot.com/forms/… または https://app.hubspot.com/submissions/… で始まる URL）。郵便番号の項目と住所の項目は、非表示にせずにフォームに置いておきます。

STEP 2

フォームの確認

    STEP 3

    郵便番号と住所の項目

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

    フォームに置いた、郵便番号を入力するテキストの項目です。項目は非表示にしないでください。全角の数字やハイフン付きでも入力できます。

    住所の入れ方

    都道府県・市区町村・町域を別々の項目に入れるか、ひとつの住所の項目にまとめて入れるかを選びます。

    空欄にすると、都道府県は市区町村の項目の先頭に入れます。

    空欄にすると、市区町村は町域の項目の先頭に入れます。

    入力後、この項目にカーソルを移します。続けて番地を入力できます。空欄にすると、町域は市区町村の項目の末尾に入れます。

    STEP 4

    メッセージと動作の記録

    郵便番号の項目の下に表示します。郵便番号を入力し直すと消えます。

    ブラウザの開発者ツールに出す記録の詳しさです。URL に ?kp_debug=1 を付けると、この設定に関係なくページ下部に記録を表示します。

    STEP 5

    埋め込みコードの貼り付け

    
          
    
            
            
          
    
          
    コードには郵便番号検索の本体も含まれるため、長くなります。省略せずにすべて貼り付けてください。
    
          
      
            
    1. HubSpot で、フォームを設置したページの編集画面を開きます
      2. 
            
    2. 「設定」→「詳細」→「HeadのHTML」にコードを貼り付けます
      3. 
            
    3. ページを更新（公開）します
      4. 
          
    
          
    住所のデータは、外部で公開されている郵便番号のデータ（yubinbango-data。GitHub Pages で配信）から、ページを見ている人のブラウザが読み込みます。
    
          
    確認画面などほかの add apps と併せて使う場合は、それぞれのコードを「HeadのHTML」に貼り付けてください。
    
          
    正しく動作しない場合は、ページの URL の末尾に ?kp_debug=1 を付けて開くと、ページ下部に動作ログが表示されます。お問い合わせの際に添えてください。