Неоднократно сталкивался с ситуацией, когда заказчику была нужна форма обратной связи во всплывающем окне. При реализации всплывающего окна через Elementor, возникала проблема. При нажатии кнопки “Отправить” заявку, страница перезагружалась, модальное окно естественно закрывалось и пользователю было не понятно, ушло ли его сообщение адресату или нет.
Для решения этой проблемы идеально подходит данный код (вставлять в functions.php вашей дочерней темы):
// Stop Elementor Popup from Closing after CF7 submission with no validation
function elementor_popup_cf7_fix() {
?>
<script type='text/javascript'>
window.addEventListener('DOMContentLoaded', function() {
jQuery(document).on('elementor/popup/show', () => {
for(var i = 0; i < jQuery(".wpcf7-form").length ; i++) {
wpcf7.init(jQuery(".wpcf7-form")[i]);
}
});
});
</script>
<?php
}
add_action( 'wp_footer', 'elementor_popup_cf7_fix' );
// ----------
После добавления этого кода, страница не перезагружается, пользователь видит сообщение об успешной или не успешной отправке сообщения.
Также рекомендую использовать плагин Popups – Submission Messages For Contact Form 7. Он добавляет анимированное сообщение об успешной (или нет) отправке сообщения, вместо стандартного уведомление CF7. Выглядит довольно интересно, правда разработчики плагина не побеспокоились о кастомизации. Редактировать внешний вид окошка придется через стили CSS вашей темы.