ユーザーがContactForm7でアンケートフォームから送信処理を行ったタイミングで別ページに遷移させる方法です。
ContactForm7に標準で搭載されている機能で、お問い合わせ送信後に“お問い合わせありがとうございました”といったサンキューページに転送させることができます。
送信したことが視覚的に分かりやすいだけでなく、遷移後にトップへすぐ戻る導線を用意することで使いやすさの向上や、問い合わせ内容から連想される“ユーザーが気になりそうなコンテンツ”への導線を用意する事で回遊率を高めるなど、ページ遷移をさせることで様々な効果が得られます。
さっそく方法を見ていきましょう。
もちろんですが、アンケートフォームを設置しているページと、サンキューページを制作しておく必要があります。
フォーム送信時にサンキューページに遷移させる
今回は下図のようにページ遷移を行います。
送信ボタンを押すと、用意したURLに自動的に遷移させるイメージです。
ページ遷移処理のコードをfunctions.phpに追加する
上記したように、送信(submit)を行ったタイミングで処理を行う関数がContactForm7に標準で搭載されているので、その機能を使って遷移させます。
add_action( 'wp_footer', 'add_thanks_page' );
function add_thanks_page() {
echo <<< EOD
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = '遷移先のページURL';
}, false );
</script>
EOD;
}こちらのコードをfunctions.phpの任意の場所に追加してください。
location = ‘遷移先のページURL’;を用意したサンキューページのURLに変更します。（ 例：location = ‘https://example.com/thanks/’; ）
転送処理に関してはこれだけで完了です。
実際にフォーム内容送信後に指定したURLにページが遷移するかどうか確認してみてください。
フォーム毎にサンキューページを変更する
Aのお問い合わせフォームからはAのサンキューページへ、BのアンケートフォームからはBのサンキューページへと遷移先を変更したい場合が出てくるかと思います。
上記のコードに少し追記する事で遷移先を分岐させることが可能になるので、アンケートフォームがたくさんある場合はこちらを使ってみてください。
今回はコンタクトフォーム表示ページに割り振られているIDを使って処理を分岐させます。
ページのIDを調べる
ページに割り振られているIDは、ページ一覧から確認できます。
ここでは、お問い合わせフォームのページIDが320、イベント応募受付フォームのページIDが322になっていますので、上記のコードにidが320ならAのサンキュー画面、idが322ならBのサンキュー画面になるようにコードを追記します。
ページ遷移処理のコードを追記する
分岐はおなじみのif文で処理します。
add_action( 'wp_footer', 'add_thanks_page' );
function add_thanks_page() {
if( get_the_ID() == '320' ) { //ここにIDを入れる
echo <<< EOD
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = '遷移先AのページURL';
}, false );
</script>
EOD;
}
}
分岐先が増える場合はif文をまるっとコピーして増やします。
add_action( 'wp_footer', 'add_thanks_page' );
function add_thanks_page() {
if( get_the_ID() == '320' ) { //ここにIDを入れる
echo <<< EOD
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = '遷移先AのページURL';
}, false );
</script>
EOD;
}
if( get_the_ID() == '322' ) { //ここにIDを入れる
echo <<< EOD
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = '遷移先BのページURL';
}, false );
</script>
EOD;
}
}これでIDが320の場合はAのサンキューページへ、322の場合はBのサンキューページへ転送させることができるようになります。
まとめ
以上がアンケートフォーム送信後にサンキューページへ遷移させる方法になります。
基本的にはコピペ+各々のID、URLへ書き換える事で導入が可能ですので、ContactForm7を使っている場合は試してみてください。
