Contact Form7でサンクスページを作る方法 プラグイン追加なし!

プラグイン
  1. ホーム
  2. プラグイン
  3. Contact Form7でサンクスページを作る方法 プラグイン追加なし!

※ この記事はNishikiもくもく勉強会の補足です。
(Youtubeでご覧いただけます→ こちら)

さて、人気のお問い合わせフォーム、Contact Form7で「サンクスページ」を作る方法を紹介します。

サンクスページとは

サンクスページとは

お問い合わせフォームの「送信」を押すと出てくる「お問い合わせありがとうございます」のページのこと。他にも何かを申し込みんだり、登録、購入などユーザーが行動したことに対して表示されるお礼のページ全てを指します。

Contact Form7は「送信」ボタンを押すと、そのまま以下のような「送信しました」が表示されるだけで、いわゆる「サンクスページ」がありません。

Contact Form7の送信完了のお知らせ例
(メッセージは変更できます)

なぜかというと、Contact Form7の開発者さんが「そんなものいらないでしょ?」と考えているからです。

そんなのは全然必要ありません。時代遅れの無意味な慣習といっていいと思います

https://contactform7.com/ja/redirecting-to-another-url-after-submissions/

ここまでズバッと言ってくれると痛快ですね(笑)
サンクスページを作ろうと思っている方は、本当に必要なのか再考する価値はあるかもです。

ただ、アクセス解析に必要なかったとしても、親切でわかりやすいサンクスページはやっぱり欲しいと考える方も多いですよね。私もよく頼まれます。そんな時のための作り方をまとめました。

Contact Form7でのサンクスページの作り方

Contact Form7には、残念ながらサンクスページを作る機能はありません。

そのため、カスタマイズ用のコードを追記するか、プラグインを使用するかのどちらかの方法が必要です。

コードに慣れない方はプラグインの方がいいと考えがちですが、プラグインに頼っているとそのプラグインが開発を中止してしまったら使えなくなってしまうというデメリットがあります。

プラグインをカスタマイズするのにまたプラグインを増やすのもなぁ、と言う気がします。
特に、もとのContact Form7にない機能を、他の人が補足したプラグインなので、どこまで本家に合わせてアップデートしてくれるのかわからないからなんです。

私は、コードを追加してカスタマイズする方をおすすめしたいです。

コードを追加してカスタマイズする

やり方は簡単で、function.phpに以下のコードを書くだけです。

「コンタクトフォームを設置したページのID」と、
「サンクスページのURL」が必要になるので、お問い合わせフォームとサンクスページを作ったら、それぞれ控えておいてください。

ページID確認方法

ページIDは、お問い合わせフォームをおいた固定ページのID番号です。
サンクスページのIDと間違えやすいのでご注意ください。

固定ページ一覧で、ページタイトルにマウスを合わせるとブラウザの一番下に小さく表示されますよ。画像で言うと「post=2289」の2289がページIDです。数字はページごとに異なるので、作ったお問い合わせフォームのIDを確認してくださいね。

あ、画像のページサンクスページだった(笑)ここではIDの確認方法ってことで、気にしないでください・・。すみません。

記述するコードは以下の通りです。

functions.phpに記述するコード

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

黄色いマーカー部分を、それぞれページID・URLに書き換えるだけです。

サンクスページ動作サンプル

このコードを使って作った、サンクスページつきフォームのサンプルがこちらです。
https://wp-firststep.com/nishiki_pro/thxpagetest/

ちょっと試してみていただけますか?

このままだと、一瞬「ありがとうございます」メッセージが見えることにお気づきになりましたでしょうか。

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

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

元のメッセージが見えるのが嫌な方へ

以下のCSSを「追加CSS」にコピペすればContact Form7のOKメッセージだけを非表示にできます。

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

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

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

実は、Snow Monkey Formsがおすすめ

と、まぁここまでやり方を紹介してきたのに何ですが、もし、Contact Form7じゃなきゃダメな理由がないのだったら・・・・開発者さんが「いらないでしょ?」と言っている機能をわざわざつけて使うより、もともと確認画面がついているプラグインを使うほうがスムーズですよ。デザインもきれいだし。

MW WP Formという有名プラグインはどうか?

お問い合わせフォームプラグインといえば、「MW WP Form」も有名ですが、ちょっとプロ向けと言うか複雑なことができます。しかし、よくご覧いただくと、「MW WP Form」は「Snow Monkey Forms」と同じ開発者さんなんですよね。知ってた?

開発者のキタジマさんはTwitterでこう仰ってます。

これから始める方は、「Snow Monkey Forms」を使うのがおすすめですね。

勉強会動画

この記事は、「Nishikiもくもく勉強会」で話題に上がったので、補足のために書いたものです。
アーカイブもしてるのでよかったら以下からご覧ください。