return validation messages in a popup / hide form

  • Resolved makai93

    (@makai93)


    1 year, 1 month ago

    Hi,
    I would like, after submitting the form :

    – if everything has gone well, to stop displaying the form (hide it) and only see the OK message while remaining on the same page.
    – In the event of an error, I’d like to display the message returned by CF7 in a popup.

    I imagine this can be done with jQuery…
    Could someone please give me some hints on how to do this?

    Thank’s a lot and have a wonderful day!

Viewing 2 replies - 1 through 2 (of 2 total)

  • You can use the wpcf7submit DOM Event.

    document.addEventListener( 'wpcf7submit', function( event ) {
	var status = event.detail.apiResponse.status;
	var message = event.detail.apiResponse.message;

	if( status == 'validation_failed' || status == 'acceptance_missing' || status == 'spam' || status == 'aborted' || status == 'mail_failed' ) {
		//Trigger popup with above message variable
	}
});

    Use wpcf7mailsent to hide the form when mail has been sent.

    document.addEventListener( 'wpcf7mailsent', function( event ) {
	//Hide Form
});
    Thread Starter makai93

    (@makai93)

    You are WONDERFUL !!!

    Thank’s

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘return validation messages in a popup / hide form’ is closed to new replies.