Show and Hide DIV's after 5000 seconds when .wpcf7-mail-sent-ok

Question

I made a Contact Form 7 with a custom "Thank You!" message that appears after wpcf7mailsent.

I need it to reverse after seconds. My current code does not work:

addEventListener('wpcf7mailsent', function(event) {
    event.preventDefault();
    document.querySelector('.qtWRP').style.display = 'none';
    document.querySelector('.inputBTMx').style.display = 'none';
    document.querySelector('.cap').style.display = 'none';
    document.querySelector('.qtWRP2').style.display = 'block';
});

wpcf7Elm.addEventListener( 'wpcf7-mail-sent-ok', function( event ) {
jQuery ( 'form.wpcf7form' )[1000].reset();
}, false );;

Appreciate any help.

Answer 1

Use setTimeout() at the end of the event listener to reverse all the .style.display changes.

addEventListener('wpcf7mailsent', function(event) {
  event.preventDefault();
  document.querySelector('.qtWRP').style.display = 'none';
  document.querySelector('.inputBTMx').style.display = 'none';
  document.querySelector('.cap').style.display = 'none';
  document.querySelector('.qtWRP2').style.display = 'block';
  setTimeout(function() {
    document.querySelector('.qtWRP').style.display = 'block';
    document.querySelector('.inputBTMx').style.display = 'block';
    document.querySelector('.cap').style.display = 'block';
    document.querySelector('.qtWRP2').style.display = 'none';
  }, 5000000);
});