WordPressとContact Form 7で郵便番号検索を実装してみる
何の因果か、本業の会社ホームページの再構築をやっているのだが、
その中で「お問い合わせフォームで、郵便番号を入力したら自動で住所が入る機能が欲しい」
とか、言われた。
まぁ、お問い合わせフォームとしたらイマドキ当然の機能なんだけど、
実装するとなると、結構メンドい。
なるべく簡単にできんかなーと、言うわけで考えてみた。
まず、利用するのはこれ。
株式会社人気組 – ajaxzip3
本当はYahoo!APIの方で実装したかったんだけど、こちらの方がサンプルが揃ってたし、楽そうだったので採用。
「世界一、簡単に設置できる郵便番号検索を目指して!」と言うだけあって、
なかなか簡単に実装できる。
実際には、スタイルシートとかJavaScriptソースを分けた方がいいんだろうけど、
実験するだけならこのソースを投稿として記述すれば問題なく動く。
<script type='text/javascript' src='https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js'></script> <form class="form-horizontal"> <legend>実装サンプル</legend> <fieldset class="control-group"> <label class="control-label" style="padding-top:13px;" for="zip1">郵便番号</label> <div class="controls"> <input type="text" class="xlarge span1" name="zip1" size="10" maxlength="8" style="width:80px;" onkeyup="AjaxZip3.zip2addr(this,'','addr1','addr1');"> </div> </fieldset> <fieldset class="control-group"> <label class="control-label" style="padding-top:13px; for="addr1">住所</label> <div class="controls"> <input type="text" class="xlarge span4" name="addr1" style="width:250px;"> </div> </fieldset> </form>
この実装だと、郵便番号入力欄の「onkyup」イベントで郵便番号検索APIの「AjaxZip3.zip2addr」をCALLし、
住所入力欄「addr1」に値をセットさせている。
さて、WordPressでお問い合わせと言えば「Contact Form 7」
お問い合わせの内容を柔軟にカスタマイズでき、メールで送信してくれ、自動返信も可能。
今回もこちらを採用しようと思っていたが、ひとつ問題が。
このプラグインは入力欄を独自のタグ(ショートコードみたいな感じ)で作成するが、
JavaScriptのイベントを記述する事ができない。
つまり、上記のAPIを呼び出す事ができない。
ではどうするかと言えば、jQueryでイベントをハンドリングしてやる。
まず、Contact Form 7の設定画面でお問い合わせフォームを作成
郵便番号 [text* zip id:zip 10/ watermark] 住所 [text* addr id:addr 10/]
これで出来上がったお問い合わせフォームのコードがこちら。
[contact-form-7 id="**" title="コンタクトフォーム 1"]
で、通常であれば作成したフォームのコードを投稿画面に記述するのだが、
その際、一緒にjQueryのイベントハンドラも一緒に記述する。
こちらもまじめにやるなら、JavaScript部分は別ソースにしてあげた方がいいけど、
今回は実験なので、そのまま投稿画面に記述。
<script type='text/javascript' src='https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js'></script> <script type="text/javascript"> jQuery(function(){ jQuery('#zip').keyup(function(event){ AjaxZip3.zip2addr(this,'','addr','addr'); }) }) </script> [contact-form-7 id="**" title="コンタクトフォーム 1"]
上のサンプルでは郵便番号検索欄の「onkyup」イベントに記述していた内容を、
「jQuery(‘#zip’).keyup」で実装している。
こちらはサンプル載せないけど、動きとしては上と同じ。
その内、プラグイン化してみようかな。
この投稿へのトラックバック
-
-
[…] 参考元URL:doop […]
-
- トラックバック URL
この投稿へのコメント