お問い合わせはコチラから

Contact form 7 郵便番号から住所自動入力(ajaxzip3ライブラリ)

サイト運営

Contact form 7などのコンタクトフォームで郵便番号から住所を自動入力するには、javascriptを使用するのが一般的です。

郵便番号から住所を入力するjavascriptライブラリとして有名なのが、ajaxzip3です。

あくまでもjavascriptライブラリなので、Contact form 7と一緒に使うには一工夫必要になります。

この記事では、Contact form 7とajaxzip3を組み合わせて郵便番号から住所を自動入力するための方法をまとめておきたいと思います。

この記事を読むことで、郵便番号の入力欄が1つの場合と2つの場合、自動入力先の住所入力欄が1つの場合、複数の場合などすべてに対応できるようになります。

yubinbangoライブラリを使用する場合は以下の記事を参照してください。

Contact form 7でajaxzip3を使う方法

ajaxzip3の読み込み

公式サイトの例だと、以下のようにheadに記述することで読み込む方法が推奨されています。

一番トラブルが少ない方法だと思います。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル</title>
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
</head>

このままでもよいのですが、サーバーに無くなってしまう可能性も0ではないので、ローカルにファイルをダウンロードして読み込む方が良いと思います。

ヘッダーで読み込むのはイヤだという場合、フッターで読み込むことも可能です。

また、ライブラリ自体はjQueryなどとの依存性も無いので読み込み順序の影響はなく、フッターで読み込んでも動きますが、後述するscript部分との読み込み順番は意識する必要があります。

add_action('wp_footer',function(){
?>
//ローカルから読み込む例
<script src="<?php echo get_template_directory_uri();?>/assets/js/ajaxzip3.js"></script>
<script>
//ここは必要に応じて変更
jQuery( '#your-zip' ).keyup( function() {
  AjaxZip3.zip2addr( this, '', 'pref01', 'addr01' );
});
</script>
<?php
});

Contact form7 フォームの設定

1ボックスで郵便番号7桁を入力させる場合の設定例(都道府県と以降の住所を分ける場合)

ajaxzip3のサイトのHTMLの例は以下のように書かれています。

<input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');">
<input type="text" name="pref01" size="20">
<input type="text" name="addr01" size="60">

この記述には、onKeyUp以降にjavascriptが含まれており、Contact form 7のフォームタグとして記述できません。Contact form 7ではフォームタグとjavascript部分を分ける必要があります。

Contact form7のフォームタグ部分

onKeyupを含むzip01のJavascript部分はjavascriptに分離するので、フォームタグ内に記述する必要は無いです。

zip01はjavascriptから探せるようにidを追加するのがポイントです。

[text zip01 size:10 maxlength:8 id:your-zip]
[text pref01 size:20]
[text addr01 size:60]
Javascript部分

HTMLタグのonKeyup部分を外部javascriptで実現します。

onKeyUpの内容をそのまま2行目にコピペすれば大丈夫です。

jQuery( '#your-zip' ).keyup( function() {
  AjaxZip3.zip2addr( this, '', 'pref01', 'addr01' );
});

1ボックスで郵便番号7桁を入力させる場合の設定例(都道府県と以降の住所を分けない場合)

ajaxzip3のサイトのHTMLの例は以下のように書かれています。

<input type="text" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');">
<input type="text" name="addr11" size="60">

この記述には、onKeyUp以降にjavascriptが含まれており、Contact form 7のフォームタグとして記述できません。Contact form 7ではフォームタグとjavascript部分を分ける必要があります。

Contact form7のフォームタグ部分

onKeyupを含むzip11のJavascript部分はjavascriptに分離するので、フォームタグ内に記述する必要は無いです。

zip01はjavascriptから探せるようにidを追加するのがポイントです。

[text zip11 size:10 maxlength:8 id:your-zip]
[text addr11 size:60]
Javascript部分

HTMLタグのonKeyup部分を外部javascriptで実現します。

onKeyUpの内容をそのまま2行目にコピペすれば大丈夫です。

jQuery( '#your-zip' ).keyup( function() {
  AjaxZip3.zip2addr(this,'','addr11','addr11');
});

2ボックスで郵便番号を3桁-4桁形式で入力させる場合の設定例

ajaxzip3のサイトのHTMLの例は以下のように書かれています。

<input type="text" name="zip21" size="4" maxlength="3"> - <input type="text" name="zip22" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip21','zip22','pref21','addr21','strt21');">
<input type="text" name="pref21" size="40">
<input type="text" name="addr21" size="40">
<input type="text" name="strt21" size="40">

この記述には、onKeyUp以降にjavascriptが含まれており、Contact form 7のフォームタグとして記述できません。Contact form 7ではフォームタグとjavascript部分を分ける必要があります。

Contact form7のフォームタグ部分

onKeyupを含むzip22のJavascript部分はjavascriptに分離するので、フォームタグ内に記述する必要は無いです。

zip01はjavascriptから探せるようにidを追加するのがポイントです。

[text zip21 size:4 maxlength:3] -  [text zip22 size:5 maxlength:4 id:your-zip]
[text pref21 size:40]
[text addr21 size:40]
[text strt21 size:40]
Javascript部分

HTMLタグのonKeyup部分を外部javascriptで実現します。

onKeyUpの内容をそのまま2行目にコピペすれば大丈夫です。

jQuery( '#your-zip' ).keyup( function() {
  AjaxZip3.zip2addr('zip21','zip22','pref21','addr21','strt21');
});

まとめ

WordPressのメールフォームのプラグインは有名なものがいくつかありますが、無料で拡張性の高さからContact form7を選ぶことが殆どです。

今回、毎回のように使用する郵便番号から住所の自動入力の方法についてajaxzip3というjavascriptライブラリを使用して簡単に実現する方法をまとめました。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

タイトルとURLをコピーしました