郵便番号からの住所自動入力について
住所の自動入力は自分で用意したCSVなどのファイルを読み込んで使う方法と、外部APIを使用する方法がありますが今回は外部APIを使用します。
外部APIでは「YubinBango.js」というものがありますが、Elementor（PRO）フォームではなかなかうまくいかなかったのでzipcloud様のAPIを使用させていただきました。
郵便番号からの住所自動入力のメリット
フォームの住所自動入力は、管理者側にとっても、入力するユーザー側にとってもメリットがあります。そのため、基本的にフォームには自動入力をつけておくべきでしょう。というより、デメリットが思いつきません。
こんな感じのフォームですね。
ユーザー側にとっては住所をいちいち入力する手間が省けるため、フォーム入力のストレスが大幅に削減できます。そして、管理者側にとっては間違った住所を送られる心配が少なくなります。実際、私が運営しているウェブサイトでは資料請求フォームがありますが、自動入力を入れなかったときは年に数回、住所が違ってお客様に資料を届けることができませんでした。
こんなストレスを避けるために、住所の自動入力は必須といっていいでしょう。
Elementor（PRO）でのやり方：フォームウィジェット配置編
まずはフォームを用意しましょう。
フォームはデフォルトで3項目が自動的に配置されています。この3つの項目を修正しましょう。「郵便番号」「住所」「その他の住所」の3つにします。
- 郵便番号 郵便番号を入力するフィールド（番号）
- 住所 郵便番号を入力すると自動的に町名まで入力されるフィールド（テキスト）
- その他の住所 町名番地、マンションなどを入力するフィールド（テキスト）
ひとつ目のフィールドは郵便番号を入力するためタイプを「番号」に、残りの2項目のタイプを「テキスト」にしましょう。次に各項目の詳細で郵便番号のIDを「zipcode」、住所のIDを「address」その他の住所を「address_etc」と入力してしておきましょう。
| タイプ | Label | Placeholder | その他の設定 | ID | |
| 郵便番号 | 番号 | 郵便番号 | 1000014 | Min.value 7 Max.Value 7 | zipcode |
| 住所 | テキスト | 住所 | 東京都千代田区永田町 | address | |
| 町名番地・マンション名 | テキスト | 町名番地・マンション名 | 1丁目7-1 国会議事堂101 | address_etc |
画像のように設定出来ていればOKです。画像左はコンテンツ、画像右は詳細です。
Elementor（PRO）でのやり方：JSコード配置編
ここからちょっと難しくなります。（といっても、コードをコピペするぐらいです）
フォームに住所自動入力を導入するためには、Javascriptというプログラミング言語のコードを配置する必要があります。配置は方法は2つあります。
Elementor（PRO）のカスタムコード機能から追加するか、フォームを配置したページにHTMLウィジェットを配置するかです。どちらでもOKですが、このコード自体はフォームを配置したページでしか基本的に使わないと思うので、今回はHTMLウィジェットを使いましょう。カスタムコード機能を使うと全てのページにこのコードが配置されてしまうため、フォームを使うページ以外ではまったく意味のないコードになり、もしかすると不具合もおきるかもしれません。
今回はHTMLウィジェットでいきましょう。
フォームウィジェットの上にHTMLウィジェットを配置してください。
郵便番号を入力して1つのフィールドで表示させるコード
これは郵便番号を入力して「都道府県」「市区町村「町名・番地」を1つにしてフィールドに表示するコードです。このような感じになります。
配置したHTMLウィジェットにこのコードを貼り付けてください。
<script>
jQuery(document).ready(function ($) {
$('#form-field-zipcode').on('input', function () {
const zipcode = $(this).val().replace(/[^\d]/g, ''); // 数字以外を削除
if (zipcode.length === 7) { // 郵便番号が7桁の場合のみ実行
// APIリクエスト
$.ajax({
url: `https://zipcloud.ibsnet.co.jp/api/search?zipcode=${zipcode}`,
dataType: 'jsonp',
success: function (data) {
if (data.results) {
// 住所を一行テキストにまとめる
const address = `${data.results[0].address1}${data.results[0].address2}${data.results[0].address3}`;
// フィールドに値をセット
$('#form-field-address').val(address);
// 自動入力された住所フィールドを読み取り専用に設定
$('#form-field-address').prop('readonly', true);
}
},
error: function () {
alert('住所検索に失敗しました。時間をおいて再試行してください。');
}
});
}
});
});
</script>保存したら実際に動作するかテストするために、保存してページを確認してみてください。
郵便番号を入力して2つのフィールドで分けて表示させるコード
住所を2つのフィールドに分けて表示することもできます。このような感じになります。
この場合、テキストフィールドがもうひとつ必要になります。テキストフィールドをひとつ追加しましょう。それと、住所の項目をわかりやすいように変更しましょう。
最初の表から変更した部分は「住所1」「住所2」の部分です。
| タイプ | Label | Placeholder | その他の設定 | ID | |
| 郵便番号 | 番号 | 郵便番号 | 1000014 | Min.value 7 Max.Value 7 | zipcode |
| 住所1 | テキスト | 住所1 | 東京都 | address1 | |
| 住所2 | テキスト | 住所2 | 千代田区永田町 | address2 | |
| 町名番地・マンション名 | テキスト | 町名番地・マンション名 | 1丁目7-1 国会議事堂101 | address_etc |
フォームはこのようになっています。
これは郵便番号を入力して「都道府県」でひとつ、「市区町村「町名・番地」をひとつにして各フィールドに表示するコードです。配置したHTMLウィジェットにこのコードを貼り付けてください。
<script>
jQuery(document).ready(function ($) {
$('#form-field-zipcode').on('input', function () {
const zipcode = $(this).val().replace(/[^\d]/g, ''); // 数字以外を削除
if (zipcode.length === 7) { // 郵便番号が7桁の場合のみ実行
// APIリクエスト
$.ajax({
url: `https://zipcloud.ibsnet.co.jp/api/search?zipcode=${zipcode}`,
dataType: 'jsonp',
success: function (data) {
if (data.results) {
const prefecture = data.results[0].address1; // 都道府県
const city = data.results[0].address2; // 市区町村
const street = data.results[0].address3; // 町名・番地
// 各フィールドに値をセット
$('#form-field-address1').val(prefecture);
$('#form-field-address2').val(city + street);
// 自動入力された住所フィールドを読み取り専用に設定
$('#form-field-address1').prop('readonly', true);
$('#form-field-address2').prop('readonly', true);
}
},
error: function () {
alert('住所検索に失敗しました。時間をおいて再試行してください。');
}
});
}
});
});
</script>郵便番号を入力して3つのフィールドで分けて表示させるコード
住所を3つのフィールドに分けて表示することもできます。このような感じになります。
この場合、テキストフィールドがさらにひとつ必要になります。テキストフィールドをひとつ追加しましょう。それと、住所の項目をわかりやすいように変更しましょう。
| タイプ | Label | Placeholder | その他の設定 | ID | |
| 郵便番号 | 番号 | 郵便番号 | 1000014 | Min.value 7 Max.Value 7 | zipcode |
| 住所1 | テキスト | 住所1 | 東京都 | address1 | |
| 住所2 | テキスト | 住所2 | 千代田区 | address2 | |
| 住所3 | テキスト | 住所3 | 永田町 | address3 | |
| 町名番地・マンション名 | テキスト | 町名番地・マンション名 | 1丁目7-1 国会議事堂101 | address_etc |
フォームはこのようになっています。
これは郵便番号を入力して「都道府県」でひとつ、「市区町村でひとつ、「町名・番地」をひとつで表示するコードです。配置したHTMLウィジェットにこのコードを貼り付けてください。
<script>
jQuery(document).ready(function ($) {
$('#form-field-zipcode').on('input', function () {
const zipcode = $(this).val().replace(/[^\d]/g, ''); // 数字以外を削除
if (zipcode.length === 7) { // 郵便番号が7桁の場合のみ実行
// APIリクエスト
$.ajax({
url: `https://zipcloud.ibsnet.co.jp/api/search?zipcode=${zipcode}`,
dataType: 'jsonp',
success: function (data) {
if (data.results) {
const prefecture = data.results[0].address1; // 都道府県
const city = data.results[0].address2; // 市区町村
const street = data.results[0].address3; // 町名・番地
// 各フィールドに値をセット
$('#form-field-address1').val(prefecture);
$('#form-field-address2').val(city);
$('#form-field-address3').val(street);
// 自動入力された住所フィールドを読み取り専用に設定
$('#form-field-address1').prop('readonly', true);
$('#form-field-address2').prop('readonly', true);
$('#form-field-address3').prop('readonly', true);
}
},
error: function () {
alert('住所検索に失敗しました。時間をおいて再試行してください。');
}
});
}
});
});
</script>Readonlyにしておく理由
コードのこの部分を見てください。これは住所のフィールドにReadonlyというものを付けています。Readonlyにすることでこのフィールドの書き換えができなくなります。ユーザーが誤って書き換えてしまうのを防ぐことができます。
この部分を削除するか「true」の部分を「false」に変更することで、書き換えを許可することができます。
// 自動入力された住所フィールドを読み取り専用に設定
$('#form-field-address').prop('readonly', true);住所入力が必要なフォームは自動入力が必須！
最初にも書きましたが、住所の自動入力は資料請求、サンプル請求などがあるビジネスであれば非常に重宝する機能です。というか、住所の自動入力がないとフォーム利用率は悪くなります。ですので「必須」だと覚えておいてください。Elementor（PRO）フォームで最初からカンタンに使えれば良いのですが、郵便番号、住所は日本固有のものなのでElementor（PRO）の機能として実装される可能性は非常に低いです。
ちょっと難しいですが、チャレンジしてみてくださいね！