WordPressとContact Form 7で郵便番号検索を実装してみる

何の因果か、本業の会社ホームページの再構築をやっているのだが、
その中で「お問い合わせフォームで、郵便番号を入力したら自動で住所が入る機能が欲しい」
とか、言われた。
まぁ、お問い合わせフォームとしたらイマドキ当然の機能なんだけど、
実装するとなると、結構メンドい。
なるべく簡単にできんかなーと、言うわけで考えてみた。

まず、利用するのはこれ。
株式会社人気組 – ajaxzip3
本当はYahoo!APIの方で実装したかったんだけど、こちらの方がサンプルが揃ってたし、楽そうだったので採用。
「世界一、簡単に設置できる郵便番号検索を目指して！」と言うだけあって、
なかなか簡単に実装できる。

ソース

実際には、スタイルシートとかJavaScriptソースを分けた方がいいんだろうけど、
実験するだけならこのソースを投稿として記述すれば問題なく動く。
[code lang=”php” line=”1″]

[/code]
この実装だと、郵便番号入力欄の「onkyup」イベントで郵便番号検索APIの「AjaxZip3.zip2addr」をCALLし、
住所入力欄「addr1」に値をセットさせている。

さて、WordPressでお問い合わせと言えば「Contact Form 7」
お問い合わせの内容を柔軟にカスタマイズでき、メールで送信してくれ、自動返信も可能。
今回もこちらを採用しようと思っていたが、ひとつ問題が。
このプラグインは入力欄を独自のタグ（ショートコードみたいな感じ）で作成するが、
JavaScriptのイベントを記述する事ができない。
つまり、上記のAPIを呼び出す事ができない。
ではどうするかと言えば、jQueryでイベントをハンドリングしてやる。

まず、Contact Form 7の設定画面でお問い合わせフォームを作成
[code lang=”php” line=”1″]
郵便番号 [text* zip id:zip 10/ watermark]
住所 [text* addr id:addr 10/]
[/code]
これで出来上がったお問い合わせフォームのコードがこちら。

[contact-form-7 id="**" title="コンタクトフォーム 1"]

で、通常であれば作成したフォームのコードを投稿画面に記述するのだが、
その際、一緒にjQueryのイベントハンドラも一緒に記述する。
こちらもまじめにやるなら、JavaScript部分は別ソースにしてあげた方がいいけど、
今回は実験なので、そのまま投稿画面に記述。

Contact Form 7対応版のソース

[code lang=”php” line=”1″]

[contact-form-7 id=”**” title=”コンタクトフォーム 1″][/code]

上のサンプルでは郵便番号検索欄の「onkyup」イベントに記述していた内容を、
「jQuery(‘#zip’).keyup」で実装している。

こちらはサンプル載せないけど、動きとしては上と同じ。
その内、プラグイン化してみようかな。