このエントリーをはてなブックマークに追加

たまたま同時進行している2つのサイトのメールフォームに郵便番号から住所を自動入力する機能を付けた。
Contact Form7 の方ではajaxzip3 を利用し、メールフォームプロの方では付属のpostcode.cgi で実装した。

メールフォームプロの方では予約希望日欄にデートピッカーも付けたが、これも、それほど難しくなくて、きちんと曜日までを日本語に変換できて良かった。

詳細は後日追記します。

ワードプレスでは「確認画面のあるタイプのもの」という希望の場合はメールフォームプロを組み込みますが、実のところ、項目の多い場合には特に、メールフォームプロのほうが楽です。
Contact Form7 で項目の多いフォームを設定するのは、ちょっと根性が要ります。htmlの分かる人にはメールフォームプロをお薦めします。

6.16追記
ContactForm7 で郵便番号から住所の自動入力
https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js を読み込んで
jQuery(function(){
jQuery(‘#zip’).keyup(function(event){
AjaxZip3.zip2addr(this,”,’addr’,’addr’);
})
})
のように設定、複数設定の場合は上記を繰り返す。
フォームは 郵便番号 [text zip id:zip 10/ watermark] 住所変換 [text* addr id:addr 10/] のように。

*郵便番号欄などで全角入力を半角に変換して欲しいという要望があったので、
$(function() {
$(‘.half’).change(function(){
var txt = $(this).val();
var han = txt.replace(/[A-Za-z0-9]/g,function(s){return String.fromCharCode(s.charCodeAt(0)-0xFEE0)});
$(this).val(han);
});
});
と設定。

メールフォームプロでの住所自動入力は
input type=”text” name=”郵便番号” value=”” onblur=”mfpc(this.form.id,this.name,’ご住所’,’ご住所’,’ご住所’);”
のように、自動入力したい住所欄の name を指定…’都道府県(必須)’,’市区町村(必須)’,’丁目番地(必須)’)…など。上記の場合は1つの住所欄に全て入力。

デートピッカーの設定
jquery.ui.datepicker-ja.js で日本語表示。選択した日時のフォーマットを変換する欄を付けて、そちらを送信。デートピッカーはカレンダーアイコンから開くようにして、選択した日時が入る欄は非表示。

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="~/js/jquery.ui.datepicker-ja.js"></script>
<script type="text/javascript">
  $(function() {
    $( "#datepicker" ).datepicker({
      numberOfMonths: 2,
      showButtonPanel: true,
      altField: "#alternate",
      altFormat: "yy年MMd日(DD)",
      showOn: "button",
      buttonImage: "~/images/calendar.png",
      buttonImageOnly: true
    });
    $( "#datepicker2" ).datepicker({
      numberOfMonths: 2,
      showButtonPanel: true,
      altField: "#alternate2",
      altFormat: "yy年MMd日(DD)",
      showOn: "button",
      buttonImage: "~/images/calendar.png",
      buttonImageOnly: true
    });
  });
</script>

<input type="text" id="datepicker" style="display:none;"> <input type="text" id="alternate" name="ご予約【第一希望】(必須)" />
<input type="text" id="datepicker2" style="display:none;"> <input type="text" id="alternate2" name="ご予約【第二希望】(必須)" />

2013.06.07 投稿 2015.04.05 更新

新しい情報を追記している場合はありますが、古い情報の修正はしていません。投稿日・文中の日付を参照してください。

Recent Articles