概要

このページでは、 formrun.js を利用した郵便番号による住所補完機能の設定方法を紹介します。

formrun.jsの概要や他のバリデーション機能については、別ページをご覧ください。

guide.form.run

郵便番号による住所補完機能の設定方法

formrun.jsの読み込み

このページの機能を利用する場合には、下記 formrun.js を <head>内 で読み込み、 Formタグ に formrun というクラスを付与する必要があります。

<head>
  ...
  <script src="https://sdk.form.run/js/v2/formrun.js"></script>
</head>
<body>
  ...
  <form class="formrun" action="https://form.run/api/v1/r/<フォーム設定ページで指定される値>" method="post">
  ...
  </form>
  ...
</body>

※ formrun.jsを利用する場合は、以前の sdk.jsとの併用はできません。

郵便番号による住所補完

タグに data-formrun-type="postal-code-jp" 属性を指定します。

郵便番号を入力すると対応するフィールドに住所が反映されます。

住所に対応するフィールドは data-formrun-type="region locality street-address" という記述で指定します。

それぞれ、reagionが都道府県に、localityが市区町村に、street-addressが町名に対応します。該当する町名が存在しない場合は空になります。

data-formrun-typeの値を別々に記入することで、住所の複数フィールドにも対応できます。

<!-- マークアップ例1 (住所を1つにまとめる場合) -->
<input type="text" name="郵便番号" data-formrun-type="postal-code-jp">
<input type="text" name="住所" data-formrun-type="region locality street-address">

<!-- マークアップ例2 (住所を複数フィールドに分割する場合) -->
<input type="text" name="郵便番号" data-formrun-type="postal-code-jp">
<input type="text" name="住所" data-formrun-type="region">
<input type="text" name="住所" data-formrun-type="locality street-address" >

備考
設置可能場所	Inputタグ type="text"

都道府県タグの自動設定

Selectタグに data-formrun-type="prefecture-jp" を指定します。

この機能を利用すると、都道府県を列挙した <option>タグ が自動で設定されるので、<option>タグを記述する必要がなくなります。

この設定と data-formrun-type="region" を併用することで、郵便番号による自動補完機能も利用できます。

<!-- マークアップ例 -->
<input type="text" name="郵便番号" data-formrun-type="postal-code-jp">

<select name="都道府県" data-formrun-type="region prefecture-jp"></select>