コンタクトフォーム7は、WordPressで非常に人気のあるフォームプラグインです。しかし、デフォルトの状態では、フォームを送信した際に完了画面は表示されないため、いまいち送信が完了した感が足りない印象です。そこで、今回は完了画面を表示するためにJavaScriptを使用する方法について説明します。
また、完了画面だけでなく、確認画面も追加したい場合は、以下の記事で説明していますので、そちらもご参照ください。
完了画面の作成
まずは、完了画面として表示するページを固定ページで作成します。
必要に応じてページのタイトルや表示するメッセージなどを記載しましょう。
例：
タイトル「お問い合わせありがとうございます」
本文「お問い合わせいただきありがとうございます。近日中に返信いたしますので、しばらくお待ちください。」
functions.phpに追加する方法
1.WordPressの管理画面で、外観＞テーマの編集を開きます。
2.functions.php ファイルを開き、以下のコードを追加します。
add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://your-domain.com/thank-you/';
}, false );
</script>
<?php
}ここで、https://your-domain.com/thank-you/ を独自の完了画面（サンキューページ）のURLに置き換えます。
3.変更を保存します。
これで、コンタクトフォーム7のフォーム送信が成功すると、指定した完了画面にリダイレクトされます。とっても簡単です。
フォームを掲載しているページにJavaScriptコードを追加する方法
フォームを掲載しているページに、以下のJavaScriptコードを追加する方法について説明します。
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://your-domain.com/thank-you/';
}, false );
</script>1. まず、WordPressの管理画面にログインし、ページ一覧からフォームを掲載しているページを開きます。
2. ページエディターが表示されたら、右上の「設定」（歯車アイコン）をクリックし、「HTMLモード」を選択してページコンテンツをHTMLで編集できるようにします。
3. ページの末尾または適切な場所に、上記のJavaScriptコードを貼り付けます。ここで、`https://your-domain.com/thank-you/` を独自の完了画面（サンキューページ）のURLに置き換えます。
4. コードを貼り付けたら、「更新」ボタンをクリックして変更を保存します。
これで、コンタクトフォーム7のフォーム送信が成功すると、指定した完了画面にリダイレクトされます。
ただし、この方法ではコードがページのコンテンツに直接埋め込まれるため、他のページで同じコードを使用する場合は、それぞれのページにコードを追加する必要があります。
慣れている方には、独自のJavaScriptファイルを作成し、ヘッダーやフッターから読み込ませる方法もおすすめです。
まとめ
本記事では、WordPressの人気プラグイン「コンタクトフォーム7」を使って、フォーム送信完了後に完了画面（サンキューページ）にリダイレクトする方法を解説しました。具体的には、JavaScriptを使ってリダイレクト設定を行う方法と、個別の完了画面を作成する手順を紹介しました。
これらの方法を適用することで、ユーザーに送信完了の確認を提供し、よりプロフェッショナルな印象を与えることができます。また、独自のJavaScriptファイルを作成し、ヘッダーやフッターから読み込むことで、コードの管理が容易になります。
今回紹介した方法を試して、コンタクトフォーム7をさらに使いやすく、効果的なツールにしましょう。
