Question 170137 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Which event should I use after submitting Contact Form 7 in WordPress?

I have to show "thank you popup" after submitting of all contact forms.
One of the forms is a popup itself, so I have to remove its active class and to add active class to "thank you popup"

jQuery('div#wpcf7-f1648-o4 form, div#wpcf7-f101-o1 form, div#wpcf7-f38-o3 form').on('submit', function() {
jQuery('#popUp').removeClass('popUp__active');  
jQuery('#popUpThanks').addClass('popUp__active');
})

But "thank you popup" appears even if inputs are empty. It had to appear is the form is sent, submit even isn’t about sending? WHat’s about exactly sending then?

I prefer to use jQuery VERY VERY MUCH, but I tried vanilla js to use function from cf7 documentation

const popUpThanks = document.getElementById('popUpThanks')
const popUp = document.getElementById('popUp')
var wpcf7Elm = document.querySelector( '.wpcf7' )
 
wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {
        popUpThanks.classList.add('popUp__active');
        popUp.classList.remove('popUp__active');
}, false);

It works only for the first form. With second, third etc it doesn’t work – popup doesn’t appear.

If it is a way to fix it in jQuery – it would be perfect, if not, but it’s a way to make it work in vanilla js – I’ll be very thankful to.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Found it! I even didn't know that vanilla js and jQuery can work together Syntax I mean. I know they are the same

    document.addEventListener( 'wpcf7mailsent', function( event ) {
  event.preventDefault(); 
 jQuery('#popUp').removeClass('popUp__active'); 
 jQuery('#popUpThanks').addClass('popUp__active');
}, false );

  2. 0 
    jQuery(document).on('wpcf7mailsent', function(event) {
  jQuery('#popUp').removeClass('popUp__active');
  jQuery('#popUpThanks').addClass('popUp__active');
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search