スキルアップを始める!

【Contact Form 7】送信ボタンを押した時にサンクスページなど(別URL)にリダイレクトさせる方法

WordPress(ワードプレス)
WordPress(ワードプレス)
この記事は約2分で読めます。

※記事中に広告情報を含みます。

スキルを手に入れた時、人は強くなれる。
Youtubeでスキルアップを始める 電子書籍でスキルアップを始める
\ワードプレスのスキルアップはこちら!/ WordPress入門読本

ワードプレスで有名なContact Form 7プラグインで送信ボタンを押した時にサンクスページなど(別URL)にリダイレクトさせる方法です。

DOMで送信ボタンをキャッチする(addEventListener)

addEventListenerを使って、送信ボタンのイベントをキャッチします。

addEventListener() は EventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。

https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

addEventListenerはマウスによるクリックやキーボードからの入力イベント処理を実行するメソッドです。

第三引数のuseCaptureはtrueまたはfalseの真偽値で指定します。trueのとき、キャプチャフェーズでのイベント通知、falseのときはバブリングフェーズでのイベント通知となるようです。詳細はまた別記事でまとめたいと思います。

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

あとは、ボタンクリック(送信)イベントが発生したときに、リダイレクトさせればよいのでlocation = を追加します。

[rml_read_more]

document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = '/form10-thanks/';
}, false );

送信ボタンを押してみます。

リダイレクトされました!

まとめ

覚えると簡単に設定できます。

ただしリダイレクト設定は設定を間違えると大変なことになるので、設定は慎重に行いましょう😃

URLをコピーしました!