AjaxZip3でフォームに住所を自動入力する

AjaxZip3でフォームに住所を自動入力する

AjaxZip3はフォームの郵便番号欄に番号を入力すると自動で住所欄に住所を入力してくれるライブラリです。実装やカスタムも簡単でメンテナンス不要。住所入力が必要なフォームを作成するときには是非利用したいライブラリです。

AjaxZip3の使い方

デモ用のフォームを実装するにあたって WordPressプラグインのContact From 7のデモモードを利用します。

HTML
<div role="form" class="wpcf7" id="wpcf7-f3519-p3513-o1" lang="ja" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/ajaxzip3/#wpcf7-f3519-p3513-o1" method="post" class="wpcf7-form demo" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="3519">
<input type="hidden" name="_wpcf7_version" value="4.4.2">
<input type="hidden" name="_wpcf7_locale" value="ja">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f3519-p3513-o1">
<input type="hidden" name="_wpnonce" value="1c9f1fbdb8">
</div>
<div class="boxx-table demo">
<div class="boxx-row">
<div class="boxx-col">郵便番号</div>
<div class="boxx-col"><span class="wpcf7-form-control-wrap zipcode-1"><input type="text" name="zipcode-1" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required zipcode-1" aria-required="true" aria-invalid="false"></span> ー <span class="wpcf7-form-control-wrap zipcode-2"><input type="text" name="zipcode-2" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required zipcode-2" aria-required="true" aria-invalid="false"></span></div>
</div>
<div class="boxx-row">
<div class="boxx-col">住所</div>
<div class="boxx-col"><span class="wpcf7-form-control-wrap address-1"><input type="text" name="address-1" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required address" aria-required="true" aria-invalid="false"></span></div>
</div>
</div>
<div class="wpcf7-submit demo"><input type="submit" value="送信" class="wpcf7-form-control wpcf7-submit"><img class="ajax-loader" style="visibility: hidden;"></div><img class="ajax-loader" style="visibility: hidden;">
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>

Contact Form 7で設定した HTMLです。

CSS
.wpcf7 .wpcf7-submit.demo .wpcf7-submit {
  color: #FFF;
}

.wpcf7 {
  border: 3px solid #D7D8E0;
}

.wpcf7 .boxx-table.demo {
  position: relative;
  z-index: 1;
}

.wpcf7 .boxx-table.demo:before,
.wpcf7 .boxx-table.demo:after {
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.wpcf7 .boxx-table.demo .boxx-col {
  padding: 50px 50px 50px 25px;
  position: relative;
  z-index: 1;
}

.wpcf7 .boxx-table.demo .boxx-col:first-child {
  padding: 50px 25px 50px 50px;
}

.wpcf7 .boxx-table.demo .boxx-row .boxx-col {
  border-bottom: 1px solid #D7D8E0;
}

.wpcf7 .boxx-table.demo .boxx-col:nth-child(odd) {
  width: 33%;
  text-align: right;
}

.wpcf7 .boxx-table.demo input.zipcode-1,
.wpcf7 .boxx-table.demo input.zipcode-2,
.wpcf7 .boxx-table.demo input.address {
  box-shadow: none;
  padding: 10px;
}

.wpcf7 .boxx-table.demo input.zipcode-1:focus,
.wpcf7 .boxx-table.demo input.zipcode-2:focus,
.wpcf7 .boxx-table.demo input.address:focus {
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .12);
}

.wpcf7 .boxx-table.demo input.zipcode-1 {
  width: 60px;
}

.wpcf7 .boxx-table.demo input.zipcode-2 {
  width: 70px;
}

.wpcf7 .boxx-table.demo input.address {
  width: 100%;
}

.wpcf7-submit.demo {
  padding: 50px 10px;
}

.wpcf7-submit.demo .wpcf7-submit {
  background: #009cff;
  border: none;
  border-bottom: 2px solid #0079c5;
  margin: 0 auto;
}

.ajax-loader {
  display: none;
}

.wpcf7 .boxx-table .boxx-col {
  position: relative;
  z-index: 1;
}

.wpcf7 .screen-reader-response,
.wpcf7 .wpcf7-response-output {
  background: #FFF;
  color: inherit;
  font-size: .9em;
  margin: 0 auto;
  padding: 10px 20px;
  text-align: center;
  width: 100%;
}

.wpcf7 .screen-reader-response,
.wpcf7 .screen-reader-response ul {
  display: none;
}

