A

Anonymous

【TIPS】郵便番号から住所を自動入力する

Forum|Forum|10 years ago
April 12, 2016
10 replies
1227 views

郵便番号を入力すると、都道府県や住所が自動入力される方法をご紹介します。

1.JavaScriptライブラリを読み込む

ランディングページの編集
ページのMetaタグの編集
カスタムのHEAD HTMLに下記のコードを挿入

2.フォームを用意する

この機能を使うには下記３つのフィールドが必要となります。

郵便番号
都道府県
住所

3.JavaScriptをLPに埋め込む

MktoForms2.whenReady(function (form) {
  if(!!document.getElementById("PostalCode")){
      document.getElementById("PostalCode").onkeyup = function(){
      AjaxZip3.zip2addr('PostalCode','','State','Address')
    }
  }else{
  console.log("noPostalCode")
  };
});

これで、郵便番号を入力すると住所が自動で入るはずです。

※上記のスクリプトは個人的に作成したもですので、サポート対象外となります。ご注意ください。

お試しください！

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

R

ryosukeh6977737

Level 2

これ待望の機能です。ありがとうございます！

ところでこちらの住所の設定は、標準がPostalCode, State, City, Addressになります。

もしかして、

3.JavaScriptをLPに埋め込む

でAjaxZip3.zip2addr('PostalCode','City','State','Address')
にしたりするとうまく動いたり・・・しないですかね。

A

Anonymous

でAjaxZip3.zip2addr('PostalCode','City','State','Address')
にしたりするとうまく動いたり・・・しないですかね。

どうなんでしょう・・・？

試してないですが、何だかいけそうな雰囲気がします

色々とお試しいただいて何か面白い方法が見つかればシェアしていただければ幸いです。

* [郵便番号から自動入力]みたいなボタンを作って、ボタンを押したら入力されるようにしたいなぁ

　と思いつつ、時間だけが過ぎて行ってしまいます。

R

ryosukeh6977737

Level 2

こちらで実験したところ、うまく行きませんでした・・・

これの”都道府県と以降の住所を分ける場合”を使っているんですね！

ajaxzip3 設置サンプルページ

そのため、都道府県と市まで分ける場合、のajaxが提供されるまでは苦しそうですね・・・

ということで、運用でカバーすべく作戦考えます。

R

ryosukeh6977737

Level 2

あ、すみません、できたそうです！

詳細は追って投稿してもらいます。

Wataru_Goto

Level 2

AjaxZip3.zip2addr('PostalCode','','State','City','Address') とすることで都道府県、市区郡、町名以下の住所を分離して自動入力することが出来ました。ちなみに、第ニ引数は郵便番号の下4桁で、郵便番号が7桁入力の場合は第一引数にまとめて、という仕様です。

A

Anonymous

コメント失礼いたします。

弊社でも是非この機能を活用したと考えており、設定を試みているのですがうまくいきません。。。

手順はあっていると思うのですが。。。

１）入力ページを作成し、そのLPのカスタムのHEAD HTMLに<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>を挿入

２）フォームを配置

３）LPに使用しているテンプレートのhtml内にソースを追加

うまく動作しなかったので('PostalCode','','State','City','Address')を日本語バージョンに変更してみましたが、それも違ったようです。

アドバイスをいただいけると助かります。よろしくお願いいたします。

Wataru_Goto

Level 2

AjaxZip3.zip2addr()の引数にはinputタグのnameを記述する必要があります。

こちらは環境によって変わりますので、御社の環境に合わせて変更が必要です。

おそらくこちらが原因と思われますが、いかがでしょうか？

GitHub - ajaxzip3/ajaxzip3.github.io

なお、inputタグのnameは、Chromeであれば検証ツールで確認が可能です。

A

Anonymous

アドバイスありがとうございます。

検証ツールで確認しながら設定したところ、都道府県とそれ以下住所を分割して自動入力することができました！

弊社でも上記のご質問の通り、都道府県、市区郡、以下住所に分ける管理ですが、Cityを’’内に追加しても

郵便番号を7桁同じBOXに入れてしまうと市区郡だけ割り振りされていないようです。。。

少し改良が必要ですが一先ずは実装できたのでよかったです。

ありがとうございました。

Manabu_Goto

コメント失礼します。

実装しようと色々と試してみましたが、上手くいかず。。

下記のように、入れ込んでみたのですが、どこがおかしいのでしょうか？
ご教授いただけると幸いです。

<div class="mktoForm" id="LpForm" mktoName="LP Form"></div>
<script type="text/javascript">

MktoForms2.whenReady(function (form) {

if(!!document.getElementById("PostalCode")){
document.getElementById("PostalCode").onkeyup = function(){
AjaxZip3.zip2addr('PostalCode','','State','Address')
}
}else{
console.log("noPostalCode")
};
});
<input type="text" name="PostalCode" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','State','Address');">
<input type="text" name="State" size="20">
<input type="text" name="Address" size="60">
</script>

KyokoKazama

Level 2

こんにちは。株式会社ウィルオブ・コンストラクションの風間と申します。

郵便番号入力のみで都道府県とそれ以降の二つのフィールドが自動入力されることを目指していますが、ところうまく行かず何も表示されてきません。これについてご意見などいただけましたら幸いです。

下記の①②③の箇所をSFDCカスタムフィールドで新規に作ったフィールドを参照するinputのnameに書き換え、head内に読込みコードも入れました。

<script type="text/javascript">
    MktoForms2.whenReady(function (form) {
    if(!!document.getElementById('①郵便番号')){
        document.getElementById('①郵便番号').onkeyup = function(){
        AjaxZip3.zip2addr('①郵便番号','','②都道府県','③市町村')
    }
    }else{
        console.log("noPostalCode")
    };
    });
</script>

過去には同じajaxzip3のボタン押下するバージョンを下記のように実装しうまく行っていたのですが...

 <script type="text/javascript">
    var button = document.createElement("button");
    button.setAttribute("type", "button");
    button.setAttribute("style", "margin-left:10px");
    button.innerText = "住所検索";
    button.onclick = function() {
        AjaxZip3.zip2addr('PostalCode', '', 'State', 'City');
    };
    MktoForms2.whenReady(function(form) {
        var postalCodeElement = document.getElementById("PostalCode");
        postalCodeElement.parentNode.insertBefore(button, postalCodeElement.nextSibling);
    });
    </script>

ふだんコーディングしておりますので開発ツールには慣れていますが、あれこれ試しているうちに何時間も経ってしまいました。

どうぞ宜しくお願いします。

1.JavaScriptライブラリを読み込む

2.フォームを用意する

3.JavaScriptをLPに埋め込む

3.JavaScriptをLPに埋め込む

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded