WordPressでお問い合わせフォームを作成するプラグインの「Contact Form 7」。
このプラグインを使用してお問い合わせフォームを作成した場合、送信完了した際、デフォルトの設定のままだとフォーム下に送信完了のメッセージが表示されるだけになっています。
これだけだと送信完了したことが少し分かりにくくユーザビリティが悪く感じてしまいます。
そこで今回の記事では送信完了した際に送信完了ページを表示する方法をご紹介します。

デフォルトの送信完了の表示

まずは「Contact Form 7」のデフォルトの送信完了時の挙動を見てみましょう。
「Contact Form 7」では送信完了した際に以下の画像のような送信完了メッセージが表示されます。

このデフォルトのままでも動作的には問題ありませんが、ユーザビリティの観点から見ると少し不親切な印象ですね。
そこで別途送信完了ページを作成してユーザビリティの向上を図りましょう。
また送信完了ページを作成することでGoogle Analytics等のアクセス解析にて、コンバージョン測定を行うことも可能になります。

送信完了画面を作成

「Contact Form 7」で送信完了画面を作成する方法はいくつかの方法があります。
それぞれの方法を順番に見ていきましょう。

JavaScriptでリダイレクト設定する方法

まずは自分自身でJavaScriptのコードを作成し指定したページへリダイレクトする方法をごご紹介します。

固定ページで送信完了ページを作成する

リダイレクト先の完了画面を固定ページで以下のように作成します。
今回は完了画面のスラッグ名は「send」としました。

リダイレクトするためのJavaScriptコードを作成する

次に「Contact Form 7」のお問い合わせ画面でリダイレクトするためのJavaScriptのコードを作成します。

リダイレクトするためのJavaScriptコードは以下になります。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://example.com/send/';
}, false );
</script>

上のコードの「send」の部分はそれぞれが設定した完了画面のスラッグ名を指定します。

このコードを記載することで送信完了後に作成した送信完了画面へリダイレクトさせることが出来ます。

「Redirection for Contact Form 7」を使用する方法

続いて、「Redirection for Contact Form 7」というプラグインを使用して完了画面へリダイレクトする方法です。

固定ページで送信完了ページを作成する

「Redirection for Contact Form 7」を使用する場合も送信完了画面は自分自身で用意する必要があります。
完了画面のページ名は「送信完了画面」としました。
「Redirection for Contact Form 7」を使用する場合はスラッグ名ではなく、固定ページのページタイトルを覚えておく必要があります。

「Redirection for Contact Form 7」の設定

まずは以下画像の「Redirection for Contact Form 7」をインストールして有効化します。

このプラグインを有効化することで「Contact Form 7」の各お問い合わせフォームの設定タブに以下の画像のように「Actions」タブが生成されます。

続いてセレクトボックスから赤枠①「Redirect」の項目を選択し、赤枠②「Add Action」をクリックします。

そうすることで下の画像のような項目が生成されます。

続いて詳細な設定をしていきます。設定画面を開くと多くの項目が表示されますが設定が必要な項目は2つだけ。
以下画像の赤枠①と②になります。
赤枠①のRule Titleは任意のタイトルを設定します。今回は「完了画面」としました。
そして赤枠②の部分で固定ページで作成した「送信完了画面」を選択します。
最後に赤枠③の保存ボタンを押せば、「Redirection for Contact Form 7」によるリダイレクト設定が完了です。

まとめ

今回の記事では「Contact Form 7」を使用して送信完了画面を作成する方法をご紹介しました。
デフォルトの機能のままでもメール送信は可能ですが、ユーザビリティの観点からも今回ご紹介したような方法で別途完了画面を作成し遷移させることを検討してみてはいかがでしょうか。