MW WP Form＆Zipaddr-JPで複数の住所入力欄に自動住所補完を実装する方法

前回の記事で、「MW WP Form」と「Zipaddr-JP」を使用して住所自動入力の機能を実装する方法を紹介しました。

/linkはる

今回はその拡張版として、同じフォーム内に住所入力欄が複数ある場合に、すべての入力欄に住所自動入力機能を適用させる方法を紹介します。

例えば物販サイト等のフォームには、「本人の住所」と「送り先の住所」など複数ある場合がありますよね。

このように住所入力欄が1つ以上あるフォームに住所自動補完を実装する場合に役に立つかと思いますので、ぜひ参考にしてみてください。

MW WP FormとZipaddr-JPで複数の住所入力欄に自動入力を実装する手順

ここからは、以下の順番で実装方法を解説していきます。

1. プラグインをインストールして有効化

まずは「MW WP Form」と「Zipaddr-JP」をWordPressにインストールしていきます。

管理画面から[プラグイン]→[新規追加]と進み、上記2種類のプラグインを追加してください。

有効化すると、管理画面のサイドバーに設定画面が追加されます。

2. Zipaddr-JPの設定

まずはZipaddr-JPの設定から見ていきましょう。

このプラグインは有効化するだけで使用できるので、特に変更することはありません。

ここではデフォルトの設定のままで進めていきます。

3. MW WP Formでフォームを作成

続いては、MW WP Formでフォームを作成してきましょう。

管理画面から[MW WP Form]に移動し、[新規追加]で新規フォームを作成します。

ここではDEMOとして、郵便番号と住所の入力欄が2つずつあるフォームを作成しましたので、以下のコードをコピペしてお使いください。

<div class="form-group">
  <label>郵便番号(1)</label>
  [mwform_text name="zip" id="zip" size="12"]
</div>

<div class="form-group">
  <label>住所(1)</label>
  [mwform_text name="addr" id="addr" size="60"]
</div>

<div class="form-group">
  <label>郵便番号(2)</label>
  [mwform_text name="zip2" id="zip2" size="12"]
</div>

<div class="form-group">
  <label>住所(2)</label>
  [mwform_text name="addr2" id="addr2" size="60"]
</div>

<div class="form-btn">
  [mwform_submit name="submit" value="送信する"]
</div>

フォームの中身は自由に作成いただいて良いですが、Zipaddr-JPと連携させるためのいくつかのルールがありますので、次で紹介します。

Zipaddr-JPの住所入力機能を使うために独自のidを付与する

Zipaddr-JPの機能を使用するには、以下の記述方法を守ってください。

また、Zipaddr-JPでは同一フォーム内に6つまで設定することができ、その場合は以下のように数字をつけます。

複数設置する場合は、上記のルールを守って記述してください。

4. フォームの動作確認

上で紹介したサンプルフォームの動作確認をしてきます。

郵便番号と住所入力欄が2つずつ設置されている状態ですね。（独自CSSを当てていますので、ご利用中のテーマによって見た目は異なります）

まずは1つ目の入力欄に、郵便番号を入力してみます。

郵便番号の7桁目を入力した時点で、自動で住所(1)の入力欄に住所が記入されました。

郵便番号(2)にも同様に入力していきます。

住所(2)の入力欄に住所のテキストが入力されました。

これで複数の入力欄に対して、住所の自動入力機能を実装することができました。

【まとめ】MW WP Form＆Zipaddr-JPで複数の住所入力欄に自動住所補完を実装する方法

「MW WP Form」と「Zipaddr-JP」を使用して、住所の自動入力機能を複数設置する方法を紹介しました。

Zipaddr-JPには住所補完のinputを6つまで設置できるようになっており、以下のように数字をつけることで実装可能です。

住所入力欄を複数設置する場合は是非つけておきたい機能ですので、この記事を参考にして実装してみてください。