コンタクトフォーム7で郵便番号から住所を自動入力させる方法

2018年11月13日2019年1月16日

コンタクトフォーム7で一番よくやる(やれと言われる)カスタマイズの1つが、郵便番号からの住所自動入力ではないかと思います。

前置きが短めですが、今回は郵便番号を入力すると住所が勝手に表示されるようにカスタマイズしてみたいと思います。

郵便番号ライブラリの読み込み

今回はYubinBangoライブラリを利用します。以前はajaxzip3をよく使いましたが、YubinBangoライブラリの前身がajaxzip3というような立ち位置です。名前はダサめですが、こっちの方が新しいのです。。

読み込みは基本的に、下のコードを使用中のテーマのfunctions.phpに貼り付ければOKです。もし最終行に、?>が記述されていたら、その前の行に貼り付けます。

ワードプレス本体を長い間更新せずに運用している場合などは、上のコードでは読み込めないかもしれません。その場合は下のコードを、使用テーマのheader.phpの中から</head>を探し、その前の行に直接貼り付けてしまいましょう。

※HTML5で書かれたテーマを使用している場合は、type=”text/javascript”の部分は無くても問題ありません。

コンタクトフォーム7側の設定

ここまでで郵便番号のライブラリは読み込めているはずです。つづいて、コンタクトフォーム7に反映させましょう。

1. 使用するフォームに”h-adr”とclassを付ける

YubinBangoライブラリをフォーム内で使用するには、formタグにh-adrというclassを付与します。コンタクトフォーム7の場合、貼り付け用のショートコードに追記する事でclassが付けられます。classなんて知らん!という方は貼り付ければOKなので、書き換えてみましょう。

通常は以下のようなページ貼り付け用ショートコードが作成されます。

コードの最後に、以下のように書き加えます。

コンタクトフォーム7では、貼り付け用ショートコードにhtml_class=”〇〇”とすると、formタグにclassが付与できます。覚えておくとCSSでカスタマイズする時にも便利です。

2. フォーム内に国名を記述する

日本の郵便番号を取得するには、以下のコードをコピーしてコンタクトフォーム7のコード内に貼り付けます。貼り付け場所はどこでも大丈夫です。

3. 郵便番号と住所の入力欄を作る

最後に郵便番号と住所の入力欄を実際に作りましょう。

郵便番号の入力欄にはp-postal-codeというclassを付けます。

シンプルな郵便番号自動入力フォームのサンプル

以下は一番シンプルなパターンかと思います。郵便番号を入力すると、その下の「ご住所」欄に自動で町名までが入力され、その下の「続きの住所」に番地などを入力してもらう形です。この形でよければ、このままコピペで使用できます。

これで一通り出来上がりました。

実際の表示例

YubinBangoライブラリでコンタクトフォーム7に住所を自動入力

しかし、入力枠を分けたい場合も多いはず。。次は色々なバリエーションのサンプルを載せておきます。

入力枠を分ける場合のサンプル

サンプルを載せますが、コンタクトフォーム7用のCSSが記述されているテーマも結構ありますので体裁を整えるCSSや、囲みのHTMLは割愛します。

郵便番号を、前3桁と後ろ4桁に分けるパターン

YubinBangoライブラリは、ハイフンを入れられてしまったり全角で入力されてしまっても対応してくれるので、実際のところ分ける必要など無いのですが、分けたいという方もいるでしょう。その場合は、p-postal-codeというclassのテキスト入力欄を2つ作っちゃいます。

実際の表示例

郵便番号を前3桁と後ろ4桁に分けるパターン

住所を2分割した1番ポピュラーなパターン

続きのご住所に町域までが自動で表示され、足りない番地などだけ入力して頂くパターンです。日本の住所を区切る場合、市区町村と町域の表現があいまいになってしまいがちなので、すべて分けるのは現実的ではなく、このような形のフォームが多く見られます。

実際の表示例

住所を2分割した1番ポピュラーなパターン

Yubinbangoライブラリのclassのまとめ

実際にコンタクトフォーム7のコード内には、class:〇〇と記述します。

郵便番号を入力するエリアに指定するclass

  class
郵便番号入力 p-postal-code

住所を自動表示させるエリアに指定するclass

表示する住所 class
都道府県

p-region

市区町村

p-locality

町域

p-street-address

残りの住所*

p-extended-address*

*郵便番号から詳細住所が特定できるケースのみ表示される。

最後に

もしかすると、途中でハマってしまった方もいるかもしれませんが、ご紹介したように住所の自動入力システムは意外とカンタンに作れます。

自分のサイトだと「自動入力なんて要らないよ~」と思ってしまいますが、実際に制作の現場では要望も多いものです。郵便番号の入力欄付近に、目立つように自動入力機能がある事を書いておくと、さらにフォームの利用率も高まりそうですね。

One Reply to “コンタクトフォーム7で郵便番号から住所を自動入力させる方法”

Comments are closed for this post.

関連のある記事

コンタクトフォーム7でreCAPTCHA V3を導入する方法

コンタクトフォーム7でreCAPTCHA V3を導入する方法

記事を読む

コンタクトフォーム7で動的にデフォルト値や選択肢・送信先などを設定する方法

コンタクトフォーム7で動的にデフォルト値や選択肢・送信先などを設定する方法

記事を読む

コンタクトフォーム7でフォームを判定して別々のサンクスページを表示する方法

コンタクトフォーム7でフォームを判定して別々のサンクスページを表示する方法

記事を読む

コンタクトフォーム7にサンクスページを追加する方法

コンタクトフォーム7にサンクスページを追加する方法

記事を読む

コンタクトフォーム7の「ありがとうございます」の表示位置を変更する方法

コンタクトフォーム7の「ありがとうございます」の表示位置を変更する方法

記事を読む


目次へ
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages