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などへの誘導にも利用できますので、サンクスページを有効活用していきましょう。