[wp+js]Contactform7送信完了時に画面遷移しつつ値も移す

マジで使わんよね。

やりたいこと
こんな感じ
1. 注意点：postの発火について
活用シーン

やりたいこと

ContactForm7は送信完了時に画面遷移がない。

なので、①画面遷移させる。

フォームの送信は完了してるので、画面遷移した時にpostした値は持ち越さない。

だから、②postの情報を遷移先に持っていく。

こんな感じ

間違いなく指定できるようにCF7のショートコードに追記してidを付与する。

[ｃontact-form-7 id="*******" title="*******" html_id="example"]

フォームを設置したページで以下の内容を発火させる。

document.addEventListener('wpcf7mailsent', function (event) {
    //遷移先の指定
    const locationUrl = 'https://example.com/';
    //フォームの各項目の値を配列に格納
    const formFrom = document.getElementById('example');
    let postData = {
        example01: formFrom.elements['example01'].value,
        example02: formFrom.elements['example02'].value,
        example03: formFrom.elements['example03'].value,
        example04: formFrom.elements['example04'].value,
    };
    //フォームを作って取得した値を格納して遷移先にpostする設定して設置
    let form = document.createElement('form');
    form.method = 'POST';
    form.action = locationUrl;
    for (let key in postData) {
        if (postData.hasOwnProperty(key)) {
            let input = document.createElement('input');
            input.type = 'hidden';
            input.name = key;
            input.value = postData[key];
            form.appendChild(input);
        }
    }
    document.body.appendChild(form);
    //作ったformをpostする
    setTimeout(() => {
        form.submit();    
    }, 0);
}, false);

注意点：postの発火について

これは動かない。

document.addEventListener('wpcf7mailsent', function (event) {
    ⋮
    form.submit();    
}, false);

こうじゃないとだめ。

document.addEventListener('wpcf7mailsent', function (event) {
    ⋮
    setTimeout(() => {
        form.submit();    
    }, 0);
}, false);

多分仕様。

活用シーン

診断とか。

設問を解いて、回答内容をメールで飛ばす。
送信完了ページで診断結果を表示したい場合、入力内容を引っ張ってこないといけない。

そういう時とかに使えますね。