郵便番号から住所を自動表示させる方法
本記事では、フォーム作成の際に郵便番号を入力しただけで該当する住所を自動入力させる方法についてご紹介します。
目次
１．はじめに
２．住所情報を自動入力させる方法
３．最後に
１．はじめに
今回は、「jquery.jpostal.js」というjQueryのプラグインを使用して郵便番号からカミハヤMAで作成したフォームのフィールドへ住所情報を自動入力する方法についてご紹介します。
２．住所情報を自動入力させる方法
①必要なファイルを読み込む
適用したいカミハヤMAのフォームテーマ（例：Blank V2）をダウンロードして解凍します。
解凍を終えたらhtmlディレクトリにあるform.html.twigファイルをエディタで開きます。
jQueryと「jquery.jpostal.js」を読み込みます。
②「jquery.jpostal.js」を動かすためにform.html.twigファイルへ指定したidを設定
下記が設定するidとなります。
・%3：都道府県
・%4：市区町村
・%5：町域
（都道府県カナや市区町村カナなどのidもありますが、今回は割愛します）
【サンプルコード】
③カミハヤMAのフォーム設定
住所情報（都道府県市区町村町域）のインプット属性をform.html.twigで定義したclass名と同じに設定します。
都道府県、市区町村、町域のフォームフィールドも同様に設定をします。
④作成したフォームをテーマとして再利用できるようにconfig.jsonの情報（例：{"name":"今回作成したテーマ名",など）を書き換えた後、ファイル一式まとめてzipファイル化します。最後にzipファイルをテーマとしてファイルアップロードすれば作業は終了です。今後は、今回作成したフォームテーマを元にフォーム作成すると郵便番号から住所を自動表示させるフォームを簡単に作成することができます。
３．最後に
いかがでしたでしょうか。思ったよりも簡単に設定できそうですね。郵便番号はハイフォンがあってもなくても検索してくれます。もし郵便番号にバリデーションチェックをかけたい場合には、前回の記事なども参考にチャレンジしてみてください。最後に今回作成したフォームをカミハヤMAのランディングページに{form=作成したフォームID}で挿入するとJavaScriptが削除されてうまく機能しません。その回避策については、また他の記事でご紹介したいと思います。
