以前も郵便番号から住所を自動入力する方法をメモしたことがあるのですが、ライブラリが公開されていたGoogle Codeのサービス廃止により、さらに便利なライブラリが公開されたので、そちらをメモ。

Contact Form7で郵便番号から住所を自動入力する方法
（↑は、Google Codeサービス廃止により使えない情報になってしまいました）

Yubinbangoライブラリ

今度のライブラリはすごいです。
ライブラリを読み込んで、あとは各フォーム項目にclassを指定するだけ。
なんて便利なんでしょう！

設置方法

まずは、scriptタグでYubinBangoライブラリを読み込みます。

<script src=&quot;https://yubinbango.github.io/yubinbango/yubinbango.js&quot; charset=&quot;UTF-8&quot;></script>

formタグのclassで「h-adr」を含めて指定する。

<form class=&quot;form-inline h-adr&quot;>

form中で、国名(p-country-name) に Japan を指定する。
郵便番号の入力で住所を自動入力することが目的のフォームで国名を出すことは、ほぼ皆無だと思うので、これはhidden対応になるでしょう。

<input type=&quot;hidden&quot; class=&quot;p-country-name&quot; value=&quot;Japan&quot;>

郵便番号の入力欄のclassで「p-postal-code」を含めて指定する。

<!-- 入力欄が1つの場合 -->
〒<input type=&quot;text&quot; class=&quot;p-postal-code&quot; size=&quot;8&quot; maxlength=&quot;8&quot;>

<!-- 入力欄が2つの場合 -->
〒<input type=&quot;text&quot; class=&quot;p-postal-code&quot; size=&quot;3&quot; maxlength=&quot;3&quot;>ー<input type=&quot;text&quot; class=&quot;p-postal-code&quot; size=&quot;4&quot; maxlength=&quot;4&quot;>

住所欄のclassで、都道府県名(p-region)、市町村区(p-locality)、町域(p-street-address)、以降の住所(p-extended-address) をそれぞれ含めて指定する。

<input type=&quot;text&quot; class=&quot;p-region&quot; readonly>
<input type=&quot;text&quot; class=&quot;p-locality&quot; readonly>
<input type=&quot;text&quot; class=&quot;p-street-address&quot;>
<input type=&quot;text&quot; class=&quot;p-extended-address&quot;>

ライブラリは以下のGitHubで公開されています。
https://github.com/yubinbango/yubinbango

Google Codeで公開されていたajaxzip3もGitHubに移行して公開されています。
少し改良されているようです。
ajaxzip3 – GitHub