URLをコピーしました!
スキルアップを始める!

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

WordPress(ワードプレス)
\ワードプレスのスキルアップはこちら!/ 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 );

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

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

まとめ

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

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

Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら