Contact Form 7 で送信完了後に別ページに遷移させる方法

MARKLEAPS

2020.10.13

送信完了後別ページに遷移

WordPressでとてもお世話になっている「Contact Form 7」ですが、
送信完了後の表示が分かりずらいのがやや難点です。
そこで、送信完了ページを別ページに分け、フォーム送信後に
送信完了ページにリダイレクトさせる方法をご紹介します。

通常、Contact Form 7 でフォームを送信すると
以下のようにフォーム下にメッセージが表示されますが、
送信が完了したのかがパッと見て分かりにくい作りとなっています。

特に、フォームが長い場合は見落してしまう場合もあるので注意が必要です。

送信完了後の表示が分かりにくい

固定ページで送信完了ページを用意します。

サンクスページを作成

テーマファイルのheader.phpに以下のコードを記述します。

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

document.addEventListener( 'wpcf7mailsent', function( event ) {

location = 'https://example.com/thanks/';

}, false );

</script>

location = ‘ ‘ 部分のURLは、
前項で作成した固定ページのURLを指定します。

送信完了ページを持たせることで、
送信完了したことが視覚的に分かりやすくなるだけでなく、
送信完了ページにPRしたいコンテンツを表示するということもしやすくなります。

フォームのみにreCAPTCHAを表示させるためにプラグイン「Invisible reCAPTCHA」を使う場合がありますが、「Invisible reCAPTCHA」を使うとサンクスページへのリダイレクトが効かなくなってしまうため注意が必要です。

WordPress

よく読まれている関連記事