こんにちは、けんです。
WordPressでお問い合わせフォームをつけたいということになったら、圧倒的に人気があるプラグインが「Contact Form 7」ですよね。
僕も、自分のサイト運営はもちろん、受注したWebサイト制作でも大変お世話になっています。
先日、サイト運営のご依頼をいただいているクライアントに「送信ボタンを押した後に送信完了画面を表示してほしい」と頼まれました。
「Contact Form 7」を利用している人ならわかると思いますが、お問い合わせフォームを入力して送信ボタンを押したら、その場で「ありがとうございます。メッセージは送信されました。」と表示され、送信完了ページが表示されることはありません。
送信ボタンを押した後に送信完了ページにリダイレクト(別のページへ飛ばすこと)しなければ、「訪問ユーザーは送れたか送れていないかわかりにくいんじゃないか」ということになりました。
ということで、Contact Form 7 で送信完了ページへリダイレクトする方法を紹介します。
送信完了ページを作成する
まずは、リダイレクトさせる送信完了ページを作成します。いわゆるサンクスページと呼ばれるページです。
固定ページで、タイトルは「送信完了ページ」などにして、パーマリンクは「/thanks」、または「/send-completed」などにするとわかりやすいでしょう。
これで準備はOKです。
送信完了ページにリダイレクトするコードを記述
それでは、実際にお問い合わせフォームの送信ボタンを押したら、送信完了画面にリダイレクトするコードを記述しましょう。
Contact Form 7 公式サイトのページを参考にしました。
公式サイト：https://contactform7.com/ja/redirecting-to-another-url-after-submissions/
function.phpに記述する
add_action( 'wp_footer', 'add_thanks_page' );
function add_thanks_page() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'example.com/send-completed'; /*送信完了ページのURL*/
}, false );
</script>
<?php
}
上記コードをfunctions.phpにコピーペーストします。
location=''には自分の送信完了ページのURLを入力してください。
特定のお問い合わせフォームだけリダイレクトさせる場合
functions.phpに記述すると、サイト内のすべてのお問い合わせフォームが送信完了ページにリダイレクトされることになります。
複数のお問い合わせフォームがあるというサイトでは、これでは困るということもあるでしょう。
1つのフォームにのみ適用したい場合の手順です。
- 該当固定ページの編集画面を開く
- テキストモードを選択してから、エディタに以下のコードを貼り付ける。
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://example.com/';
}, false );
</script>
これで貼り付けられた固定ページのお問い合わせフォームのみ、送信完了ページへのリダイレクトが適用されます。
送信のメッセージを変更
送信ボタンを押した後に、「ありがとうございます。メッセージは送信されました。」というテキストが表示されますよね。
このテキストが一瞬見えてから送信完了ページが表示されるというのは、メッセージが重複していて違和感があります。
なので自然になるようにこのテキストを変えましょう。
WordPress管理画面の右サイドメニューより、[お問い合わせ]から「Contact Form 7」の編集画面を開きます。
メッセージタブをクリックすると、あらゆる状況のメッセージ表示を設定する画面が表示されます。
ここで一番上の「メッセージが正常に送信された」という項目のテキストを「送信中…」に変更しましょう。
送信ボタンを押したら「送信中…」と表示され、送信完了ページにリダイレクトします。これで自然な流れになりました。
まとめ
「最近は送信完了画面にリダイレクトするサイトも少ない気がするし、必要ないんじゃない！？」と思いながら実装してみましたけど、実際に送信完了ページへ飛ぶと送れた感があってやっぱりいいですね。
送信完了画面が表示された方が安心するというユーザーもたくさんいると思いますので、ユーザビリティを考えて実装してみてもいいかもです。
