WEBのこと

【YUBINBANGO】contact form7で住所を自動入力をする1番簡単な方法を解説!

contact form7

ワードプレスユーザーでcontact form7プラグインを使っている人は多いと思います。

contact form7で住所の項目を入れる場合、郵便番号を入力したら自動で住所が出るとユーザーに優しいですよね。

住所を自動入力をするための簡単な方法として、「YUBINBANGO.js」を使います。

そこで、本記事では《【YUBINBANGO】contact form7で住所を自動入力をする1番簡単な方法を解説!》について書いていきます。

YUBINBANGOとは

YubinbangoはGitHubで公開されているライブラリです。

https://github.com/yubinbango/yubinbango

基本的には、fanction.phpにライブラリを読み込んで、contact form7内に簡単な記述をするだけで使えます。

IZ
IZ
コピペできるテンプレートは後ほど!

YUBINBANGOを読み込む

それでは、function.phpにYUBINBANGOライブラリを読み込みましょう!

管理画面からfunction.phpを修正する場合は「外観 > テーマ編集 > function.php」を探してください。

※function.phpをいじる際は バックアップをとっておきましょうね! 

広告

Contact form7をYUBINBANGOを使って設定する

Contact form7プラグインを入れている方は管理画面のメニューに「お問い合わせ」が表示されているので、そちらから設定をしていきます。

<YUBINBANGOを使ったお問い合わせ記入例>

下記の<span>~</span>はフォーム内にあれば問題ありません。

住所の枠が1つで足りるのであれば上記の記入方法でよいですが、住所を都道府県、市町村、建物名などで分けたい場合は下記の記入例を参考にしてください。

ソースコードの参照はこちら

お問い合わせページにフォームを表示する

お問い合わせページに作成したお問い合わせフォームをショートコードで表示する場合、こちらを使用します。

ショートコードの最後に「html_class=”h-adr”」を入力するようにしましょう。

これでContact formの設定はすべて終わりです!

IZ
IZ
めっちゃ簡単!HTML、CSSなどの知識がある人は5分でできるぞっ!

広告

contact form7で住所を自動入力する方法まとめ

本記事では《【YUBINBANGO】contact form7で住所を自動入力をする1番簡単な方法を解説!》について書いてきました。

住所の自動入力はお問い合わせで住所入力を求める場合、今や必須になっていますよね。

今まで他のプラグインをいれて実装していた人もいると思いますが、この方法が1番簡単でスマートだと思います。

是非使ってみてくださいね!