カテゴリー別アーカイブ: TrustForm

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 を読み込みます。