mailbox-507594_1280

SSL対応の郵便番号APIをお探しならajaxzip3でOK!

2015.03.04   657


前回に引き続き、エントリーフォーム最適化(EFO)関連です。このAPIはもう何年も前からあり既に有名ですが、紹介しておかなければと思い投稿させて頂きます。
ECサイトや会員登録では必要なことが多い郵便番号と住所のフォーム。よく郵便番号を記入してからボタンを押して住所が入るというのがあると思いますが、ajaxzip3は郵便番号を入れた瞬間に住所が入ってくれるんです。

百聞は一見にしかずです。まずはデモを見てみてください。

ajaxzip3のオススメ/ポイント

  •   郵便番号を入力するだけで勝手に住所が入るAPI
  •   メンテナンス不要
  •   APIはGoogle Code内なので安心
  •   SSLページ&スマホにも対応

ajaxzip3のデモ


ajaxzip3のページ


ajaxzip3の使い方

それではajaxzip3の使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<form>
    <div>
        <label for="zipcode">郵便番号</label>
        <div>
            <input type="text" name="zip01" id="zipcode" maxlength="7" onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01')" placeholder="郵便番号">
        </div>
    </div>
    <div>
        <label for="pref01">都道府県</label>
        <div>
            <input type="text" name="pref01" id="pref01" placeholder="都道府県">
        </div>
    </div>
    <div>
        <label for="addr01">以降の住所</label>
        <div>
            <input type="text" name="addr01" id="addr01" placeholder="以降の住所">
        </div>
    </div>
</form>

チェックポイント

重要なのはonKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01')"の部分。pref01とaddr01は都道府県とそれ以降の住所のテキストフォームのnameと合わせて下さい。

JavaScriptコード

<!-- 非SSLページ用 -->
<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
<!-- SSLページ用 -->
<script src="https://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3-https.js" charset="UTF-8"></script>

チェックポイント

SSLと通常用のどちらかを利用して下さい。

プラグインへ一言

これでフォームコンバージョン率もアップ!

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております