・Contact Form 7でサンクスページを作る方法は？
こんな疑問にお答えします。
Contact Form 7ではデフォルトのままだと、確認・完了ページなしでそのまま送信できてしまいます。
１P で完了するのは良いですが、送信者側からすると本当に送れたの？と思うかと。
一応送信メッセージはでるのですが、サンクスページが欲しい場合もありますよね。
ただ大丈夫！
サンクスページを作成することは可能です。
すぐにできるよ！
ということで、この記事では「Contact Form 7でサンクスページを作る方法」について解説していきます！
Contact Form 7でサンクスページを作る方法
【WordPress】Contact Form 7の使い方【お問い合わせフォーム】 目次
【解説】Contact Form 7でサンクスページを作る方法
Contact Form 7でサンクスページを作る方法は下記になります。
- サンクスページを作成
- リダイレクト用コードを記述
- メッセージを修正
まず完了画面に飛ばすようのサンクスページを作成していきます。
固定ページにて完了ページを作成します。パーマリンクは「complete」にしました。
phpにてテンプレートページを作成します。今回は「page-complete.php」を作成しました。
<?php
get_header(); ?>
<main class="l-main">
<!-- お問い合わせ完了のメッセージをこの中に作成 -->
</main>
<?php get_footer(); ?>（WordPressオリジナル案件作成の場合を想定）
次に送信したら先ほど作成したサンクスページに飛ばすプログラムを記述します。
そのコードとしてはこちら↓
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://example.com/complete/'; //サンクスページURL
}, false );
</script>example.comの部分に、そのサイトのURLを記述しましょう。
記述する場所はコンタクトフォームの入力部分最後になります↓
最後にメッセージを修正します。
デフォルトでは下記のようになっています。
ただこの文言が出た後に、サンクスページに飛ぶのはちょっと変ですよね。
そのため下記のように修正しておくのがオススメ。
こうすれば「送信中…」と出た後に、サンクスページに飛ぶことになります。
見た目的に良い感じですよね。
【解説】Contact Form 7でサンクスページを作る方法：まとめ
- サンクスページを作成
- リダイレクト用コードを記述
- メッセージを修正
サンクスページを作る場合は試してみてね
ちなみにデフォルトのままだと、pタグやbrタグが自動挿入されてしまいます。
削除方法が知りたい人は下記をどうぞ↓
【Contact Form 7】自動挿入するpタグ・brタグの削除方法【解決】
