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

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

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

Contribute to yubinbango/yubinbango development by creating an account on GitHub.

yubinbango.jsの読み込み

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

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

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

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>

yubinbango1

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

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

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

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

<p>郵便番号<br />
    [text postal-code class:p-postal-code] </p>

<p>都道府県<br />
    [text address1 class:p-region] </p>

<p>市区町村<br />
    [text address2 class:p-locality] </p>

<p>番地以下<br />
    [text address3 class:p-street-address class:p-extended-address] </p>

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

yubinbango2

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

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

yubinbango3

お名前 (必須)

メールアドレス (必須)

題名

郵便番号

都道府県

市区町村

番地以下

メッセージ本文

貼り付けました

お名前 (必須)

メールアドレス (必須)

題名

郵便番号

都道府県

市区町村

番地以下

メッセージ本文

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

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

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

<p>お名前 (必須)<br />
    [text* your-name] </p>

<p>メールアドレス (必須)<br />
    [email* your-email] </p>

<p>題名<br />
    [text your-subject] </p>

<p>郵便番号 (必須)【7桁】<br />
    [text* postal-code class:p-postal-code] </p>

<p>住所1 (必須)【郵便番号を入力すると該当の住所が自動入力されます】<br />
    [text* address1 class:p-region class:p-locality] </p>

<p>住所2 (必須)【以降の住所を入力してください】<br />
    [text* address3 class:p-street-address class:p-extended-address] </p>


<p>メッセージ本文<br />
    [textarea your-message] </p>

<p>[submit "送信"]</p>

お名前 (必須)

メールアドレス (必須)

題名

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

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

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

メッセージ本文

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

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

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

シェアする

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

フォローする

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