【WP/contact form 7】addEventListenerメソッドでDOMイベントを拾って、サンクスページなどに転送する方法（追加プラグイン無）

今回は、WordPress/contact form 7で、『追加プラグイン無しで、送信後サンクスページ転送』についてです。以前も取り上げた話題ですけど、今回は別の方法（DOMイベントを拾って転送）で行ってみます。さっそく内容を確認していきましょう。

以前紹介した方法（$_POST判定）と、今回の方法について（DOM イベント）

以前の方法

以前は『送信された$_POST』の内容で判定していました。送信された内容をバリデーション（ゆるめですが）だったんですが、タイミング的にはちょっと厳密ではない感じでした（組み込みwp_mail()だと、送信true/falseが判定できる）。

$_POST変数の中身で判定して、『メール送信ありがとうページ』に遷移させる方法
https://division-web.atelier-ss-agency.com/9309/

今回の方法（Contact Form 7カスタムDOMイベントを拾う）

そういうわけで、より厳密な方法を探してたんですが、公式ドキュメントを探したところ、良い感じのものを見つけました。どうやら送信判定に使える、カスタムDOMイベントがあるようです。

送信成功時に関数を動作させたいので『wpcf7submit・wpcf7mailsent』あたりがよさそう。他にも『Ajaxフォーム送信完了』『Ajaxフォーム送信完了したがメール送信は失敗』などのDOMイベントがあります。下の公式ドキュメントもご確認ください。

DOM イベント(Contact Form 7)
https://contactform7.com/ja/dom-events/

また、ターゲットに特定イベントが配信したとき、関数呼び出しの設定する、addEventListener()メソッドについては、以下のリンクもご確認ください。

EventTarget: addEventListener()メソッド
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

contact form 7　DOMイベントを拾って転送する方法

おためし表示確認（送信時アラート）

公式ドキュメントにあった、アラート表示のスクリプトで行ってみました。イベントは『wpcf7mailsent（Ajaxフォーム送信、メール送信ともに完了）』をチョイス。送信を押した後、こんな感じでアラート出ます。あとは、location入れてやれば大丈夫そうですね～。

addEventListenerメソッドでcontact form 7　DOMイベントを拾って転送するコード

コードはこんな感じになりました。コードの意味は『is_single(1234)がWP組み込み判定・記事id1234番』で、『querySelectorでwpcf7クラスの要素を取って変数wpcf7Elmに格納』『wpcf7Elmに、カスタムdomイベントのwpcf7mailsent追加』という流れです。

alertは上記のテスト用です。location.hrefにexample.comが指定されていますが、ここに任意のサンクスページのurlを記載することで転送されます。

不正な表示（メール送信しないで直接urlからサンクスページに入るなど）の場合はどうする？

上のコードはサクッと書きましたけど、実際に使用する場合は『メール送信しないで直接urlからサンクスページに入るなどの不正な表示』も対策したほうがよいでしょう。

input type=hiddenの隠しフォームにユニットタグ（wpcf7-f〇〇〇-p20-o1みたいなの）がありますけど、これはhtmlソース見ればバレるので、そういう用途に使うものではないでしょう。

定番ですが『リファラ判定』『$_SESSIONにトークン入れて、次ページに渡して判定（直接入るとこの値が空になる）』などを組み合わせるという感じになるでしょうか。

あとがき

まとめると、こんなところでしょうか。以前は『さらに追加プラグイン』みたいなやり方だったけど、これだとシンプルにできそうですね。