WordPressについての記事

Contact Form7で送信後にサンクスページに遷移させる方法

Contact Form7で送信後にサンクスページに遷移させる方法

『Contact Form7』で作成したフォームはデフォルトだとサンクスページへ飛ばすことはできません。
送信ボタンクリック後に表示される「送信しました」メッセージだけだとちゃんと送信できたのか不安になりますよね。

デフォルトの送信後のメッセージもわかりづらいですよね。
サンクスページできちんと完了メッセージを表示した方がわかりやすいです。

UX的にもサンクスページはあった方がいいと思いますので、今回は送信後にサンクスページに遷移する方法を紹介します。

サンクスページに遷移させる手順

サンクスページを固定ページに作成しておきます

「thanks」などわかりやすい名前で作成しておきます。

functions.phpに遷移させるコードを追加します。

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

add_action( 'wp_head', 'mycustom_wp_footer' );

function mycustom_wp_footer() {
	$thanks = 'スラッグ名';
?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
	location = '<?php echo home_url('/'.$thanks); ?>';
	}, false );
</script>
<?php
}

$thanks変数にサンクスページのスラッグ名を記載します。

$thanks = 'thanks';

スラッグ名とはURLの末尾の箇所です。
「https://○○.com/thanks」ならthanksということになります。
サンクスページがお問い合わせページの子ページにある場合は、親ディレクトリも一緒に記載します。

$thanks = 'contact/thanks';

URL全体ではなくスラッグ名のみにすることで、ドメインを変更した際や、最初はSSL未対応で後にSSL対応した時にコードを変更せずにすみます。

これで送信ボタンクリック後にサンクスページへ遷移することができると思います。

おわりに

サンクスページがあることで利用者のサイト利用体験の満足度も高まります。
次回の利用を促すアナウンスや各種SNSなどへの誘導にも利用できますので、サンクスページを有効活用していきましょう。