Contact Form 7の住所入力を自動化!郵便番号から住所を入力させるyubinbangoを設定してみた

Contact Form 7の住所入力を自動化!郵便番号から住所を入力させるyubinbangoを設定してみた

こんばんわtaisonです。

皆さん住所入力の自動化、してますか?

今やお問い合わせフォームでは住所入力の自動化は必須ともいえますね。

今回は少しのjsとcssクラス名を記入するだけで住所入力を自動化するyubinbangoを、Contactform 7に設定してみました。

お手軽導入できる自動入力ライブラリyubinbango

いつもはajaxzip3というライブラリを利用していたのですが、いつの間にか配布先が移転していて
なおかつ新しいライブラリが出現してました。

その新しいライブラリというのが、今回紹介するyubinbango.jsです。

正直ajaxzip3の時でも十分便利だったんですがここにきて更に進化しているとは、、、
開発者の方には頭が下がります。

yubinbango.jsは設置すると、クラス名を付与するだけで自動入力が可能になります。(scriptの読み込みは必要)
以前よりコードがすっきりして、ノンプログラマーでも直感的に使いやすくなりました。

ちなみに公式サイトには以下のような説明が。

設置後の郵便番号データの更新作業から解放される革新的なライブラリajaxzip3の公開から8年。Google Codeの閉鎖の告知とともにGithubに移行しましたが、これを機にTypescriptの新しいコードベースに移行することに。さらに郵便番号データの更新をCircleCIで自動化いたしました。

新しいコードは基本機能のみを抽出したCoreモジュールと、これまでのajaxzip3と互換性を保つためのモジュール、さらにまったく新しいYubinBangoライブラリの3つのモジュールと、Coreライブラリから参照される郵便番号データで構成されています。コードを見直すことによりさらに軽量化いたしました。 もちろん郵便番号が全角数字で入力された場合は半角数字に自動変換します。ハイフンが入力されても動作します。

どうですか?
知識不足の私にはまったく分かりませんでしたが、とにかく使いやすくなったと、、、そういうことでしょう!

yubinbangoの使い方

では使い方。
今回はWordpressのContactForm7に設定するので、そちらに沿って解説します。

まず、function.phpに以下を記載。(テーマのphpと区切って記載する場合は、phpの囲みタグで囲って下さい)

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

もちろんscriptタグでの直接設置もOKです。(公式サイトではscriptタグの直接設置で説明されてます)
次に公式の説明に沿ってContactForm7内のタグにクラス名を設置。

お名前 (必須)
[text* your-name]

メールアドレス (必須)
[email* your-email]

郵便番号
[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]

メッセージ本文
[textarea your-message]

[submit "送信"]

これでOK。
※公式では「ライブラリを有効にするには国名が必要」と書いてありましたが、無くてもいけました。
必須ではないのかな?

↑※再検証したら、自動入力が作動しなかったので、コード内に国名を追記しました。

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

国名のspanタグはフォーム項目の順序に関係なく、どこに設置しても大丈夫です。

ContactForm7上の設定が終わったら、お問い合わせフォームを表示したい場所にコードを設置

[ contact-form-7 id="1" title="コンタクトフォーム" html_class="h-adr"]

formにもクラス名が必要なので忘れないように。
以上で設定は完了です。

いちおうフォームテストしてみましたが、郵便番号はハイフンなしだと入力エラーになりました。
次の機会にちょっと掘り下げて調べてみようかと思います。

↑こちらも再検証後、デフォルトで対応に。ハイフンなしで入力しても住所が出るようになってます。

郵便番号自動入力は超ラクです

設置する方も使う方も簡単。こんな幸せなことはないですね。

ちなみに複数住所の設定なんかも可能みたいでシンプルに幅広い使い方ができそう。
こんな簡単にフォームを簡便化できるなんて、、、!世の中便利になりましたねぇ。

それではまた!

こちらの記事も読まれています

wordpressのファイルアップロード上限を変更して大きいサイズのファイルを投稿する... こんばんわ、ttaisonです。 最近この名前も飽きてきたから変えようかな、、、読みづらいし。 さて、今日はWordpressの投稿にまつわる問題。 Wordpressで作ったホームページやブログで、大きな容量のファイルをアップロードしたい時があるとします。 例えばお店のチラシ画像・...
WordPressのアップロード画像サイズを自動調整してくれるプラグインImsanity... こんばんわ、taisonです。 wordpressでサイトを制作して納品完了したあと、お客様からよくいただく言葉があります。 「画像アップロードに時間がかかるんだけど」 「画像がアップロードできない」 「管理画面が重たくなってきた」 制作側からすると意外と盲点なんですが、画像をアッ...
2018年はサンクスページなし!?contact form7でサンクスページを作らずアナリティクスで... こんばんはtaisonです。 最近仕事で「wordpressのお問い合わせフォームでコンバージョンの計測をしたいからサンクスページを作って」と久しぶりに言われたので、それについて応用も兼ね、ご紹介したいと思います。 コンバージョン計測に必要になる作業 まずContact Form 7でコンバー...

wordpressカテゴリの最新記事