Убираем обновление страницы после отправки формы CF7 + Elementor Popup

Неоднократно сталкивался с ситуацией, когда заказчику была нужна форма обратной связи во всплывающем окне. При реализации всплывающего окна через 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 вашей темы.

Прокомментировать

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Перезвоню вам и мы вместе обсудим ваш многостраничный сайт!

    Отправляя заявку, вы даете согласие на обработку персональных данных.

    Перезвоню вам и вместе обсудим детали вашего интернет-магазина!

      Отправляя заявку, вы даете согласие на обработку персональных данных.

      Перезвоню вам и обсудим ваш новый одностраничный сайт!

        Отправляя заявку, вы даете согласие на обработку персональных данных.

        Перезвоню вам в течении 10 минут

          Отправляя заявку, вы даете согласие на обработку персональных данных.