wordpress コンタクトフォーム7に郵便番号→住所自動入力機能をつける

広告

郵便番号から住所へ変換してくれるjQueryプラグインについての記事を見かけたので、早速wordpressコンタクトフォームに追加してみました。
元の機能追加が簡単なので、WPでもとても簡単です。

【参考】
超便利な郵便番号から住所へ変換してくれるjQueryプラグイン
https://blog.supersonico.info/?p=1574

【環境】
Wordpress4.3.1 + contact form7 (プラグイン)
エックスサーバー
テーマ:simplicity、およびsimplicity子テーマインストール済みのこと。
他のテーマでもたぶん余裕で動きますけど。

【メリット】
利用者の住所入力の手間が減る
かっこいい。
ただのcontact form7なんだけど技術あるっぽく見える

広告

ヘッダーでjQuery呼び出し、プラグイン呼び出し

外観>テーマの編集>header-insert.php
の一番下に

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script src="//jpostal-1006.appspot.com/jquery.jpostal.js" type="text/javascript"></script>


<script>
$(document).ready(function(){
    $('#zipcode').jpostal({
        postcode : [
            '#zipcode',
        ],
        address : {
            '#address'  : '%3%4%5%6',
        }
    });
});
</script>

を入力します。
simplicity以外のテーマの場合はheader.phpあたりに書き込んで下さい
simplicityは他にもjQueryを呼び出しているので複数のバージョンのjQqueryを使うことになるわけですが、とりあえず問題なく動いているので手を加えてません。
Screenshot 2015-11-20 20.20.01

コンタクトフォームの項目にidを追加する

最新バージョンのcontact form7にはIDやClassを追加するための項目があるのでそちらに記載します。

text項目の名称とID名どちらもzipcode、addressにしました。ひねるのも面倒ですし。
ZIPCODE

あとは普通のとおりにフォームに書き込みます。

<tr><td>郵便番号</td><td>[text zipcode id:zipcode]</td></tr>
<tr><td>住所</td><td>[text address id:address]<br><span style="font-size:small;color:red;">※郵便番号を入力すると該当する住所が自動入力されます</span></td></tr>

※おっと、テーブルタグ(tr、td)は私の都合ですので必要に応じて編集して下さい。

WordPressでの稼働サンプル

実際に運用しているサイトです。
もともとが簡単なのでphpやjsの知識がない私にも簡単でした。ばんざーい。
https://sweets-fujii.com/blog/ordercake/
Screenshot 2015-11-21 4.44.49

Akira

北海道出身、旅と写真と山とダンス好き。
クラニオセイクラルやタイマッサージなどのセラピストとして活動しつつ、ウェブ制作も手掛ける。
旅ネタの多い、気まぐれブログ。
詳細プロフィール

この記事は公開から1年以上経過しています。
情報が古くなっている可能性がありますのでご注意下さい

シェアする

フォローする