icon
Let's create! WordPressサイト制作とメンテ/エラー対応から、PHP/CSS/javascriptプログラミング、動画・音・イラスト等制作まで扱うコラム

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

更新: 2024/04/27 2372文字

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

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

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

以前の方法

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

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

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

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

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

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

おためし表示確認(送信時アラート)

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

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

<?php if(is_single(1234)) : ?>
<script>
var wpcf7Elm = document.querySelector( ‘.wpcf7’ );
wpcf7Elm.addEventListener( ‘wpcf7mailsent’, function( event ) {
   //alert( “送ったよ!” );
   location.href = “https://example.com”;
}, false );
</script>
<?php endif;?>

コードはこんな感じになりました。コードの意味は『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にトークン入れて、次ページに渡して判定(直接入るとこの値が空になる)』などを組み合わせるという感じになるでしょうか。

あとがき

  • WP/contact form 7にはサンクスページ転送が無いが、送信判定に使えるカスタムDOMイベントがある
  • addEventListenerメソッドでDOMイベントを拾って、locationでサンクスページ転送、という風に使える
  • 不正な表示をされたくないときは、リファラ判定や$_SESSION判定も組み合わせる

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


【カテゴリ】- WordPressプラグイン情報
【タグ】- , ,

関連記事