こんばんわ。ラビです。
お問い合わせや申し込みに利用するフォームの中で住所の項目を利用する時、郵便番号入力すると住所が自動入力されるフォームってありますよね。
「なんだか導入するの面倒くさそうだなぁ」
と思えるこの自動入力フォームも、とあるライブラリを使えば
カンタンに導入できてしまいます。
phpなどの知識がなくても導入可能ですので、安心して読み進めてください 笑
Contact Form7に住所自動入力機能を付けるライブラリ「YubinBango」
こちらのYubinBangoライブラリを使用することでContact Form 7にもカンタンに
住所の自動入力機能を導入することができます。
以前は住所の自動入力ライブラリというと、
ajaxzip3というのが主流だったんですが、このajaxzip3の進化版として作者の方が新作したのが、YubinBangoなんです。
公式Githubには以下のように説明があります。
今度の郵便番号検索ライブラリは、なんとclassを指定するだけ！
下記のようにmicroformats2の標準仕様に合わせたclassを記載をするだけで郵便番号検索機能が有効になります。<script src=”https://yubinbango.github.io/yubinbango/yubinbango.js” charset=”UTF-8″></script>
<form class=”h-adr”>
<span class=”p-country-name” style=”display:none;”>Japan</span>〒<input type=”text” class=”p-postal-code” size=”8″ maxlength=”8″><br>
<input type=”text” class=”p-region p-locality p-street-address p-extended-address” /><br>
</form>引用：GitHub – yubinbango/yubinbango3
classを指定するだけで自動入力させることができるという
何とも便利なライブラリ！
それではさっそく設定してみましょう。
YubinBangoの設定方法
まずは事前準備として、WordPressの導入と、Contact Form 7プラグインを導入
しておいてください。
YubinBangoをWordpressに設定する
まずYubinBangoをWordPressに設定します。やり方は２つあるので両方のせておきます。
好きなやり方でYubinBangoを読み込んでください。
scriptタグで読み込む方法
footer.phpを編集してbodyの手前などに下記のコードを貼り付けて保存してください。
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>functions.phpで読み込む方法
functions.phpに下記のコードを貼り付けて保存してください。
wp_enqueue_script( 'yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true );Contact Form 7にクラス名などを設定する
次にContact Form 7側でYubinBangoとの紐づけをおこないます。
scriptタグの設置以外にもYubinBangoを有効にする条件として、
- formタグのクラスに「h-adr」が含まれていること
- form中に国名が指定されていること
- formの郵便番号の欄にクラス「p-postal-code」が含まれていること
- formの住所欄に「p-region」「p-locality」「p-street-address」「p-extended-address」が含まれていること
があるので、これらを設定していきます。
例として下記のようなコードを用意しました。
<span class="p-country-name" style="display: none;">Japan</span>
郵便番号
[text your-zipcode class:p-postal-code maxlength:8 size:8]
住所
[text your-address class:p-region class:p-locality class:p-street-address class:p-extended-address]おなじみContact Form 7の項目設定欄にあるコードですね。
これを先ほどの条件番号にあてはめて、上から順に説明すると、
- 2.国名の指定
- 3.郵便番号にクラス名「p-postal-code」を付与
- 4.住所にクラス名「p-region」「p-locality」「p-street-address」「p-extended-address」を付与。
となっています。
条件にある2と3と4が設定できましたね。
ちなみに住所欄になんでクラスを４つも付けるの？
と思う方もいるかもしれないのでカンタンに説明しておくと、住所は都道府県（p-region）、市区町村（p-locality）、町域（p-street-address）、以降の住所（p-extended-address）に分かれており、それぞれの項目に対応するクラス名が付けられています。
たまたま上記のコードでは住所を一緒にしてますが、クラス名が分かれていることで入力欄を分けることも可能なんですね。
一応書き方を載せておくので必要な方は参考に。
<span class="p-country-name" style="display: none;">Japan</span>
郵便番号
[text your-zipcode class:p-postal-code maxlength:8 size:8]
住所
[text your-region class:p-region]
[text your-locality class:p-locality]
[text your-street class:p-street-address]
[text your-extended class:p-extended-address]Contact Form 7の貼り付けコードの中にクラスを設定する
最後に条件１。
formタグのクラスに「h-adr」を設定する方法です。
Contact Form 7の貼り付けコードの中にhtml_classを使ってクラスを付与します。
以下のような感じ。
[ contact-form-7 id="1" title="コンタクトフォーム" html_class="h-adr"]これでフォームを表示したい場所にコードを貼り付けたら設置完了。
うまく自動入力できましたか？
まとめ
ユーザビリティを考えるともはや必須といえるお問い合わせの住所自動入力。
こういった適切なライブラリを使ってきちんと設定していきたいですね。
もちろん今回のライブラリはWordpress以外でも使用可能ですので、 使えるところはどんどん使ってさまざまなケースに対応していきましょう！
それではまた！
