【Marketo】フォームに住所自動入力機能を持たせ、チャットのような動きをさせる #PHP

なかなか自由度が低くデザインもイケているとは言い難いMarketoフォームです。
cssをゴリゴリにカスタマイズした上、1秒でも速く送信ボタンを押下してもらいたい・・ということでやってみました。
サンプルはこちらです

やること:
1.郵便番号入力で市区町村まで自動入力
2.チャットのような動きをつける

1.郵便番号入力で市区町村まで自動入力

Marketoフォーム埋め込みフォームを任意のページに設置

id="mktoForm_0000"と、"000-MDO-000"の箇所は自社のものになりますね。

page.php

<main id="js-form" class="form_wrapper">
<script src="//ma.sekokan-navi.jp/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_0000"></form>
<script>MktoForms2.loadForm("//ma.sekokan-navi.jp", "000-MDO-000", 3945);</script>
</main>

上記ページが読み込むフッターに下記コードを設置

footer.php

  <!--mktform 住所自動入力-->
    <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
    <script type="text/javascript">
        MktoForms2.onFormRender(function (form) {
        //差し替え箇所スタート
            if (!!document.getElementById("yuubinbangou_mikeiken__c")) {
                document.getElementById("yuubinbangou_mikeiken__c").onkeyup = function () {
                    AjaxZip3.zip2addr('yuubinbangou_mikeiken__c', '', 'Todofuken__c',
                        'shikuchoson_mikeiken__c')
        //差し替え箇所おわり
                }
            } else {
                console.log("noPostalCode")
            };
        });
    </script>

IDの差し替え

開発ツールでフォームに設置した下記3つのフィールドIDを調べ、上記コードの中で差し替えます。
私の場合は下記のようになっていました。

・郵便番号：yuubinbangou_mikeiken__c
・都道府県：Todofuken__c
・市区町村：shikuchoson_mikeiken__C

これで動作するはずです。

2.チャットのような動きをつける

Marketoフォームの機能の「表示設定ルール」によって起こるイベントとjQueryを掛け合わせたものです。

表示設定ルール:
設問〇〇が〇〇なら表示する/しない、などと設定できるもので、Marketo>フォーム>下書きの編集>フォームの設定の右側サイドバーの中にいます。
今回はこの動作を連続して設定しています。

イベントが起こったら

#js-formをスクロールさせてね、としています。
これを同じくフッターに書いておきます。
ヌルっと動くようcss側で指定しておくのも良きでしょう。

footer.php

    <!-- like_chat_form_script -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
    <script src="./script.js"></script>
    <script>
        $(function () {
            window.MktoForms2.onFormRender(function () {
                console.log($("#js-form"));
                $("#js-form").scrollTop($("#js-form")[0].scrollHeight);
            });
        });
    </script>

話が前後してしまいましたが、フォームは上記のidのjs-formをつけたdivで囲っておきます。

footer.php

<div id="js-form" class="form_wrapper">
 <!--フォーム入れるところ-->
</div>

これで若干無理やり気味のチャット風なMarketoフォームが出来ました！
入力率もグっっと上がったようです！
この方法はこちらの素晴らしいMentaのメンターさんに指導していただき実現しました。
KOICHIさん