![パソ君](https://jito-site.com/wp-content/uploads/2022/02/computer09_question.png)
・Contact Form 7でサンクスページを作る方法は?
こんな疑問にお答えします。
Contact Form 7ではデフォルトのままだと、確認・完了ページなしでそのまま送信できてしまいます。
1P で完了するのは良いですが、送信者側からすると本当に送れたの?と思うかと。
一応送信メッセージはでるのですが、サンクスページが欲しい場合もありますよね。
ただ大丈夫!
サンクスページを作成することは可能です。
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
すぐにできるよ!
ということで、この記事では「Contact Form 7でサンクスページを作る方法」について解説していきます!
Contact Form 7でサンクスページを作る方法
![](https://jito-site.com/wp-content/uploads/2023/05/adffd4c27460a8947eb152f9deec16af-160x160.png)
目次
【解説】Contact Form 7でサンクスページを作る方法
Contact Form 7でサンクスページを作る方法は下記になります。
- サンクスページを作成
- リダイレクト用コードを記述
- メッセージを修正
まず完了画面に飛ばすようのサンクスページを作成していきます。
固定ページにて完了ページを作成します。パーマリンクは「complete」にしました。
![](https://jito-site.com/wp-content/uploads/2023/05/798e1abf21df0c9596b884a98e222d1b.png)
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を記述しましょう。
記述する場所はコンタクトフォームの入力部分最後になります↓
![](https://jito-site.com/wp-content/uploads/2023/05/c55183cdf46af189248ab06feb8a69a2.png)
最後にメッセージを修正します。
デフォルトでは下記のようになっています。
![](https://jito-site.com/wp-content/uploads/2023/05/62a529b932d404852de13bb01643aa32.png)
ただこの文言が出た後に、サンクスページに飛ぶのはちょっと変ですよね。
そのため下記のように修正しておくのがオススメ。
![](https://jito-site.com/wp-content/uploads/2023/05/57a28bdf28761285e1c10c83dcd99d30.png)
こうすれば「送信中…」と出た後に、サンクスページに飛ぶことになります。
見た目的に良い感じですよね。
【解説】Contact Form 7でサンクスページを作る方法:まとめ
- サンクスページを作成
- リダイレクト用コードを記述
- メッセージを修正
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
サンクスページを作る場合は試してみてね
ちなみにデフォルトのままだと、pタグやbrタグが自動挿入されてしまいます。
削除方法が知りたい人は下記をどうぞ↓
![](https://jito-site.com/wp-content/uploads/2023/05/95e69de7c0c38c66431471d7b3a337cb-160x160.png)