WordPress 网站尝试使用 CF7 插件防止多次表单提交

Question

On a site guatemaladental.com I am trying to prevent multiple submissions in a Contact Form 7 contact form. After the site loads, there is a popup after 8 seconds. After clicking 'learn more', another popup loads with the simple contact form. After clicking 'Send request' there is no apparent action, so some site visitors are clicking the button again. I am trying to disable the button and change the text while the form is submitting to prevent this. I found this php code snippet that I have installed, but it is not working. I think that I am likely not targeting the element correctly. Any help is appreciated, thanks!

    // Prevent Multi Submit on all WPCF7 forms
    add_action( 'wp_footer', 'prevent_cf7_multiple_emails' );

    function prevent_cf7_multiple_emails() {
    ?>

    <script type="text/javascript">
    var disableSubmit = false;
    jQuery('input.wpcf7-submit').click(function() {
        jQuery(':input[type="submit"]').attr('value',"Sending...");
        if (disableSubmit == true) {
            return false;
        }
        disableSubmit = true;
        return true;
    })
      
    var wpcf7Elm = document.querySelector( '.wpcf7' );
    wpcf7Elm.addEventListener( 'wpcf7_before_send_mail', function( event ) {
        jQuery(':input[type="submit"]').attr('value',"Sent");
        disableSubmit = false;
    }, false );

    wpcf7Elm.addEventListener( 'wpcf7invalid', function( event ) {
        jQuery(':input[type="submit"]').attr('value',"Submit")
        disableSubmit = false;
    }, false );
    </script>
    <?php
} ?>

I've tried using Chrome's dev options to find the ID and correctly target the button, but I have not been successful.

Answer 1

jQuery('input.wpcf7-submit.my-submit-class').click(function() {