Contact Form 7【WordPressのプラグイン】でフォーム送信後に指定のURLへ遷移させるJavaScriptコードの紹介(wpcf7mailsentイベント)

本記事では、WordPressでホームページ制作をしている際にお問い合わせ用のプラグインで大人気のコンタクトフォーム7『Contact Form 7』について、お問い合わせフォーム送信後に指定のURLへ遷移させるJavaScriptのコードを紹介していきます。

Contact Form 7でフォーム送信後に指定のURLへ遷移させる方法

以下がJsコードになります。location = ‘https://example.com/thanks’;の箇所のURLを変更することで指定のURLへ遷移させることができます。

<script>
  document.addEventListener( 'wpcf7mailsent',function( event ){
    location = 'https://example.com/thanks';
  }, false );
</script>

全体の概要

• document.addEventListener('wpcf7mailsent', function(event){ location = 'https://example.com/thanks'; }, false);
• このコードは、wpcf7mailsentというカスタムイベントが発生したときに、ユーザーを特定のURLにリダイレクトする処理を行います。

詳細な解説

1. document.addEventListener( 'wpcf7mailsent', function( event ){ ... }, false );
   • document.addEventListener:
     • このメソッドは、指定したイベントが発生したときに呼び出される関数（イベントリスナー）を設定します。
   • 'wpcf7mailsent':
     • イベントの種類を示しています。ここでは、wpcf7mailsentというカスタムイベントです。これは、Contact Form 7というWordPressのプラグインによって生成されるイベントで、フォームの送信が成功したときに発生します。
   • function( event ){ ... }:
     • イベントが発生したときに実行される無名関数（コールバック関数）です。ここでは、eventが引数として渡されますが、特に使われていません。
   • false:
     • イベントキャプチャの設定です。ここでは、バブリングフェーズ（イベントがターゲット要素から親要素に向かって伝播するフェーズ）でイベントを処理することを示します。
2. location = 'https://example.com/thanks';
   • location:
     • JavaScriptのlocationオブジェクトは、現在のドキュメントのURLを示します。このオブジェクトを変更することで、ブラウザを新しいURLにリダイレクトできます。
   • 'https://example.com/thanks':
     • これは、新しいURLです。wpcf7mailsentイベントが発生したときに、ブラウザはこのURLに移動します。

まとめ

• Contact Form 7のフォームが正常に送信されたときにwpcf7mailsentイベントが発生します。
• このイベントが発生すると、指定されたURL（https://example.com/thanks）にユーザーをリダイレクトします。

このコードをウェブページに追加することで、フォーム送信後にユーザーを指定のサンクスページに誘導することができます。