MW WP Formで郵便番号の自動補完＠WordPress

WordPressでメールフォームのプラグインMW WP Formを使い、これに郵便番号による住所の自動補完機能をつける例です。（郵便番号を入力すると、都道府県と市町村が自動で補完されます）

MW WP Formの実装例はこちらを参照ください。 blog.showzine.co

＊日本のみです（日本語環境のみ動作）

プラグイン「zipaddr-jp」を使用します。

無料で利用できる「商用版」をこの例では使用しますが、利用頻度や信頼性、安全性を考慮した「有償版」も提供されています。

ダウンロードはこちらから
https://wordpress.org/plugins/zipaddr-jp/

ダウンロードしたzipファイルを展開し、出現する「zipaddr-jp」をディレクトリごとWordPressサイトのpluginsディレクトリにアップロードします。

管理画面で該当プラグインを有効化します。設定はとくに不要です。

そして、MW WP Form側で使用したいフォームの項目で以下のように記述します。

   <tr>
        <th>住所</th>
        <td>〒 [mwform_text name="郵便番号" size="3" value="" maxlength="3" id="zip" placeholder="&nbsp;"] - [mwform_text name="zip" size="4" value="" maxlength="4" id="zip1"]&nbsp;[mwform_text name="pref" id="pref" size="6"]&nbsp;[mwform_text name="addr" id="addr" size="30"]</td>
    </tr>

上記の例ではtable要素を使ってますが、そのへんは適宜HTMLを書き換えてください。

バリデーションルールはこのように、必須項目と半角数字にチェックを入れます。

自動送信メールへはこのように記述します。

【ご住所】
〒{郵便番号} - {zip} 
{pref} {addr}

これで完了です。

フォームで住所のところに郵便番号を入力すると自動で都道府県と市区町村が入力補完されます。

実装に使用したWordPress、プラグインのバージョンは以下です。

WordPress: 4.5.2
MW WP Form: 2.8.2
zipaddr-jp: 1.17