contact form7で、プラグインを使わず、確認画面を出す方法

contact form7で、プラグインを使わず、確認画面を出す方法。
こちらのサイトを参考に、メールアドレスを2回入力。
https://nnc-studio.jp/plugin/2023/10/17/contactform7_confirm_thanks/

<style>
    /*確認画面と完了画面を非表示*/
    .confirm_area,
    .thanks_area {
        display: none;
    }

    /*デフォルトのサンクスメッセージを非表示*/
    .wpcf7-response-output{
        display: none;
    }
    
    /* エラーメッセージのスタイル */
    .error-message {
        color: #ff0000;
        font-size: 0.8em;
        margin-top: 5px;
        display: none;
    }
</style>

<!-- 入力画面 -->
<div class="input_area">

    <label> お問合せ種別
        [radio category id:category use_label_element default:1 "お仕事のご相談" "求人について" "その他"]</label>

    <label> 氏名（必須）
        [text* uname id:uname]</label>

    <label> メールアドレス（必須）
        [email* email id:email]</label>
    <p class="error-message" id="email-error"></p>

    <label> メールアドレス（確認用）（必須）
        [email* email_confirm id:email_confirm]</label>
    <p class="error-message" id="email-match-error">メールアドレスが一致していません</p>

    <label> お住まい（必須）
        [select* address id:address "北海道" "青森県" "秋田県" "岩手県" "宮城県" "新潟県"]</label>

    <label> 生年月日
        [date date min:1980-01-01 id:date]</label>
    <label> 性別
        [radio gender id:gender use_label_element default:1 "女性" "男性"]</label>

    <label> メッセージ本文
        [textarea content id:content]</label>

    <input type="button" class="confirm_button" value="確認する" disabled>
    //（※※submitにしないと、バリデーションしないことがあります。逆に画面遷移して戻るボタンを押した後にフォームが空になるのは、submitにしたせいであるかもしれません）

</div>

<!-- 確認画面 -->
<div class="confirm_area">

    <h2>入力内容確認</h2>
    <p>以下の内容でよろしいですか？</p>

    お問合せ種別：<span class="confirm_category"></span>

    氏名：<span class="confirm_uname"></span>

    メールアドレス：<span class="confirm_email"></span>

    お住まい：<span class="confirm_address"></span>

    生年月日：<span class="confirm_date"></span>

    性別：<span class="confirm_gender"></span>

    メッセージ本文：<span class="confirm_content"></span>

    [submit "送信"]
    <input type="button" class="back_button" value="戻る">

</div>

<!-- 完了画面 -->
<div class="thanks_area">

    <h2>送信完了</h2>
    <p>お問合せいただきありがとうございました。<br>
        2営業日以内に担当者よりご返信差し上げます。</p>

</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

<script>
    $(function () {
        // 入力内容取得用 変数
        var val;
        // id取得用 変数
        var id;
        // ラジオボタン値取得用 変数
        var radio;
        // チェックボックス値取得用 変数
        var check;
        // input要素のtype属性値取得用（ラジオボタンであるかどうか判別のため）
        var type;
        // メールアドレス一致確認用のフラグ
        var emailsMatch = false;
        
        // ラジオボタン初期値の取得　以下の記述で全てのラジオボタンの初期値を取得
        $("[type='radio']:checked").each(function (index) {
            // ラジオボタン値取得
            radio = $(this).val();
            // ラジオボタンの祖先要素からid名を取得
            id = $(this).parents("[id]").attr("id");
            // 取得したid名を確認用のclass名末尾に付与して、確認画面の値を指定
            $(".confirm_" + id).text(radio);
        });
        
        // メールアドレス一致確認
        function validateEmails() {
            var email = $("#email").val();
            var emailConfirm = $("#email_confirm").val();
            
            // 両方入力されている場合のみチェック
            if (email !== "" && emailConfirm !== "") {
                if (email !== emailConfirm) {
                    $("#email-match-error").show();
                    emailsMatch = false;
                } else {
                    $("#email-match-error").hide();
                    emailsMatch = true;
                }
            } else {
                // どちらかが空の場合は比較しない
                $("#email-match-error").hide();
                emailsMatch = false;
            }
            
            // 必須項目チェックと合わせて確認ボタンの有効/無効を切り替え
            checkRequiredFields();
        }
        
        // メールアドレス入力フィールドの監視
        $("#email, #email_confirm").on('keydown keyup keypress change', function() {
            validateEmails();
        });
        
        //入力欄の内容が変わった際の処理　入力した内容が確認画面へ登録される
        $(".input_area input,.input_area select,.input_area textarea").change(function () {
            //入力内容取得
            val = $(this).val();
            //type属性の取得
            type = $(this).attr("type");
            //type属性がラジオボタンだった場合の処理
            if (type == "radio") {
                // ラジオボタン値取得
                radio = $(this).val();
                // ラジオボタンの祖先要素からid名を取得
                id = $(this).parents("[id]").attr("id");
                // 取得したid名を確認用のclass名末尾に付与して、確認画面の値を指定
                $(".confirm_" + id).text(radio);
            }//type属性がチェックボックスだった場合の処理
            else if (type == "checkbox") {
                // チェックボックス値取得
                check = $(this).val();
                // ラジオボタンの祖先要素からid名を取得
                id = $(this).parents("[id]").attr("id");
                // 取得したid名を確認用のclass名末尾に付与して、確認画面の値を指定
                $(".confirm_" + id).append(check + " / ");
            }//type属性がラジオボタンではなかった場合の処理
            else {
                // 入力欄のid名を取得
                id = $(this).attr("id");
                // 取得したid名を確認用のclass名末尾に付与して、確認画面の値を指定
                $(".confirm_" + id).text(val);
            }
        })
        
        //確認ボタンを押した際の処理　入力画面を非表示・確認画面を表示
        $(".confirm_button").click(function () {
            $(".input_area").hide();
            $(".confirm_area").show();
            $(window).scrollTop($('#navi').position().top);
        })
        
        //戻るボタンを押した際の処理　入力画面を表示・確認画面を非表示
        $(".back_button").click(function () {
            $(".input_area").show();
            $(".confirm_area").hide();
            $(window).scrollTop($('#navi').position().top);
        })
        
        //送信ボタンを押した際の処理　サンクス（完了）画面を表示・確認画面を非表示
        $("[type='submit']").click(function () {
            $(".thanks_area").fadeIn(2000);
            $(".confirm_area").hide();
            $(window).scrollTop($('#navi').position().top);
        })

        //必須項目チェック用　定数の作成
        const target = '[aria-required="true"]';
        
        // 必須項目チェックとメールアドレス一致確認をまとめて行う関数
        function checkRequiredFields() {
            //判定用フラグ
            let flag = true;

            //必須項目をループで１つずつ確認
            $(target).each(function (e) {
                if ($(target).eq(e).val() === "") {
                    flag = false;
                }
            });
            
            //フラグがtrueでメールアドレスも一致していれば確認ボタンを有効。それ以外は無効にする
            if (flag && emailsMatch) {
                //必須項目すべて入力済みかつメールアドレスが一致していれば有効にする
                $('.confirm_button').removeAttr("disabled");
            }
            else {
                //未入力など漏れがある場合または、メールアドレスが一致していない場合は無効にする
                $('.confirm_button').attr("disabled","");
            }
        }

        //必須項目の内容が変わった際の処理
        $(target).on('keydown keyup keypress change', function () {
            checkRequiredFields();
        });
    })
</script>