フォームの入力項目は少なければ少ないほど良いのは事実ですが、内容によってはそんなに削れない…というジレンマを抱えることになるのもまた事実。
であれば削れない部分を少しでも楽に入力できるようにしてあげたほうがユーザーにとっては親切です。
今回は郵便番号の入力で住所を自動表示させる方法を紹介します。
なおフォームの入力画面であればWordPress以外でも使えますが、この記事ではプラグイン「Contact form 7」を使う前提で、郵便番号を入力したら住所が自動で入力されるように設定していきたいと思います。
「YubinBango」とは
郵便番号を入力する事で、その後の住所を自動で入力してくれるjsのライブラリです。フォームの住所入力欄にclassを指定してあげるだけで使えるので、簡単に使えてレスポンスも早いのでオススメです。
詳しい内容はhttps://github.com/yubinbango/yubinbangoに記載してありますのでご確認ください。
ライブラリの使い方
上でも触れましたが、フォームの入力項目に決められたclassを指定するだけで使用が可能です。
Contact Form 7で使う場合はフォームの設定時にclassを指定してあげる必要がありますのでその点も踏まえて使い方を解説していきます。
yubinbango.jsを取得する
まずyubinbango.jsを用意する必要があります。
方法としては
・githubに置いてあるjsファイルを読みに行く
・jsをダウンロードしてサイトにアップロードする
のどちらかになります。
githubに読みに行く場合
wp_enqueue_script( 'yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true );上記のソースをコピペしてfunctions.phpに記述を追加します。
jsをダウンロードする場合
zip形式でダウンロードした場合は解凍して「yubinbango.js」を自サイト内にアップロードしておきます。
呼び出す際は通常通りパスを指定してjsを読み込んであげれば大丈夫です。
お好きな方法でお使いください。
Contact Form 7上での設定
ページ内でyubinbango.jsを読み込むことができたら次はフォームの設定を行います。
例としてContact Form 7でよくある形のお問い合わせフォームを用意しました。
ここから一つずつ設定をしていきます。
p-country-nameの指定
まずはform内に下記のコードをいれ、国名の指定をします。
<span class="p-country-name" style="display:none;">Japan</span>
場所はどこでもいいようですが、ここでは郵便番号を入れるinputの前に入れています。
住所記入欄のクラス設定
住所記入欄にそれぞれclassを指定してきます。
classは以下のように対応しています。
| 郵便番号 | p-postal-code |
| 都道府県 | p-region |
| 市区町村 | p-locality |
| 町域 | p-street-address |
| 番地・建物名等 | p-extended-address |
これをそれぞれ対応するフォームに付与していきます。
画像のように、Contact Form 7で入力エリアにclassを付与する場合は「 class : class名 」と記述しますので注意してください。
また2つ以上classを追加する場合は、市区町村のように「 class : class名 class : class名 」と続けて記述する事で1つの入力エリアに2つのclassを付与することが可能です。
ちなみに番地・建物名は郵便番号を入れても自動入力されませんのでユーザーに入力してもらう必要があります。
フォーム側の設定は以上で完了です。
郵便番号を2つに分ける場合
郵便番号を3桁と4桁に分ける場合はそれぞれにclass:p-postal-codeを指定する事で、両方に郵便番号が入ったタイミングで自動表示させることができます。
フォームを表示させる際の設定
Contact Form 7で作成したフォームをページで表示する際、通常であれば
［contact-form-7 id=”1″ title=”お問い合わせ”］
このようにショートコードを記述するかと思います。
yubinbango.jsでは自動入力を行いたいフォームのformタグにclass=”h-adr”を記述する必要があります。
ショートコードでformタグを呼び出す際にclassを付与するには
［contact-form-7 id=”1″ title=”お問い合わせ” html_class=”h-adr”］
このように、html_class=”class名”と記述を追加してあげる事で呼び出したformタグにclassを付与することができます。
最後に確認を
上記の方法を順番に行っていただければ郵便番号で住所を自動入力できるようになります。案外簡単だったのではないでしょうか？
もし動かないという場合は
・jsが問題なく読み込まれているか
・p-country-nameの記述が漏れていないか
・表示させたい入力エリアにclassが付与されているか
・formタグにclass=”h-adr”が付与されているかどれかが漏れると動かなくなりますので上から順にもう一度確認してみてください。
まとめ
ほぼほぼコピペの繰り返しで導入できるので、順を追って取り組めば問題なく自動表示の実装まで行けたのではないでしょうか？
住所が自動で入力されるようになることでフォーム入力の負担が減り、ユーザーの離脱防止に繋がります。
資料請求などで住所を入力してもらう必要がある場合は、ぜひyubinbango.jsを導入してみてください。
