タグ別アーカイブ: contactform7

郵便番号から住所自動入力Ajax(contactform7)

問い合わせフォームで郵便番号を入力すると自動で住所が途中まで出てくるようにします。

実装方法はとってもとっても簡単。数行のコードで実装できます。
実装方法は以下のサイトを参照。
https://code.google.com/p/ajaxzip3/

contactform7で住所自動入力を実装したい

WordPressの問い合わせフォームといえばcontactform7。
contactform7で郵便番号を入れたら住所が自動で出てくるカタチにしたいときも
上記ajaxzip3が役立ちます。

contactform7の設定でinputに「onKeyup」とか「onClick」を付けられればいいのだけど、
めんどくさそうだったのでjQueryで対応。

①郵便番号を入力するinputにclassかIDを付けておきます。

▼contactform7側で作成したタグ。

[text zip id:zipcode]

②住所を出力するinputのnameを確認。

▼contactform7で作成したタグ。nameは「address01」になります。

[text address01]

③Ajaxzip3を読み込み&jQueryでキーアップイベントを書く

▼headでもbodyでも好きなところ(jQuery本体より後)でAjaxzip3を読み込む。
その後jQueryでkeyup(キーボードのキーが押され、上がった時)に住所を出力するコードを記述。

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

	$('input#zipcode').on('keyup',function(){
	AjaxZip3.zip2addr(this,'','address01','address01');
	});

});
</script>

住所を都道府県とそれ以降に分けたい場合は出力用テキストボックスを2つ用意して、

	AjaxZip3.zip2addr(this,'','address01','address02');

↑こんな風に。

とっても簡単。

 

contactform7で404エラーになるバグ(?)の解決方法

WordPress3.6のContactform7(バージョン 3.5.2)で変なバグがあるとのことで修正依頼 。

いろいろ調べてみたら原因が分かったっぽいので残しておく。

症状

・名前(必須)
・アドレス(必須)
・メッセージ(必須)

↑のようなフォームで、「必須項目に記入もれがあります。」のエラーを一回だした後、
そのままアドレスとメッセージを入力し「名前」を空欄で送信ボタンを押すと404エラー

ちゃんと検証してないんですがざっくりこんな症状。

 

原因と解決方法

名前のname属性の値が「name」になってたのが原因っぽい。
WP側で使ってるnameとぶつかったくさい。

「yourname」とかに変更して解決。

変更方法はcontact form7の管理画面で変更するだけ。

 2014-06-01_005036

▲ここがnameだとまずいので、▼your-nameとかに変更。
デフォルトはちゃんとyour-nameになってる。

2014-06-01_005128

▼自動送信メールのところもちゃんと変更しておく。

2014-06-01_005255

 

とりあえずこれで解決。