Автоматическое закрытие формы Contact Form 7 после успешной отправки?

Question

[SiO4]

Добрый день, коллеги. Не получается реализовать следующую задачу: мне нужно чтобы окно fancybox закрывалось автоматически после успешной отправки формы contact form 7 и чтобы появлялся новый попап с "Ваша заявка успешно отправлена". Подскажите как это можно реализовать? Прошурстил первые страницы выдачи гугла и ничего не нашел — либо старый код, который уже не работает, либо более свежий, но все равно не работает.

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 if ( '48' == event.detail.contactFormId ) { 
$('#fancybox-close').trigger('click'); return true;
}
});
</script>

Сейчас пытаюсь закрыть форму с помощью этого кода (вставлен в хэддер). Подслушиваю действие отправка почты и привязываю его к клику на закрыть форму. Но ничего не происходит. Подскажите как решить эту задачу?

Answer 1

[FKV]

У вас в коде есть сторока с jquery. Код как вы сказали в хедере. Смею предположить что jquery у вас подключен в футере. Надо чтобы ваш код выполнялся после подключения jquery.
Либо просто переписать строчку $('#fancybox-close').trigger('click');
на document.getElementById("fancybox-close").click();

Comments

[SiO4]

Спасибо большое заработало!

[SiO4]

Подскажите, а как лучше реализовать попап с сообщением об успешной отправке?

[FKV]

Если помогло, то отметьте пожалуйста решением.
На вопрос как лучше создать попап, сложно дать ответ учитывая, что я не знаю ваших скилов.
Но суть такая, вы его заранее создаете. верска + css и скрываете. и потом показывете после того как закрыли модалку с формой.
После этой строчки document.getElementById("fancybox-close").click()
выполяняете код для показа попапа.

[SiO4]

По верстке и цсс понял.
А JS код в такоем случае должен выглядить как-то так?

document.addEventListener( 'wpcf7mailsent', function( event ) {
 if ( '48' == event.detail.contactFormId ) { 
document.getElementById("fancybox-close").click(); return true;
$('popup-thx').modal();
}, false );
}
});

[FKV]

Как-то так

document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '48' == event.detail.contactFormId ) { 
        document.getElementById("fancybox-close").click();
        document.querySelector('.popup-thx').style.display = 'block';
   }
});