TrustFormで住所を自動入力できるようにする

お問い合わせフォームで郵便番号だけ入れたときに自動で住所反映してるとうれしいですよね!

そんなときはこいつが便利です!

ajaxzip3

じゃぁ設定手順です。

1.Formに郵便番号と住所のテキストボックスをつくる

郵便番号の項目のclassにzipを入力し、その下に住所の項目をつくる。

2. javascriptを読み込ませる

まずはheader内に以下のコードを入力する。

通常の場合

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>

sslをしようする場合

<script src="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js" charset="UTF-8"></script>

どちらかを入力した後以下のコードもheader内に入力する。

<script type="text/javascript">
jQuery(document).ready(function($) {
 $(".zip").keyup(function(){
 var addrInput = $(this).parents('tr').next().children('td').children('div').children('input').attr('name');
 AjaxZip3.zip2addr(this, '', addrInput, addrInput);
 });
});
</script>

3.固定ページにTrustFormのショートコードを読み込ませる

最初に作成したフォームのショートコードを固定ページに読み込ませる。

4.共通スタイルシートを読みこませる

Trust Form を使う際には各フォームごとの CSS が生成されるのですが、それを消しちゃって共通のスタイルを読み込ませたい場合の対処方法です。trust-form.php の940行目あたりを下記のように変更します。


if ( file_exists( $this->plugin_dir . '/css/front_'.$atts['id'].'.css' ) ) {
 wp_enqueue_style('trust-form-front', $this->plugin_url . '/css/front_'.$atts['id'].'.css');
} else {
 wp_enqueue_style('trust-form-front', $this->plugin_url . '/css/front.css');
}
//wp_enqueue_style('trust-form-front', "/wp-content/plugins/trust-form/css/front_{$atts['id']}.css"); // 元の。使わないので消してもOK。

こうすることで特定の CSS があるものは読み込まれ、なければ front.css を読み込みます。

「TrustFormで住所を自動入力できるようにする」への1件のフィードバック

  1. zipaddr.comの照沼(てるぬま)と申します。
    Trust Formで郵便番号から住所の自動入力を行う新しい方法のご紹介です。
    手順は、
    (1)WPプラグイン「zipaddr-jp」をインストールする。
    (2)プラグインの設定で、`システム拡張用のAP識別子`欄に[TrustForm]と入力します。
    (3)普通にTrust Formのフォームを定義する。
     ※郵便番号や住所欄にはフィールド属性としてclass欄に、zipやaddrと定義して下さい。
    これで動きますので、お試し下さい。
    詳細は、http://zipaddr2.com/wordpress/の「Trust Form」部分を参照願います。

コメントを残す