In contact form7 : Notify user if they submit form without entering email show confirm box if user click on cancel button then stop submitting form

in the contact form 7, the Email field should be optional, and it should say "Email (optional)" to make it obvious. If someone attempts to submit a message without entering their email, they should be shown a pop-up that says "You haven't entered an email, so we can't get back to you. Do you still want to submit your message?" and the options should be "Submit" and "Cancel" - if the user clicks "Submit" they should be shown a confirmation message like usual.

I tried this but is not working it show's a confirm box but when i click on cancle button, form was submitted and not blocking form submission in case of clicking cancle button form submission

function custom_wpcf7_validation_script() {
    ?>
    <script>
    document.querySelector('form.wpcf7-form').addEventListener('submit', function(event) {
        var form = event.target;
        var emailField = form.querySelector('[name="your-email"]');
        var emailValue = emailField ? emailField.value : '';

        if (!emailValue) {
          event.preventDefault();

          if (confirm("You haven't entered an email, so we can't get back to you. Do you still want to submit your message?")) {
            // form.submit();
            form.querySelector('input[type="submit"]').click();
          } else {
            return false;
          }
        }
    });
   

    </script>
    <?php
}
add_action('wp_footer', 'custom_wpcf7_validation_script',1);

After tried given solution is working but not properly sometiem's is refreshing the page and sometime's thank you message not sticking on the screen, after submission the "thank you" message display and sudden is hide, message not stick on page so that user can see form was submitted or not?

I tried given code like this :

function custom_wpcf7_validation_script() {
    ?>  
    <script>
    jQuery(document).ready(function($) {
        $('#fake-submit-form').on('click', function(e) {
            e.preventDefault(); // Prevent default form submit

            var emailField = $('input[type="email"]').val();
            
            // Check if the email field is empty
            if (!emailField) {
                if (confirm("You haven't entered an email, so we can't get back to you. Do you still want to submit your message?")) {
                    // If the user confirms, trigger the form submission
                    // This will trigger Contact Form 7's submit process                  
               jQuery( '.wpcf7-submit' ).trigger( 'click' );
                } else {
                    // If the user cancels, do nothing
                    return false;
                }
            } //else {
                // If the email field is filled, trigger the form submission
                    
               jQuery( '.wpcf7-submit' ).trigger( 'click' );

            //}
        });
    });
</script>
    <?php
}
add_action('wp_footer', 'custom_wpcf7_validation_script',1);

So there are no native cf7 javascript event listeners "before submit" only after submit, so I would create a "fake submit" button, and make the cf7 submit invisible (display: none).

Your form tags should include something along these lines (your css classes can vary according to your needs)

<a href="#" id="fake-submit-form" class="btn btn-primary">Submit</a>

[submit class:d-none class:btn-submit "Enquire"]

Then add this script to your theme js file or use wp_add_inline_script rather than wp_footer

jQuery( '#fake-submit-form' ).on(
    'click',
    function ( e ) {
        e.preventDefault();
        let emailField = jQuery( 'input[name="your-email"]' ).val();
        if ( ! emailField ) {
            if (confirm( "You haven't entered an email, so we can't get back to you. Do you still want to submit your message?" )) {
                // form.submit();
                jQuery( '.wpcf7-submit' ).trigger( 'click' );
            } else {
                return false;
            }
        }
        jQuery( '.wpcf7-submit' ).trigger( 'click' );
    }
);

To fix your updated code... Note the return true; added after the first trigger click. This exits the function and the form submits cleanly.

function custom_wpcf7_validation_script() {
    ?>
    <script>
        jQuery(
            function ($) {
                $( '#fake-submit-form' ).on(
                    'click',
                    function (e) {
                        e.preventDefault(); // This just prevents adding the # to the URL.

                        let emailField = $( 'input[type="email"]' ).val();

                        // Check if the email field is empty.
                        if ( ! emailField ) {
                            if (confirm( "You haven't entered an email, so we can't get back to you. Do you still want to submit your message?" ) ) {
                                // If the user confirms, trigger the form submission.
                                $( '.wpcf7-submit' ).trigger( 'click' );
                                return true; // Exit the function here.
                            } else {
                                // If the user cancels, do nothing
                                return false;
                            }
                        }
                        $( '.wpcf7-submit' ).trigger( 'click' );
                    }
                );
            }
        );
    </script>
    <?php
}
add_action('wp_footer', 'custom_wpcf7_validation_script',1);