コンタクトフォーム7にサンクスページを追加する方法
言わずとしれたWordPressの人気プラグインのコンタクトフォーム7。
デフォルトのままでも、お問い合わせを送信すると簡単な「ありがとうございます」というメッセージが表示されます。ですが、意外にもこのメッセージは見逃しがち。このため、ユーザーが誤って再送信を繰り返してしまう… なんて事も結構起きるものです。以前の記事 ”コンタクトフォーム7の「ありがとうございます」の表示位置を変更する方法” のように、位置を調整する事でもサンクスメッセージを目立たせる事は出来ますが、送信後に別に作成したサンクスページに遷移させたいという場合も多いでしょう。
という事で今回は、コンタクトフォーム7に別に用意したサンクスページを追加する方法です。javascriptを使用します。javascriptがよくわからないという方でも、コピペでできますのでチャレンジしてみて下さい。
～ 目次 ～
サンクスページを用意する
最初に使用するサンクスページを準備しましょう。
ページあればなんでもいいので、固定ページでも投稿ページでも都合の良いところに1ページ作ってください。
javascriptコードの設置
ワードプレスサイトにjavascriptを設置する方法はたくさんありますが、今回はなるべく環境に左右されない方法です。という事で、wp_footerフックを利用して、ページのbodyの閉じタグの前にjavascriptコードを直接出力しています。
下のコードをコピーして、使用中のテーマのfunctions.php内に貼り付けましょう。貼り付け場所は最後で大丈夫ですが、functions.phpの最終行に”?>”と書かれていたら、その前の行に貼り付けましょう。
|
1 2 3 4 5 6 7 8 9 10 |
add_action( 'wp_footer', 'add_origin_thanks_page' ); function add_origin_thanks_page() { echo <<< EOC <script> document.addEventListener( 'wpcf7mailsent', function( event ) { location = 'https://whitewood-hp.com/web-tips'; }, false ); </script> EOC; } |
上のコードのままだと、このブログのトップページにジャンプしてしまいます。
6行目を遷移させたいサンクスページのURLに書き換えましょう。クォーテーションやセミコロンをうっかり消してしまうとエラーになります。注意して下さい。
|
1 |
location = 'サンクスページのURL'; |
これだけでサンクスページの追加は完了です。
最後に
ちゃんと送信後にページが移動しましたか？意外なほどカンタンですよね。
コンタクトフォーム7で参考コードを用意してくれていたからですが。。。このページの内容は、下のページを参考にしています。ご覧になりたい方はどうぞ。
参考サイト
送信後に異なる URL にリダイレクトさせるには | Contact Form 7 [日本語]
