CF7 скрывает `.wpcf7-mail-sent-ok` через 5 секунд

Question

Я пытаюсь скрыть элемент wpcf7-mail-sent-ok Контактной формы 7 после отправки формы. Тем не менее, я получаю некоторые неожиданные результаты, и я не уверен, почему.

Это код в соответствии с моим файлом footer.php в WP.

// Contact Form 7 mail sent...
document.addEventListener('wpcf7mailsent', function(event) {

  $('.wpcf7-mail-sent-ok').delay(5000).fadeOut('slow').hide(0);

}, false);

Это пример того, что должно происходить.

$('.wpcf7-mail-sent-ok').delay(3000).fadeOut('slow').hide(0);

.wpcf7-response-output {
  padding: 1rem;
  background: #f00;
  color: #fff;
  border-radius: 0.8333rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: block;" role="alert">Thank you for your message. It has been sent.</div>

Проблема - Это на самом деле выполняет обратное, как ни странно. Я имею в виду, что он ждет 5 секунд, затем исчезает, а затем коробка просто сидит там бесконечно.

Примечание: я не получаю ошибок в консоли.

Любая помощь будет принята с благодарностью.

Answer 1

Вам нужно использовать JS, вы можете сделать то же самое с помощью CSS

.wpcf7 .wpcf7-form .wpcf7-mail-sent-ok { 
    display: none !important; 
}

Answer 2

Таким образом, после некоторого копания выясняется, что Jquery запускался перед тем, как позволить элементу выполнить рендеринг, это привело к неожиданным результатам.

Мне удалось решить проблему с помощью следующего:

// Contact Form 7 mail sent...
document.addEventListener('wpcf7mailsent', function(event) {

  setTimeout(function() {
    $('.wpcf7-mail-sent-ok').delay(3000).fadeOut('slow').hide(0);
  }, 5000);

}, false);

Спасибо за помощь, ребята.