以前はajaxzipを使っていたものの、製作元が「新たに設置するときはYubinbangoをお勧めします」と出ていたのでメモ。
こちらは古いほう。Google Codeが廃止されたため跡地化しています。
Google Code Archive - Long-term storage for Google Code Project Hosting.
新しいYubinbangoライブラリはこちら。MITライセンス。ありがたい。
GitHub - yubinbango/yubinbango
設置方法
1 yubinbango.jsの読み込み
コンタクトフォームを設置するページに以下のコードを追加。
普通はhead内に設置するとよい（コードがきれいになる）のだろうけど、案件によってはContact Form 7の設定画面で、フォームの直前に入れることもある。
2 コンタクトフォームの設定
コンタクトフォームの編集画面「フォーム」タブで以下のコードを記入。
コンタクトフォームの設定画面の、郵便番号のショートコードに
class:p-postal-code
を追加する。
[text postal class:p-postal-code]
また、住所の入力フォームには、
class:p-region class:p-locality class:p-street-address class:p-extended-address
を追加する。
入力フォームが一つの場合は、
[text address class:p-region class:p-locality class:p-street-address class:p-extended-address]
となる。複数に分割する場合はclass名を別々に入れる。
3 設置するショートコードにクラスを追加。
最後に、固定ページなり投稿ページなり、コンタクトフォームを設置する際のショートコードに、formタグにclassを追加する。
例えばショートコードが
[contact-form-7 id="1" title="問い合わせフォーム"]
の場合、
[contact-form-7 id="1" title="問い合わせフォーム" html_class="h-adr"]
となる。
テンプレートで設置する場合は以下のようなコードになる。
<?php echo do_shortcode( '[contact-form-7 id="1" title="問い合わせフォーム" html_class="h-adr"]' ); ?>
簡単すぎてびびる。
郵便番号の入力は、ハイフンがあってもなくてもOK。全角でも半角でもOK。
入力欄を3桁と4桁に分けることもできます。（でもユーザビリティを考えると、1つのほうが入力が楽なのではないかと思う）
従来のAjaxZipシリーズはPrototype.jsとかjQueryとかが必要でしたが、yubinbango.jsになってからはそれらを読み込む必要もなくなりました。
製作者様に感謝です。
