Experienceのフォームで、選択肢によって違うURLに遷移させる方法！ 😉

[Charles]

利用シーン

---

ポップアップでフォームを作成する際、選択肢によってフォームを送信後、違うURLに遷移させます。
カスタマーサポートやWeb接客として、顧客を案内する際に有効です。

!

方法

---

1．コードの挿入

選択肢のあるフォームを作った後、一度ポップアップ編集画面を終了し、画面左下にある「コードモード」を開きます。

そして、下記のコードを貼ってください。

(function(popupId, triggerElementSelector) {
    var waitTimer;
    var currentCampaign;
    function waitForCampaignMount(callback) {
        if (!popupId) return;
        currentCampaign = document.querySelector('#ptxEngage_' + popupId);
        if (!currentCampaign) return;
        if (waitTimer) {
            clearInterval(waitTimer);
            waitTimer = null;
        }
        waitTimer = setInterval(function() {
            if (!currentCampaign.hasChildNodes()) return;
            clearInterval(waitTimer);
            waitTimer = null;
            callback(currentCampaign);
        }, 50);
    }
    function bindEvent(callback) {
        var element = currentCampaign.querySelector(triggerElementSelector);
        element && element.addEventListener('click', callback);
    }
    function handleSubmit() {
        var selectElement = currentCampaign.querySelector('.silex-id-1634020026051-0 select'); //今回使うフォームのフォームID
        if (!selectElement) return;
        switch (selectElement.value) {
            case '選択肢1': //一個目フォームの値
                location.href = 'http://www.ptmind.com'; //一個目の値が対応しているURL
                break;
            case '選択肢2': //二個目フォームの値
                location.href = 'http://www.ptmind.jp'; //二個目の値が太陽しているURL
                break;
            default:
                break;
        }
    }
    waitForCampaignMount(function() {
        bindEvent(handleSubmit);
    });
})('popup_26f3bfa63a61bd3e', '.silex-id-1633955816281-2 a'); //ポップアップのIDとCTAのID

2.コードの変数部分の変更

上記コード内に記載の下記の箇所のものを用意します。
1）フォームID ★1
2）フォームに設定されたドロップダウンの値と、それに対応するURL
3）ポップアップID ★2
4）CTAのID ★1

★1「フォームID」と「CTAのID」の見つけ方

Step1 プレビューを開く

Step2プレビューの画面でポップアップを呼び出したあと、ページを右クリックして「検証」を選ぶ(ディベロッパーツールを開く)

Step3 下記の図のマークをクリックしてから、フォームとCTAをクリックしてください。

Step4 選択後、画面の下(または右側)に表示されているコードを確認します。
下図の赤枠のように、一番外側のdivのclassの内容がフォームIDとCTAのIDとなるのでコピーしてください。

★2 ポップアップIDの見つけ方

①ポップアップ編集時に表示される、「表示/停止条件」を開きます。
②選択肢の中に「指定のJavacsriptコードで表示タイミングをコントロール」にチェックを入れます。
③コードが出てきますが、使用するのは赤枠の部分のみ。こちらがポップアップIDとなります。
④文字列だけコピーしたら、こちらのチェックは必ず外してください。