Contact Form 7にYubinBangoで郵便番号から住所を自動入力させる方法

お問い合わせフォームや申し込みフォームなど、住所の入力を必要とするフォームにはよく付いています郵便番号を入力すると自動的に住所を入力してくれる機能ですが、導入するの大変なんじゃないの？と思いませんか？

僕も面倒なんだろうなぁと調べもせず勝手な先入観を持っていたのですが、ひょんな拍子で調べてみたらこんなライブラリを見つけまして、しかもWordPressで利用されるお問い合わせフォームを設置するプラグインの代表格と言っても過言ではないContact Form 7に導入する方法も試してみましたので共有してみます。

先にお伝えしておきます。めっちゃ簡単です。

YubinBangoライブラリとは

こちらのGitHubページで公開されているライブラリになります。

https://github.com/yubinbango/yubinbango

これまでにない設定方法（なんとclassを指定するだけ！）のまったく新しいライブラリが誕生いたしました！
このYubinBangoライブラリの革新的な設定方法は今は特殊に感じるかも知れませんが、10年以内にこれが当たり前になっていることでしょう。

ほんと当たり前になったら、もっと導入が進んでユーザーも便利になるはず。

まずはライブラリを読み込む

まずはWordPressテーマ側、functions.phpにてYubinBangoライブラリを読み込みます。

wp_enqueue_script( 'yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true );

Contact Form 7の設定

まずは、Contact Form 7のフォームを作成するところで、このようにフォームを作成します。詳しくは後述します。

<p>お名前 (必須)<br />
    [text* your-name] </p>

<p>メールアドレス (必須)<br />
    [email* your-email] </p>

<span class="p-country-name" style="display:none;">Japan</span>
<p>郵便番号<br />
    [text your-zipcode class:p-postal-code minlength:8 size:8]</p>

<p>住所<br />
    [text your-address class:p-region class:p-locality class:p-street-address class:p-extended-address]</p>

<p>メッセージ本文<br />
    [textarea your-message] </p>

<p>[submit "送信"]</p>

上記コードはこちらから引用させていただきました。

form内に国名（p-country-name)をJapanに指定

form内であればどこでも良いのですが、下記のコードをどこかに挿入しましょう。（上では7行目に掲載されています）

<span class="p-country-name" style="display:none;">Japan</span>

郵便番号入力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というクラスを付与しなくてはならないと上で書きましたが、その際にフォームを２つに分ける場合は後述しますと書きました。

また、都道府県や市町村区をそれぞれ別のフォームにしたい場合も合わせてサンプルコードを掲載しておきます。

<p>お名前 (必須)<br />
    [text* your-name] </p>

<p>メールアドレス (必須)<br />
    [email* your-email] </p>

<span class="p-country-name" style="display:none;">Japan</span>
<p>郵便番号<br />
    [text your-zipcode class:p-postal-code minlength:3 size:3] - [text your-zipcode class:p-postal-code minlength:4 size:4]</p>

<p>住所A<br>[text adress-a class:p-region]</p>

<p>住所B<br>[text adress-b class:p-locality]</p>

<p>住所C<br>[text adress-c class:p-street-address]</p>

<p>住所D<br>[text adress-d class:p-extended-address]</p>

<p>メッセージ本文<br />
    [textarea your-message] </p>

<p>[submit "送信"]</p>

このように分けることによって、郵便番号フォームを２つ埋められた瞬間に住所を自動入力してくれるようになります。

まとめ

勝手な先入観で「郵便番号からの住所自動入力導入は面倒」と思い込んでいましたが、実際に組み込むまでに５分くらいで完了しました。

実際にはスタイリングなどもありますので、もう少しかかるかとは思いますが、既存のフォームに導入するのもそれほど難しいことではないかと感じました。

ぜひ、こういった便利な機能を制作者が簡単に導入できるようになり、それが最終的にユーザーの利便性向上へと繋がるお手伝いに当記事がなれば幸いです。

オレインデザイン