読了目安時間は約 7 分です。
入力フォームのカスタマイズでよくあるのが「郵便番号を入力すると住所が自動で入力されるようにしてほしい」というご要望。ちょっと難しそうな感じがしませんか？
これが、実際やってみると意外と簡単です。
「Contact Form 7（コンタクトフォーム7）」は、いろいろなカスタマイズが可能です。住所自動入力もすぐ導入できましたので、その方法をご紹介いたします。
郵便番号ライブラリ「YubinBango」
Contact Form 7に郵便番号で住所を自動で入力させる機能を導入するには、GitHubページで公開されている「YubinBangoライブラリ」を使います。
https://github.com/yubinbango/yubinbango
以前は「ajaxzip3」というものを使われていたようですが、その「ajaxzip3」の作者の方が改良した新作が「YubinBango」とのことですので、この「YubinBango」を選びました。
Githubページによると、
これまでにない設定方法（なんとclassを指定するだけ！）のまったく新しいライブラリが誕生いたしました！
このYubinBangoライブラリの革新的な設定方法は今は特殊に感じるかも知れませんが、10年以内にこれが当たり前になっていることでしょう。
https://github.com/yubinbango/yubinbango
とのことで、classを指定するだけで自動入力できるという、とてもありがたい仕様です。本当に普及して当たり前になりそうなくらい簡単です。
YubinBangoライブラリを読み込む
まずは下記のコードを、</head>の直前などに貼り付けてましょう。
<script src=”https://yubinbango.github.io/yubinbango/yubinbango.js” charset=”UTF-8″></script>
もしくは、functions.phpに下記のコードを貼り付けてもOKです。
wp_enqueue_script( 'yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true );
functions.phpに追記するのが怖いという方は、下記のプラグインを使ってみてください。
フォーム内に国名を記述する
次に、下記のコードをフォーム内にコピペします。場所はどこでもOKです。
<p class="p-country-name" style="display:none">Japan</p>
国名の「Japan」を入れなければいけないのですが、明記しなくても良いのでstyle="display:none"とします。
郵便番号にクラスを指定する
郵便番号を入力するフォームに p-postal-codeというclassを指定します。
[text your-zip class:p-postal-code size:8 maxlength:8]
ハイフンが入っても無くても自動的に対応してくれますが、郵便番号を前後に分ける場合は下記のように記述します。
[text your-zip1 class:p-postal-code size:3 maxlength:3] - [text your-zip2 class:p-postal-code size:4 maxlength:4]
前後で同じクラス名を設定します。
住所にクラスを指定する
住所は下記のように記述します。
ひとつの入力フォームに、住所を全部入れる場合は下記のように記述します。
[text your-address class:p-region class:p-locality class:p-street-address class:p-extended-address]
それぞれのクラス名を説明すると
- p-region ＝ 都道府県
- p-locality ＝ 市区町村
- p-street-address ＝ 町域
- p-extended-address ＝ 以降の住所
となっています。ですので下記のように入力フォームを分けることも可能です。
[text your-region class:p-region] [text your-locality class:p-locality] [text your-street class:p-street-address] [text your-extended class:p-extended-address]
formタグにh-adrクラスを指定する
最後に、formタグにh-adrクラスを設定します。
<form class=”h-adr”>Contact Form 7の場合は、下記のように貼り付け用ショートコードの中にhtml_classを使ってクラスを設定することもできます。
[contact-form-7 id=“000” title="コンタクトフォーム名” html_class="h-adr"]このショートコードを、いつものようにコンタクトフォームを設置したい場所にコピペすれば完了です。
まとめ
YubinBangoを有効にする方法は下記の通りです。
- scriptタグでYubinBangoライブラリが読み込まれていること
- formタグのclass指定の中に h-adr が含まれていること
- form中で、国名(p-country-name) が Japan に指定されていること（表示させなくてもOK）
- 郵便番号入力欄のclass指定の中に p-postal-code が含まれていること
- 住所欄のclass指定の中に、都道府県名(p-region)、市町村区(p-locality)、町域(p-street-address)、以降の住所(p-extended-address) がそれぞれ含まれていること
調べる前は「すごい難しいコーディングが必要なんじゃないかな…？」と思っていましたが、あっけないくらい短時間で導入できます。
お客さんのご要望としてよくある部類ですので、是非チャレンジしてみてください！
