Contact Form7でサンクスページを作る方法

猫でもわかるWordPress

こちらはNishikiもくもく勉強会でお話しした内容の補足です。

参加されていない方はこちらからYoutubeをご覧ください。
(クリックするとページの一番下の動画紹介へ移動します)

ContactForm7でつくられた問い合わせフォームは、
「送信」ボタンを押すと、ページは移動せず
同じページで「送信しました」というお知らせ出るだけになっています。

Contact Form7の送信完了のお知らせ例
(文言は変更できます)

↑ これだとちょっと簡易的ですね。

「送信」ボタンを押すとページが切り替わって、
「ありがとうございました!」とでた方が「っぽい」ですよね。

この、「ありがとうございました!」ページのことを
サンクスページといいます。

ContactForm7には初期設定ではサンクスページ機能はありませんが、
function.phpに以下のコードを書いて、
「移動元のページID」「移動先のURL」を描くだけで
サンクスページに移動させることができますよ。

「移動元のページID」・・・お問い合わせフォームのページID

「移動先のURL」・・・サンクスページのURL

です。

記述するコードは以下の通りです。
IDとURLを入れ替えてお使いください。

functions.phpに記述するコード

add_action( 'wp_footer', 'add_thanks_page' );
function add_thanks_page() {
if( get_the_ID() == 'xxxxxxxx' ) {/* xxxxxxにページIDを入れる */
echo <<< EOD
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  location = 'https://wp-firststep.com/thanks/'; /* サンクスページのURL */
}, false );
</script>
EOD;
}
}

※ xxxxxxには、お問い合わせフォームのIDを入れてください。

お知らせも見えないようにしよう

このコードを書いておけば、サンクスページに移動するのですが、
移動する前の数秒間、この「ありがとうございます」メッセージが見えてしまいます。

ちょっとかっこ悪いですね。

なので、私はこの表示を無理やり消すことにしました。

以下のCSSを追記すれば
ContactForm7のOKメッセージだけを非表示にできます。

.wpcf7-mail-sent-ok{
display:none!important
}

よかったらご活用ください♪

functions.phpに記載するコードは
誠に勝手ながら、はにわまんさんの記事を参考にさせていただきました。
https://haniwaman.com/contact-form-7-add-page/

便利なコードをありがとうございました^^

Youtube動画で勉強会の様子がご覧いただけます。

Nishikiもくもく勉強会の様子は
Youtubeでも公開されています(一部)

こちらからご覧ください。