联系表格7发送表格一次，尽管客户点击了几次

Question

我需要控制发送表单，因为客户点击了很多次，表单发送了很多次，我尝试阻止第一次点击发送按钮，我尝试这样做：

方法1

jQuery( ".wpcf7-form " ).submit(function(){
          jQuery('input#form1').attr('disabled','disabled');            
    });

方法2

    document.addEventListener( 'wpcf7submit', function( event ) {  
        jQuery('input#form1').attr('disabled','disabled');
    
}, true );

方法3

    jQuery( ".wpcf7-submit " ).submit(function(){   
                    
        jQuery('input#form1').attr('disabled','disabled');
        
    });

文档：https://contactform7.com/dom-events/

这些方法不起作用。

Answer 1

这是对我有用的方法。

jQuery(document).on('submit','form',function(){   
    jQuery('input#form1').attr('disabled','disabled');  
});

Answer 2

尝试在单击时禁用按钮本身：

jQuery( '.wpcf7-submit' ).on( 'click', function() {     
     jQuery( '.wpcf7-submit' ).attr( 'disabled', 'disabled' ); 
} );

这假设您的提交按钮是

.wpcf7-submit

。 我会亲自检查提交按钮的 ID 并使用它而不是类。

Answer 3

您可以通过禁用按钮的单击来使人们在“Ajax Spinner”存在时无法提交表单。

// Prevent Multiple Clicks on Contact Form 7 Submissions
jQuery(document).on('click', '.wpcf7-submit', function(e){
     if( jQuery('.ajax-loader').hasClass('is-active') ) {
          e.preventDefault();
          return false;
     }
});

Answer 4

我将其用于我的网站

jQuery(document).on('submit', 'form.wpcf7-form', function() {   
    jQuery(this).find('#submitButton').prop('disabled', true);  
    console.log("Form submitted, and button disabled to prevent multiple submissions.");
});

// Re-enable the button after successful form submission
document.addEventListener('wpcf7mailsent', function(event) {
    jQuery('#submitButton').prop('disabled', false);  
    console.log("Form submitted successfully, button re-enabled.");
}, false);

// Re-enable the button if there are validation errors (form not submitted)
document.addEventListener('wpcf7invalid', function(event) {
    jQuery('#submitButton').prop('disabled', false);  
    console.log("Form submission failed due to validation errors, button re-enabled.");
}, false)