CODEWITHSUNDEEP
jquerywordpresscontact-form-7
Daniel Rueda
Daniel Rueda

Reputation: 23

Contact form 7 send the form once, although the client of several clicks

I need to control send form, because the customer give many clicks and the form send many times I try to blocked the button send with the first click, I try this:

method 1

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

method 2

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

method 3

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

documentation: https://contactform7.com/dom-events/

The methods don't work.

Upvotes: 0

Views: 1626

Answers (4)

Trung Vu
Trung Vu

Reputation: 1

I use this for my website

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)

Upvotes: 0

Daniel Rueda
Daniel Rueda

Reputation: 23

this is the method that worked for me.

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

Upvotes: 1

Howard E
Howard E

Reputation: 5639

You can make it so that people can't submit the form while the "Ajax Spinner" is present, by disabling the click of the button.

// 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;
     }
});

Upvotes: 0

Tony Djukic
Tony Djukic

Reputation: 340

Try disabling the button itself on click:

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

This assumes that your submit button is .wpcf7-submit. I'd personally check the ID of the submit button and use that rather than the class.

Upvotes: 0

Related Questions