Как заставить работать contact form 7 в Elementor popup

Работа попап Elementor с CF7 Wordpress

Ох ёпта… Я это сделал! Пишу первую запись в блог на свой сайт 🤣

Обновление из 2025: новый скрипт для запуска CF7 с elementor popup.

Я давно работаю с WP. Делаю свои сайты на нем и сайты для бизнесов своих клиентов. И иной раз сталкиваюсь с проблемами.

Одна из них это после обновления Elementor Pro до 2.7 мой любимый плагин Contact Form 7 перестал адекватно работать во всплывающих окнах от елементора. А без этого никуда…

Порывшись на просторах нашел все таки решение этого:

jQuery( document ).on( 'elementor/popup/show', () => {
wpcf7.init(jQuery(".wpcf7-form")[0]);
});

Добавляем этот код в свой js файлик, и вуаля работает. Но не надолго 🤦‍♂️

Да да, скорее всего есть те кто не понимает куда его все таки добавить. Если надо то опишу как я это делаю, голосуем 👇

Рассказать подробнее о встраивании скриптов в WP?
Да
70%
Не
30%
Проголосовало: 20

Но, вышло вновь обновление Elementor, и код выше перестал работать ели на странице есть два разных всплывающих окна 🤷‍♂️ И так же после заполнения формы не было редиректа на страницу спасибо.

Рабочий вариант

Чтож копаемся дальше и находим такое:

function vipbyte_elementor_popup_cf7_fix() {
?>
<script type='text/javascript'>
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',  'vipbyte_elementor_popup_cf7_fix' );

function redirect_cf7() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
       location = '../spasibo';
}, false );
</script>
<?php
}
add_action( 'wp_footer', 'redirect_cf7' );

Этот код добавляем в function.php и вуаля все работает.

Рабочий вариант из 2025

jQuery( document ).on( 'elementor/popup/show', function() {
    jQuery( '.elementor-popup-modal form.wpcf7-form:not(.elementor)' ).each( function ( index, element ) {
        wpcf7.init( element );
        jQuery( this ).addClass( 'elementor' );
    });
});

Если кто пользуется масками для полей телефонов, типа jquery.maskedinput.min.js:

jQuery( document ).on( 'elementor/popup/show', function() {
    jQuery( '.elementor-popup-modal form.wpcf7-form:not(.elementor)' ).each( function ( index, element ) {
        wpcf7.init( element );
        jQuery( this ).addClass( 'elementor' );
    });
    
    // Инициализация масок
    jQuery( '.elementor-popup-modal input[type="tel"]' ).mask( '+7 (999) 999-99-99' );
    jQuery( '.elementor-popup-modal input[name*="phone"]' ).mask( '+7 (999) 999-99-99' );
    jQuery( '.elementor-popup-modal input[name*="tel"]' ).mask( '+7 (999) 999-99-99' );
});

PS Надеюсь я продолжу писать в блог 😊

Жмакай ❤ если зашло 👇 А на нет и суда нет 🤷‍♂️

Saitozavisim

В 2018 зашел в малостраничники.
Обучал на тему МЛС на 2 запусках более 150 человек.
На данный момент живу сайтами всякими разными, немного арбитражу и делаю сайты для бизнесов.

Оцените автора
Добавить комментарий

  1. Елена

    Много работала с попапами и много работала с элементором и только вчера узнала о том, что эти два товарища оказывается не совместимы в попапе..Все формы свёрстаны и переделывать всё из-за этого отстоя нет никакого желания. Не получается подружить их уже второй день.

    А ваш скрипт предотвращает перезагрузку страницы, если разместить кодом в самой попап форме элементора, только почему-то вместо 1 бегунка, показывает 3! и ошибки валидации умножает в два раза) на одно поле 2 ошибки показывает. Почему-то некорректно работает скрипт. Через function не работает, потому что в элементор попап нет подвала 🙁 зачем разрабатывать такую каку.. ох уж этот элементор

    Ответить
    1. Елена

      заговорилась, много работала c «CF7») короче проблему с выводом в футер решила тем, что вместо футера вывела в wp_header, ошибки валидации не дублируются, но вот ползунок (бегающее колёсико) всё-таки дублируется. Два колеса вместо 1. Из-за чего такое может быть?

      Ответить
      1. Saitozavisim автор

        Если я правильно понял вас, то это колесо, я просто скрываю через CSS.

        Ответить
  2. Sergey

    У меня все равно дублируются и колесика и сообщения об ошибке.
    Если на сайт 6 форм то выдает 6 раз.

    Ответить
  3. Дмитрий

    До сих пор работает код, другого варианта так и не нашел, спасибо!

    Ответить