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

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

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

2020-05-26 都道府県の入力欄にセレクトボックス（ドロップダウン）を使用する方法を追記しました。

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

今回は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を付けます。

これで準備は整いました。後は住所入力欄（自動表示される部分）を作成していきます。

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

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

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

実際の表示例

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

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

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

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

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

実際の表示例

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

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

実際の表示例

上のサンプルではちょっと区切りが適当ですが、都道府県・市区町村・続きのご住所 といった3分割あたりが1番一般的かもしれませんね。

都道府県の入力欄にセレクトボックスを使う方法

都道府県だけセレクトボックスに…というパターンは結構あるのではないでしょうか。こちらはちょっと面倒になりますが、よく読んでいただければ誰にでもコピペでできるように書いてみますので、どうしてもセレクトボックスを使用したいという方はチャレンジしてみて下さい。

都道府県の入力欄の作り方が違うだけですので、その他の点は前節までの内容を読んでください。

都道府県のセレクトボックス（ドロップダウン）を作成

テキストフィールドを使用する場合は”p-region”というクラスを使用しましたが、セレクトボックスを使用する場合は”p-region-id”というクラスを付けたselectを作成します。

仮にyour-regionという名前になっています。「include_blank」は先頭のoptionを空白にする場合に使用します。先頭を空白にしたくない場合は消して構いません。

上記の2点で変更の必要がなければ、上のコードをそのままコンタクトフォーム7のエディタ内にコピペしてOKです。

optionのvalueを書き換える

さてセレクトボックスが出来たと思いますが、ここで本来はoptionのvalueに都道府県コードを入れておきたいのですが、コンタクトフォーム7ではlabelとvalueを分けて作成できないようです。ちょっと別の用途で半角パイプが使えるようになっていますが、そのままでは今回の目的には利用できなさそうなので、ここではフックを利用してvalueを書き換えます。

下のコードをコピーして使用中のテーマのfunctions.phpに貼り付けましょう。やはり最終行に、?> と書かれた行がある場合は、それを消さないように前の行に貼り付けます。

2行目の「your-region」の部分ですが、こちらはセレクトボックス作成時に付けた名前です。別の名前で作成した場合は、それに合わせて書き換えてください。

ごちゃごちゃ書いてありますが、やっている事は、都道府県の各optionのvalueに都道府県コードを振っているだけです。セレクトボックス内の都道府県の順番を入れ替えてしまうと、このコードでは正常に動かなくなってしまいますのでご注意ください。

メール内の都道府県名を書き換え

2020-10-10追記

現在の最新版・コンタクトフォーム7のVer.5.2.1で、一部この手順では動作しない点が発生したのを確認ました。（メールの書き換えの部分）5.1では動作します。引数の$submittedの中身が、以前は送信された値になっていましたが、バージョンアップ後は空になってしまうので、都道府県が判定できなくなってしまいました。バグっぽい気がするのでそのうち直るかも。。

ここまでで、すでに郵便番号を入力すると自動的にセレクトボックスが選択されるようになっているはずです。これでうまくいきそうなのですが、実際にメールを送信してみるとvalueが送信されるため、メール本文も都道府県コードになってしまいます。そこで別のフックを使用してメール内の都道府県コードを都道府県名に戻します。

こちらのコードも”your-region”の部分はselectに付けた名前に書き換えてください。

なんだか、あまりスマートな感じがしませんが、これで完了です。もっとカッコいい方法を見つけたら追記します。。

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

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

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

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

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

表示する住所	class
都道府県 （テキストフィールド使用の場合）	p-region
都道府県ID （セレクトボックス使用の場合）	p-region-id
市区町村	p-locality
町域	p-street-address
残りの住所*	p-extended-address*

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

最後に

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

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