お名前 (必須)
[text* your-name]
メールアドレス (必須)
[email* your-email]
郵便番号
[text your-zipcode class:p-postal-code minlength:8 size:8]
住所
[text your-address class:p-region class:p-locality class:p-street-address class:p-extended-address]
メッセージ本文
[textarea your-message]
[submit "送信"]
``` [上記コードはこちらから引用させていただきました。](http://qiita.com/gatespace/items/e30f4749d089fd67184f) ### form内に国名（p-country-name)をJapanに指定 form内であればどこでも良いのですが、下記のコードをどこかに挿入しましょう。（上では7行目に掲載されています） ``` ``` ### 郵便番号入力inputにp-postal-codeをクラス指定する 郵便番号を入力させるフォーム部分に`p-postal-code`をclass指定します。 郵便番号を最初の３桁と後の４桁とで分ける場合にも、同様に同じclass名を２つの入力フォームに設定します。（後述） 上の例では９行目に当たります。 ### 都道府県、市町村区、町域、以降の住所の欄にそれぞれclassを設定する 下記の表にまとめたように、各入力フォームにクラスを設定します。 | 住所欄 | 指定するクラス名 | | --- | --- | | 都道府県名 | `p-region` | | 市町村区 | `p-locality` | | 町域 | `p-street-address` | | 以降の住所 | `p-extended-address` | ### formタグにh-adrクラスを設定する 設置する`form`タグに`h-adr`クラスを設定します。 Contact Form 7ではformタグは自動的に出力されるので、**ショートコードに追記して追加**します。 通常、このようなショートコードだと思います。 ``` [contact-form-7 id="1234" title="YubinBango test"] ``` ここに、`html_class="h-adr"`という記述を加えて、 ``` [contact-form-7 id="1234" title="YubinBango test" html_class="h-adr"] ``` としてあげることによって、formタグにclassを追加することができます。 ## 郵便番号入力フォームを２つに、各項目をそれぞれのフォームにする場合 郵便番号入力フォームに`p-postal-code`というクラスを付与しなくてはならないと上で書きましたが、その際に**フォームを２つに分ける場合**は後述しますと書きました。 また、都道府県や市町村区をそれぞれ別のフォームにしたい場合も合わせてサンプルコードを掲載しておきます。 ```お名前 (必須)
[text* your-name]
メールアドレス (必須)
[email* your-email]
郵便番号
[text your-zipcode class:p-postal-code minlength:3 size:3] - [text your-zipcode class:p-postal-code minlength:4 size:4]
住所A
[text adress-a class:p-region]
住所B
[text adress-b class:p-locality]
住所C
[text adress-c class:p-street-address]
住所D
[text adress-d class:p-extended-address]
メッセージ本文
[textarea your-message]
[submit "送信"]
``` このように分けることによって、郵便番号フォームを２つ埋められた瞬間に住所を自動入力してくれるようになります。 ## まとめ 勝手な先入観で**「郵便番号からの住所自動入力導入は面倒」**と思い込んでいましたが、実際に組み込むまでに５分くらいで完了しました。 実際にはスタイリングなどもありますので、もう少しかかるかとは思いますが、既存のフォームに導入するのもそれほど難しいことではないかと感じました。 ぜひ、こういった便利な機能を制作者が簡単に導入できるようになり、それが最終的にユーザーの利便性向上へと繋がるお手伝いに当記事がなれば幸いです。