Support » Plugin: Contact Form 7 » Bug: Clicking send multiple times will duplicate error messages

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hello

    We have also found same issue in Contact Form 7 latest version (4.8) and put patch for temporary solution as below.
    we have put below line in form Additional Settings screen and it is working now.

    on_submit: "jQuery('.wpcf7-validation-errors').text('');"

    Bump. This is a confirmed bug guys, come on.

    Vsourz, this is a good solution, but it doesn’t stop the visitor from sending the form multiple times…

    I came up with this solution:

    Custom JavaScript:
    /**
    * clicked “send” on Contact Form 7
    */
    $(‘body’).on(‘click’, ‘.container-enviar input’, function() {
    $(this).addClass(‘sending’);
    $(‘.send-container’).append(‘<div class=”sending-temp”>Sending…</div>’);
    })

    /**
    * reset send button
    */
    document.addEventListener( ‘wpcf7submit’, function( event ) {
    $(‘.send-container input’).removeClass(‘sending’);
    $(‘.send-container .sending-temp’).remove();
    }, false );

    Custom CSS:
    .sending {
    display:none !important;
    }
    .sending-temp {
    cursor: not-allowed;
    color: #fff;
    background: #333 ;
    padding: 5px 18px 2px 18px;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1em;
    font-size: 18px;
    border: none;
    display: inline-block;
    float: none;
    }

    Wrap your contact form 7 submit button in a div with class “send-container”
    <div class=”send-container”><input type=”submit” value=”Send”></div>

    jibranb

    (@jibran-bisharat)

    I am having this issue as well. I think the submit button itself should be disabled after click. And then re-enabled after it’s done working.

    This is my solution for now.

    Javascript / jQuery

    
    function disable_submit() {
    
    	if( $( '.ajax-loader.is-active' ).length > 0 ) {
    			
    		$( '.wpcf7-submit' ).attr( 'disabled', 'disabled' );
    
    	} else {
    
    		$( '.wpcf7-submit' ).attr( 'disabled', false );	
    			
    	}
    
    }
    
    window.setInterval( disable_submit, 500 );
    

    CSS

    
    .wpcf7-submit:disabled, .wpcf7-submit[disabled] {
    	border: 1px solid #999999;
    	background-color: #cccccc;
    	color: #666666;
    	pointer-events: none;
    	cursor: default;
    	font-style: italic;
    }
    

    I’m not crazy about using setInterval to run code over and over again, but meh. I’m hoping the plugin authors can implement a more appropriate button-disabling solution in the source code.

    • This reply was modified 1 day, 19 hours ago by  jibranb.
    • This reply was modified 1 day, 19 hours ago by  jibranb.
    Moderator Steve Stern

    (@sterndata)

    @jibran-bisharat, if you need support then per the forum welcome please create your own new forum post. Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.