.wpcf7 .wpcf7-response-output.wpcf7-validation-errors {
  background: #FF0;
}

.wpcf7 .wpcf7-not-valid-tip {
  bottom: 10px;
  color: #FFF;
  font-size: .8em;
  left: 0;
  opacity: 0;
  position: absolute;
  z-index: 1;
}

.wpcf7 .wpcf7-not-valid-tip.appear {
  opacity: 1;
  transition: opacity 500ms;
  -webkit-transition: opacity 500ms;
}

.wpcf7-display-none {
  display: none;
}

@media screen and (max-width: 854px) {
  
  .wpcf7 .boxx-table.demo .boxx-col {
    padding: 50px 30px 50px 10px;
  }

  .wpcf7 .boxx-table.demo .boxx-col:first-child {
    padding: 50px 10px 50px 30px;
  }

  .wpcf7-submit.demo {
    padding: 30px 10px;
  }
}

@media screen and (max-width: 480px) {

  .wpcf7 .boxx-table.demo .boxx-col {
    padding: 30px 10px 30px 10px;
  }

  .wpcf7 .boxx-table.demo .boxx-col:first-child {
    padding: 30px 10px 30px 10px;
  }
}
HTML
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

Githubにホスティングされている ajaxzip3.jsを head要素内に指定して読み込みます。以前は Google Codeにホスティングされていたのですがサービス廃止により Githubに移行したようです。

JavaScript
$(function(){
  
  function _addAjaxZip3(){
    
    $('input.zipcode-2').on('keyup', function(e){
      
      AjaxZip3.zip2addr('zipcode-1', 'zipcode-2', 'address-1', 'address-1');
    });
  };//_addAjaxZip3()
  
  _addAjaxZip3();
});

郵便番号の4桁を入力する input要素の keyupイベントを検知して住所欄の input要素に AjaxZip3で取得した住所の情報を入れます。AjaxZip3.zip2addr( )の引数には input要素の name属性を指定します。引数の 3番目と 4番目が重複していますが都道府県とそれ以降を分けない場合の指定です。

JavaScript
function _wpcf7(){
  
  'use strict';
  
  $(function(){
    
    var $wpcf7 = $('.wpcf7');
    var $wpcf7_input = $('.wpcf7-form-control');
    var $wpcf7_zipcode_1 = $('.wpcf7-form-control.zipcode-1');
    var $wpcf7_zipcode_2 = $('.wpcf7-form-control.zipcode-2');
    var $wpcf7_submit = $('.wpcf7-submit');
    var $wpcf7_output = $('.wpcf7-response-output');
    var $wpcf7_tip = $('.wpcf7-not-valid-tip');
    var count = 0;
    
    $wpcf7_input.filter('[class*=zipcode-]').each(function(i){
      
      if($(this).val() == '') return;
      
      count = i;
    });
    
    if(count == 0) $wpcf7_input.filter('[class*=zipcode-]').eq(count).next($wpcf7_tip).remove();
    
    if($wpcf7_output.hasClass('wpcf7-validation-errors')){
      
      $wpcf7_tip.addClass('appear');
      
      $wpcf7.find($wpcf7_input).not($wpcf7_submit).off('blur._wpcf7 focus._wpcf7 keyup._wpcf7').on('blur._wpcf7 focus._wpcf7 keyup._wpcf7', function(){
        
        if($(this).is('[class*=zipcode-]')){
          
          if($wpcf7_zipcode_1.val() !== '' && $wpcf7_zipcode_2.val() !== ''){
            
            $wpcf7_input.filter('[class*=zipcode-]').next().fadeOut();
            
          }else{
            
            $wpcf7_input.filter('[class*=zipcode-]').next().fadeIn();
          }
          
        }else{
        
          if($(this).val() !== ''){
            
            $(this).next().fadeOut();
            
          }else{
            
            $(this).next().fadeIn();
          }
        }
      });
    }
  });
};//_wpcf7()

_wpcf7( )はエラーメッセージの表示、非表示のコントロールをするためのもので送信ボタンが押された時に実行されるように Contact From 7の「その他の設定」に on_submit: "_wpcf7( )"を加えておきます。

GitHub - ajaxzip3/ajaxzip3.github.iohttps://github.com/ajaxzip3/ajaxzip3.github.io

デモ

郵便番号欄に番号を入力すると自動で住所欄に住所が入力されます。

郵便番号
ー
住所
ページの先頭へ