前書き
YubinBango.jsを利用してPardotフォームに郵便番号からの住所自動入力機能を実装する。
jQueryのプラグイン jpostal を利用した実装方法についてはこちらのChibaさんの記事で紹介されている。
前提：YubinBangoライブラリを動作させるために必要なこと
- YubinBangoライブラリの読み込み
例: <script src=”https://yubinbango.github.io/yubinbango/yubinbango.js” charset=”UTF-8″></script> - formタグのclass名に h-adr を追加
例: <form class=”h-adr”> - form内で、国名(p-country-name) として Japan を指定
例1: <span class=”p-country-name” style=”display:none;”>Japan</span>
例2: <input type=”hidden” class=”p-country-name” value=”Japan”> - 郵便番号入力項目のclass名に p-postal-code を追加
例1: <input type=”text” class=”p-postal-code” size=”8″ maxlength=”8″>
例2: <input type=”text” class=”p-postal-code” size=”3″ maxlength=”3″><input type=”text” class=”p-postal-code” size=”4″ maxlength=”4″> - 住所入力項目のclass名に以下をそれぞれ追加
都道府県：p-region（※テキストではなく選択リストの場合は p-region-id ）
市町村区：p-locality
町名番地：p-street-address
以降の住所：p-extended-address
Pardotで動作させるために必要な工夫と注意点
（一般的なフォームとは異なる）Pardotフォーム特有の仕様として以下が存在する。
- inputタグのclass名を設定から変更できない
- select配下のoptionタグのvalueをPardotが勝手に決めてくる（おそらく、valueを変更するとPardotフォームにデータが入ってきても適切な値として保存されない ※未検証）
それぞれの仕様から、以下が帰結する。
inputタグのclass名を設定から変更できない
→YubinBangoを動作させるためには、inputタグのclass名を親要素のpタグのclass名で（JavaScriptを用いて）強制的に上書きする必要がある。
select配下のoptionタグのvalueをPardotが勝手に決めてくる
→optionタグのvalueを事実上変更できない以上、選択リストを対象とした住所自動入力の実装が仕様上不可能（従ってより具体的には、都道府県の項目は必ずテキスト欄である必要がある）
実装方法
①レイアウトテンプレートの「フォーム」に以下の修正を追加
・formタグのclass属性に h-adr を追加
<form accept-charset="UTF-8" method="post" action="%%form-action-url%%" class="form h-adr" id="pardot-form">②レイアウトテンプレートの「レイアウト」に以下のscriptを追加
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<script>
window.onload = function() {
const p1 = document.querySelector(".p-postal-code");
const p2 = document.querySelector(".p-region");
const p3 = document.querySelector(".p-locality");
const p4 = document.querySelector(".p-street-address");
const p5 = document.querySelector(".p-extended-address");
var input1 = '';
var input2 = '';
var input3 = '';
var input4 = '';
var input5 = '';
if(p1){ input1 = p1.querySelector("input"); }
if(p2){ input2 = p2.querySelector("input"); }
if(p3){ input3 = p3.querySelector("input"); }
if(p4){ input4 = p4.querySelector("input"); }
if(p5){ input5 = p5.querySelector("input"); }
if(input1){ input1.classList.add("p-postal-code"); }
if(input2){ input2.classList.add("p-region"); }
if(input3){ input3.classList.add("p-locality"); }
if(input4){ input4.classList.add("p-street-address"); }
if(input5){ input5.classList.add("p-extended-address"); }
}
</script>