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

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ライブラリを使用して簡単に実現する方法をまとめました。

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