MW WP Formにajaxzip3を入れてみた

ボルダリング（室内でやるフリークライミング）に挑戦してみたjyunzyです。
これがまた難しい！こっそり筋トレをしていたのですが、それでもやさしめの物しか登れませんでした。
ただ、登り切れた時の達成感は良いですね！小さい頃に木登りをしていたのを思い出しました。

ボルダリングが2020年の東京五輪の競技として追加されるかも、というニュースがありました。
参考記事→http://www.asoview.com/article/prefecture/tokyo/3962/

さて、今回はWordPressの問合わせフォームプラグインの「MW WP Form」に、郵便番号入力で住所の自動入力ができる「ajaxzip3」を導入する手順をご紹介したいと思います。

今回は、郵便番号7ケタを入力すると、住所が自動入力されるケースで説明します。

①まず、下記のコードをheadタグ内に埋め込んでください。

<script type='text/javascript' src='https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js'></script>
<script type="text/javascript">
  //<![CDATA[
    jQuery(function(){
      jQuery('#●A').keyup(function(event){
        AjaxZip3.zip2addr(this,'●B','●C','●D');
      })
    })
  //]]>
</script>

②次に、上記コードの●A、●B、●C、●Dに対応する入力欄のIDを入力します。

• ●A　郵便番号入力欄のID
• ●B　郵便番号入力欄が前半後半で別れる場合の後半の欄のID（郵便番号入力欄がひとつの場合は空欄）
• ●C　都道府県を表示させる住所入力欄のID
• ●D　市区町村を表示させる住所入力欄のID（住所入力欄がひとつの場合は●Cと同じIDを記述する）

今回は●Bと●Dが無いので、下記のようになります。

      jQuery('#zip').keyup(function(event){
        AjaxZip3.zip2addr(this,'','address','address');

③次に、「MW WP Form」の編集画面で郵便番号と住所のショートコードにIDを入れます。

[mwform_text name="zip" id="zip"]
[mwform_text name="address" id="address"]

これでOKです！
今回はMW WP Formで試しましたが、Contactform7でも可能です。
③の部分を下記のようにすればOKです。

[text zip id:zip]
[text address id:address]

簡単に設置できて、郵便番号データの更新も不要なのでオススメです。