Contact Form7でサンクスページを設置する方法

Contact Form7でサンクスページを作りたい
なるべく簡単に作れる方法がいいな

送信完了画面はサンクスページを別に作るのがおすすめです。

CSSやJavaScriptを使って同じ画面内でお問い合わせ完了の表示をする方法もありますが、送信完了後に縦のスクロール位置がずれるなどのデメリットがあります。

またサンクスページを作ることにより、お問い合わせフォームでの離脱率を確認するのにも役立ちます。

この記事ではContact Form7でサンクスページを作成する方法を解説します。

この記事の著者

web制作エンジニア

伊藤 義尚

2021年よりweb制作の学習を開始し、現在1社と業務提携中

自身が学んだこと、ためになったことを発信しています

サンクスページを作成する

まずは固定ページでサンクスページを作成します。

送信ボタンを押したらサンクスページに移動するようにする

functions.phpに以下を記載します。

// CF7 送信後にサンクスページに移動する
add_action('wp_footer', 'redirect_to_thanks_page');
function redirect_to_thanks_page()
{
    $homeUrl = home_url();
    echo <<< EOD
    <script>
        document.addEventListener( 'wpcf7mailsent', function( event ) {
            location = '{$homeUrl}/thanks/';
        }, false );
    </script>
    EOD;
}

location = '{$homeUrl}/thanks/';のthanksの部分は、サンクスページのURLが異なる場合変更して下さい。

送信完了のメッセージを非表示にする

cssで以下の記載を追加します。
これでデフォルトの送信完了の表示が非表示になります。

// 送信完了メッセージの削除
.wpcf7 form.sent .wpcf7-response-output {
  display: none;
}

まとめ

Contact Form7でサンクスページを設置する方法を解説しました。

少しでも参考になれば幸いです。