ContactForm7で郵便番号から住所を自動入力(yubinbango.js)

郵便番号から自動で住所を入力する方法をさがしました。

以前は、ajaxzip3のJSライブラリを利用することが一般的でしたが、現在はajaxzip3の後継であるYubinbangoを利用することが推奨されています。

Contribute to yubinbango development by creating an account on GitHub.

yubinbango.jsの読み込み

ライブラリのjsを読み込む必要があります。いろいろな方法がありますが、header.phpのなかに記述します。

現在の適用しているテーマはSimplicity2の子テーマなので、 header-insert.phpに記述しました。

「外観」ー「テーマの編集」ー「header-insert.php」を開いてスクリプトタグを記述しました。

yubinbango1

新しいコンタクトフォームを作成

1行目に以下のコードを挿入します。

classを指定して、input要素を追加します。

都道府県と市町村名と番地以下をそれぞれ、わけましたが一つにまとめることも可能です。

yubinbango2

formのclassを指定してショートコードの貼り付け

ショートコードをそのまま貼り付けるのではなく、form タグの class を指定して貼り付けます。

yubinbango3

貼り付けました

お名前 (必須)

メールアドレス (必須)

題名

郵便番号

都道府県

市区町村

番地以下

メッセージ本文

都道府県と市区町村を一つにしました

都道府県と市区町村を一つにまとめて貼り付けてみました。

お名前 (必須)

メールアドレス (必須)

題名

郵便番号 (必須)【7桁】

住所1 (必須)【郵便番号を入力すると該当の住所が自動入力されます】

住所2 (必須)【以降の住所を入力してください】

メッセージ本文

個人情報の取扱いについて、同意の上送信します。(確認画面は表示されません)

あとは、個人情報の取り扱いの文章を挿入して完成です。

スポンサーリンク
memordmレクタングル(大)
memordmレクタングル(大)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
memordmレクタングル(大)