郵便番号から住所を自動入力しよう（住所入力ボタン編）

こんにちは！Marketoの大谷です。

今回は、郵便番号から住所を自動入力する話です。

住所自動入力については 【TIPS】郵便番号から住所を自動入力する​ で既に解説されていますが、今回はボタンを押すと住所が入力されるパターンに挑戦してみようと思います。

1. フォームを用意する

以下のようなフォームを用意します。「郵便番号」「住所」が最低限度必要です。

郵便番号のフィールド幅を短めにしておくといい感じになります。

作成したら保存と承認をお忘れなく。

2. ランディングページを用意する

次に、ランディングページを用意して先ほど作ったフォームを追加します。

続いて、「HTML」要素を追加しましょう。場所はどこでもOKです。

「HTML」要素を追加するとカスタムHTMLエディタが開くので、以下のスクリプトを入力します。

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<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','','Address','Address');
};
MktoForms2.whenReady( function(form) {
  var postalCodeElement = document.getElementById("PostalCode");
  postalCodeElement.parentNode.insertBefore(button, postalCodeElement.nextSibling);
});
</script>

スクリプト中の"PostalCode"や"Address"は実際に作成するフォームのフィールド名に合わせて変更してください。

スクリプトの入力が終わったら保存/承認します。

3. 試してみよう

以上で設定完了です！早速ランディングページをブラウザで開いてみましょう。

「住所検索」ボタンが郵便番号フィールドの右側に表示されているはずです。

郵便番号を入力して「住所検索」ボタンを押すと、住所フィールドが自動入力されます！

是非みなさまもお試しくださいませ。

* 2017-12-20 追記

レイアウト等の自由度が減っても良いのであれば、フォーム側にリッチテキストを挿入する方法でも対応可能です。具体的な手順は以下のとおりです。

1. 郵便番号フィールドの横にリッチテキストフィールドを追加する
2. リッチテキストの編集画面でHTMLアイコンをクリックしてHTML編集モードに移り、以下のコードを入力して保存する

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<button type="button" onclick="AjaxZip3.zip2addr('PostalCode','','Address','Address');">住所検索</button>

※ 都道府県フィールドを利用する場合は 【TIPS】郵便番号から住所を自動入力する​ を参考にしてスクリプト中AjaxZip3.zip2addrの引数を変えてみてください。