Pardotフォームにおける郵便番号からの住所自動入力【YubinBango】

By | January 30, 2023

前書き

YubinBango.jsを利用してPardotフォームに郵便番号からの住所自動入力機能を実装する。

jQueryのプラグイン jpostal を利用した実装方法についてはこちらのChibaさんの記事で紹介されている。

前提:YubinBangoライブラリを動作させるために必要なこと

  1. YubinBangoライブラリの読み込み
    例: <script src=”https://yubinbango.github.io/yubinbango/yubinbango.js” charset=”UTF-8″></script>
  2. formタグのclass名に h-adr を追加
    例: <form class=”h-adr”>
  3. 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”>
  4. 郵便番号入力項目の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″>
  5. 住所入力項目の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>