JavaScriptを使用してContact Form 7に完了画面を追加する方法

コンタクトフォーム7は、WordPressで非常に人気のあるフォームプラグインです。しかし、デフォルトの状態では、フォームを送信した際に完了画面は表示されないため、いまいち送信が完了した感が足りない印象です。そこで、今回は完了画面を表示するためにJavaScriptを使用する方法について説明します。

また、完了画面だけでなく、確認画面も追加したい場合は、以下の記事で説明していますので、そちらもご参照ください。

Contact Form 7に確認画面と完了画面を追加する方法 - Contact Form 7 Multi-Step Formsプラグインの使い方

Contact Form 7は、WordPressで使用される一般的なフォームプラグインですが、デフォルトでは確認画面と完了画面の機能は提供されていません。しかし、他のプラグインと組み合わせてこれらの機能を追加することができます。今回は、...

完了画面の作成
functions.phpに追加する方法
フォームを掲載しているページに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ファイルを作成し、ヘッダーやフッターから読み込ませる方法もおすすめです。