フォームで、郵便番号を入力するたびに都道府県や市区町村を手で選び直すのは地味に手間がかかります。そんなときに使えるのが、郵便番号から住所を自動入力できるWordPressのプラグイン、「zipaddr-jp」です。
zipaddr-jp の使い方
zipaddr-jp は、郵便番号を入力すると都道府県・市区町村・町域までを自動で埋めてくれるプラグインです。主要なWordPressのフォームプラグインに対応しています。
- プラグインをインストール
- フォームを作成→フォームの郵便番号と住所のところに指定のidを入れる
設定はこれだけです。
まずはプラグイン追加画面から「zipaddr」と検索し、インストールして有効化。
zipaddr-jp | WordPress.org 日本語
環境設定
有効化すると「Zipaddr-JP」という項目が追加され、次のような設定ができます。
【郵便番号の区切り文字】
初期値は「-」で、空欄にすると自動入力される表記からハイフンを外せます。
【ガイダンス位置・文字サイズ】
入力中に表示される案内文の位置や大きさを、PC・スマホそれぞれで調整できます。
【placeholder上書】
初期値は「住所自動入力」で、スペースを入力することで非表示にできます（実際にはスペースが表示されるのですが、見た目としては何も書かれていない状態）。
【選択ごにフォーカスするid名】
自動入力が完了したあと、カーソルをどの入力欄に移動させるか指定できます。例えばマンション名など手動入力が必須になる項目に移動させたり、住所の次の項目に移動させたい場合などに使えます。デフォルトは id="addr" に移動します。
プラグインで自動入力ありのフォームを作る
自動入力を効かせるには、フォームの各入力欄に次のid名を指定します。使うフォームプラグインが変わっても、指定するid名は共通です。
| 項目 | id名 (1件目) | id名 (2件目以降) |
|---|---|---|
| 郵便番号 | zip | zip2、zip3… |
| 都道府県 | pref | pref2、pref3… |
| 市区町村 | city | city2、city3… |
| 地域(町域) | area | area2、area3… |
| 番地以降 | addr | addr2、addr3… |
id名を分けて指定した場合、自動入力されるのはpref・city・areaの3つです。addrはこの自動入力の対象外で、番地や建物名をユーザーが手入力するための欄になります。
pref・city・areaはいずれも郵便番号側からの書き込み対象になっているため、ここに手入力してもらっても、郵便番号を入力し直すたびに自動入力の内容で上書きされてしまいます。特にareaは項目名だけでは何が入るのか伝わりにくいので、area欄自体にプレースホルダー(「町域が自動入力されます」など)を設定しておくと親切です。readonly属性を付けて、そもそも手入力できないようにしておくのも一つの方法です。
pref・city・areaの欄を用意せず、zipとaddrだけでフォームを組んだ場合は、都道府県・市区町村・地域までがまとめてaddr欄に自動入力されます。
1つのフォームに住所欄を2組以上置きたい場合は、2組目のid名をzip2・pref2・city2・area2・addr2のように番号を揃えて指定します。
Contact Form 7の場合
自動入力を動作させるには、フォームタグを生成する際に決められた id を指定する必要があります。
Contact Form 7でも指定するid名はMW WP Formと同じです。フォームタグの中で「id:zip」のようにid属性を指定します。
Contact Form 7では、フォームタグの中でid属性をつける際は id:zip と記述します。
[text* zip id:zip minlength:7]
[text pref id:pref]
[text city id:city]
[text area id:area]
[text addr id:addr]MW WP Form の場合
MW WP Formでは、ショートコードのidパラメータで同じid名を指定します。
MW WP Form での書き方例
【郵便番号と住所入力欄が一つずつ】
[mwform_text name="zip" id="zip"]
[mwform_text name="addr" id="addr"]【住所入力を分ける】
[mwform_text name="address" id="pref"]
[mwform_text name="address" id="city"]
[mwform_text name="address" id="area"]
[mwform_text name="address" id="addr"]【複数の住所入力を作る】
住所1
[mwform_text name="zip" id="zip"]
[mwform_text name="addr" id="addr"]
住所2
[mwform_text name="zip2" id="zip2"]
[mwform_text name="addr2" id="addr2"]対応しているその他のフォームプラグイン
zipaddr-jpはContact Form 7やMW WP Form以外にも、Trust Form、WooCommerce、Ninja Forms、WPForms、Visual Forms Builder、Snow Monkey Forms、JetFormBuilderなど幅広いフォームプラグインに対応しています。基本的な考え方は同じで、各プラグインの入力欄に上表のid名を割り当てれば自動入力が有効になります。
zipaddr-jpが動かないときに確認すること
MW WP Form を使って zipaddr-jp で自動入力がうまく動かなかったことがあったので、その時に対応したことを記載します。
mwform_zip を使っても自動入力されない
MW WP Form には郵便番号専用の「Zip Code」というフォームタグがありますが、これを使うと自動入力が動きませんでした。
[mwform_zip name="mwform_zip-〇〇"]zipaddr-jp で自動入力を行いたい場合は 「Text」フォームタグ（[mwform_text]）を選択しましょう。
do_shortcodeでテンプレートに出力している場合
テンプレートファイル（page.phpなど）に do_shortcode() を使用してフォームを出力させることもできます。
私はこの方法で出力させることが多く、zipaddr-jp を使ったフォームの時にもこの方法で出力させていましたが、住所の自動入力が動作しませんでした。
動かなかったコードがこちら。（テンプレートファイルに以下のコードを記述）
<?php echo do_shortcode('[mwform_formkey key="000"]') ?>コードのidやnameが間違っていないか、記述箇所が違うのか…何度も確認したり見直したけど、間違いはない。
そこで do_shortcode() を使わずWordPressのページ編集のところにショートコードを入力して the_content() で出力させる、という方法を取りました。
修正方法は、固定ページの編集画面に行ってコードを入力し保存。
テンプレートファイルへ <?php the_content(); ?> を記述する。
これで全く動いてくれなかった自動入力がすんなり動きました！
公式サイトの説明をちゃんと読むと、「do_shortcode() を使う場合は特別な処理が必要」ということが書かれていました。
参考：zipaddr-jp公式
ただちゃんと理解できず、この説明内容のことを行なってもうまくいかなかったんですよね…（理解できる人は問題ないかも）なので、私は結果として do_shortcode() を使わずに実装する方法を取りました。
住所の自動入力ライブラリは他にもいくつかあります。どうしてもうまくいかず、解決に時間がかかってしまう場合は、他の方法で試してみた方が早い時もあります。
id名が抜けていないか、スペルミスや全角文字が入っていないかを確認する
zip・pref・city・area・addrのうち、いずれかのid名を設定し忘れていると、そのデータの行き場がなくなり自動入力がうまく動きません。特にarea(地域)は見落とされやすく、area欄がないと本来area側に入るはずの住所までaddr欄にまとめて入力されてしまいます。
id名のつづりの誤りや、全角文字・余分な空白が紛れ込んでいないかもあわせて確認しましょう。
問い合わせ数が多い場合は有償版を使用
この zipaddr-jpプラグインは無料でも利用できますが、利用が「1,000件／月 を越える、アクセスが集中する」といった場合は、「有償版」に切り替える必要があります。
設定画面から切り替えが可能ですが、まずは有償版の利用申請が必要になります。
もし利用数が多い場合は、有償版の利用申請をするか他の方法にするか検討してください。
カテゴリー : WordPress
タグ :
