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

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

Обновление из 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 файлик, и вуаля работает. Но не надолго 🤦‍♂️

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

Но, вышло вновь обновление 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 Надеюсь я продолжу писать в блог 😊

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