Pardotフォームに郵便番号からの住所自動入力をサクッと導入する

Pardotフォームで郵便番号から住所の自動入力を設定する方法。
フォームハンドラーなら自由度高くカスタマイズができるけどPardotフォームでもそれくらいしたいよね。

ということで、JSプラグイン jpostal を使って導入。

具体的な実装方法は以下の通り。
レイアウトテンプレート内に以下のコードを挿入するだけ。
設置箇所は </body>タグの上あたりがおすすめ。

ソースコード

既にjqueryが読み込まれている場合

<script type="text/javascript" src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>
<script type="text/javascript">
$(window).ready( function() {
    $('.zip > input').jpostal({
        postcode : [
            '.zip > input'
        ],
        address : {
            '.state > input'  : '%3',
            '.city > input'  : '%4',
            '.address_one > input'  : '%5'
        }
    });
});
</script>

jqueryが読み込まれていない場合

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>
<script type="text/javascript">
$(window).ready( function() {
    $('.zip > input').jpostal({
        postcode : [
            '.zip > input'
        ],
        address : {
            '.state > input'  : '%3',
            '.city > input'  : '%4',
            '.address_one > input'  : '%5'
        }
    });
});
</script>

実装時の注意点

• デフォルト項目に実装することを想定しています。カスタム項目を使う場合はクラス名（ .zip .state .city .address_one）を使用するカスタム項目のIDに変更してください。
• 項目数を変更するカスタマイズ等は、プラグインのページを参考にしてください。
• jqueryのバージョンが古すぎるとブラウザによっては動作しない場合があります。

備考

ちなみに、フォームハンドラーに実装するなら yubinbango もおすすめ（Pardotフォームに導入するのも試したけど、仕様上ちょっと厳しかった）。
こちらはJSのコード書かなくていいので更にお手軽感があります。試してみてね。