Contact Form 7でajaxzip3を使う為のメモ(コピペ用)

WordPressで問い合わせフォームを作るときは
Contact Form 7
http://contactform7.com/ja/docs/
です。だいたい

Contact Form 7で郵便番号から住所を自動入力するために使うのは

ajaxzip3
https://github.com/ajaxzip3/ajaxzip3.github.io
です。だいたい
同じような機能のプラグインもあります。
zipaddr-jp
https://wordpress.org/plugins/zipaddr-jp/

どちらでもよいと思いますが、個人的な好みでajaxzip3を使っています。簡単に設定できるようにコピペ用としてメモします。

Contact Form 7で住所自動入力できるajaxzip3を使う方法

郵便番号(ワンボックス)+住所の場合(&bootstrap3)

郵便番号の入力が1つのテキストボックスで住所の入力も1つのテキストボックスの場合(Bootstrap3を使ってくくります)

設置イメージcontact-form-7%e3%81%a8ajaxzip3%e3%82%b5%e3%83%b3%e3%83%95%e3%82%9a%e3%83%ab

Contact Form 7での設定

WordPressでの設定(スクリプトの読み込み)

functions.phpにajaxzip3のスクリプトの読み込みを追加する設定

まずajaxzip3を実行する関数用のファイルを作成(useajaxzip3,js)という名前にしました。

ファイルの中身は

wordpressのテーマディレクトリにあるjavascript用のディレクトリに保存。

functions.phpを以下のように編集

 

郵便番号(ワンボックス)+都道府県+住所の場合(&Foundation6)

郵便番号テキストボックスと都道府県+住所の組み合わせの場合
こちらはFoundation を使ってマークアップした場合
http://foundation.zurb.com/

設置イメージ
contact-form-7%e3%81%a8ajaxzip3%e3%82%b5%e3%83%b3%e3%83%95%e3%82%9a%e3%83%ab2

Contact Form 7の設定

WordPress側の設定

これは前述と同様ですが、useajaxzip3.jsの中身は以下のようにします。

 

SNSでもご購読できます。