News&Tips

2017.04.14

contactform7に住所自動検索機能をつける方法

6af0fce0d1754b99d17987901b3bd32b_m

こちらではお問い合わせフォームに住所自動検索機能をつける方法をご紹介します。
使用するプラグインは「zipaddr-jp」です。
フォームは「contactform7」を使用いたします。

このプラグインをこちらを参考にインストールします。
すると「設定」の中に「zipaddr-jp」という項目が出てきます。
今回は初期設定のままで進めていきますので特に設定は変更いたしません。

スクリーンショット-2017-03-29-12.24.59

「zipaddr-jp」インストールが完了しましたら「contactform7」をインストールした際に表示される「お問い合わせ」に移動します。

スクリーンショット-2017-03-27-16.58.54

移動しましたら「フォーム」の編集にて郵便番号の設置を行います。
この時、設置する郵便番号のid属性とname属性は「zip」としてください。

郵便番号を1つにまとめた例:
[ text zip id:zip ]

郵便番号を3桁と4桁に分けたい場合の例:
[ text zip id:zip ] – [ text zip1 id:zip1 ]

入力例:
スクリーンショット-2017-03-29-12.42.31

次に自動検索した住所を表示させる項目を用意します。
この時、設置する郵便番号のid属性とname属性は「addr」としてください。
※ 住所を分割したい場合は以下を参照

都道府県+以下住所をまとめて表示させる場合の例:
[ text addr id:addr ]

都道府県と以下住所を分けたい場合の例:
都道府県 [ text pref id:pref ]
以下住所 [ text addr id:addr ]

入力例:
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2017-03-29-12-42-31

郵便番号を3桁と4桁に分けたい場合 + 都道府県+以下住所をまとめて表示させる場合の実装例:
スクリーンショット-2017-03-29-12.45.44

※ こちらのレイアウトはカスタマイズしております。

その他、プラグインの詳細はこちらのサイトにて紹介されております。

Categories
Select Categories
Archives
Select Month
Latest Entries