【Contact Form 7】サンクスページをたったの2ステップで実装!

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

こんにちは、ゆうや(@yuyaphotograph)です!

この記事では、

  • Contact Form 7でサンクスページを作りたいけどやり方が分からなくて困っている
  • Contact Form 7でお問い合わせ送信完了後、初期状態の表示では味気ないのでサンクスページを用意したい
  • Contact From 7でサンクスページを設置して次の行動を促したい

という方のお悩みを解決します!

プラグインを新たに追加しなくとも、ほんの数分で実装できますのでご安心を。

サンクスページを2ステップで実装!

Contact Form 7のお問い合わせフォームにサンクスページを設置するには、以下の手順で行います。

  1. サンクスページを固定ページで新規作成する
  2. functions.phpに「送信完了後にサンクスページへ遷移させる」コードを追加する

固定ページ新規作成

WordPress管理画面左メニューの固定ページ新規追加を選択。
サンクスページを作成しましょう。

スラッグは単純に「/thanks」でいいでしょう。

functions.phpに追記

以下のコードをfunctions.phpに追記します。

*はにわまんさんのこちらの記事のコードを参考にさせていただきました!

functions.php
add_action( 'wp_footer', 'add_thanks_wcf7' );

function add_thanks_wcf7() {
echo <<< EOD
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  location = 'サンクスページのURL';
}, false );
</script>
EOD;
}

locationで指定するURLはサンクスページのフルパスにしましょう。

以上、たったこれだけの作業でサンクスページ設置完了です!

まとめ

以上、Contact Form 7のお問い合わせフォームにサンクスページを用意する方法を紹介しました。

実際のWordPressを使ったWeb制作案件で使用したこともあるTipsですので、お役に立てれば幸いです!

 

「他にもContact Form 7関連の情報を知りたい!」

という方は以下の記事も目を通してみてください〜

ContactForm7 選択肢ごとに返信メール内容を条件分岐させる方法【Conditional Fields】Contact Form 7 選択肢ごとに返信メール内容を条件分岐させる方法【Conditional Fields】 Contact Form 7で文字数制限する方法と文字数カウントを表示する方法Contact Form 7で文字数制限する方法と文字数カウントを表示する方法 【Contact Form 7】チェックボックスをカスタマイズする方法【Contact Form 7】チェックボックスのデザインをカスタマイズする方法 【Contact Form 7】 自動返信メールのメッセージ本文のテンプレはこれだ!【Contact Form 7】 自動返信メールのメッセージ本文のテンプレはこれだ!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です