WordPressのお問い合わせフォームプラグイン Contact Formで郵便番号から住所自動入力させる
2013/06/10
タイトル通りWordPressのお問い合わせフォームプラグイン Contact Formで郵便番号から住所自動入力させる、という事をやろうとしたのですが、
調べていても微妙にコードが間違っているらしく上手く動きませんでしたので、成功したコードを書いておきます。
郵便番号から住所自動入力させるために、「ajaxzip3」というライブラリを使用します。
さらに、それをContact Form内で動かすためにjqueryを使用します。
ヘッダー内にjQueryへのリンクが貼られていないかチェック
貼られていなければ、以下のリンクをヘッダー内に追加します。
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> |
ヘッダー内にコードの追加
jQueryのリンク以下に、下記コードを追加します。
1 2 3 4 5 6 7 8 | <script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script><script>jQuery(function(){ jQuery('#zip').keyup(function(e){ AjaxZip3.zip2addr(this,'','add','add'); });});</script> |
Contact Formで設定
Contact Formプラグインで下記のようなタグを生成して保存しておきます。
[[[text* zip id:zip 10/ watermark “例）1000001”]]]
[[[text* add id:add]]]
Contact Formフォームタグを、任意の場所で呼び出して完成です。
動作サンプル
以下のフォームが動作サンプルです。