Contact Form 7で確認画面と完了画面を作る方法

WordPressのプラグイン「Contact Form 7」にはデフォルトで確認画面や完了画面の機能がありませんが、追加のプラグインやスクリプトを使用することで実装できます。本記事では、確認画面と完了画面を作る方法を詳しく解説します。

1. 確認画面を実装する方法

確認画面を実装するためには、「Contact Form 7 add confirm」プラグインを使用する方法と、JavaScriptを使う方法があります。ここでは、JavaScriptを使用する方法を解説します。

1.1 Contact Form 7 のフォームを作成

まず、通常のフォームを作成します。「お問い合わせ」→「新規追加」から以下のフォームを作成してください。

[text* your-name placeholder "お名前"]
[email* your-email placeholder "メールアドレス"]
[text your-subject placeholder "件名"]
[textarea your-message placeholder "お問い合わせ内容"]
[submit id:confirm-btn "確認"]

1.2 確認画面用のJavaScriptを追加

次に、以下のJavaScriptコードを「外観」→「カスタマイズ」→「追加CSS/JS」または「functions.php」に追加します。

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('confirm-btn').addEventListener('click', function(event) {
        event.preventDefault();
        let form = event.target.closest('form');
        let confirmMessage = "\nお名前: " + form.your-name.value + "\nメールアドレス: " + form.your-email.value + "\n件名: " + form.your-subject.value + "\nお問い合わせ内容: " + form.your-message.value;
        
        if (confirm("以下の内容で送信しますか？" + confirmMessage)) {
            form.submit();
        }
    });
});
</script>

2. 完了画面を実装する方法

完了画面を表示するためには、「送信後のリダイレクト」を設定します。

2.1 完了ページを作成

「固定ページ」→「新規追加」から「送信完了ページ」を作成し、URLをメモしておきます。（例: https://yourdomain.com/thank-you/）

2.2 functions.php にリダイレクトコードを追加

以下のコードを「外観」→「テーマエディター」→「functions.php」に追加してください。

add_action( 'wp_footer', 'cf7_redirect_after_submit' );
function cf7_redirect_after_submit() {
    echo "";
}

まとめ

Contact Form 7で確認画面と完了画面を作る方法を紹介しました。

• JavaScriptで確認画面を作成
• 送信後にリダイレクトで完了画面を表示

この方法を活用すれば、ユーザーにとってより使いやすいお問い合わせフォームを作成できます。ぜひお試しください！

Contact Form 7で引数（パラメーター）を渡す方法

Contact Form 7が英語になった時の対処法

Contact Form 7 のメールが届かないときの対処法

Contact Form 7 の設置方法