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

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

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

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

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

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

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

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

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

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

Но, вышло вновь обновление 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 и вуаля все работает.

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

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

Saitozavisim

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

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

  1. Елена

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

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

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

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

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

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

        Ответить
  2. Sergey

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

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

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

    Ответить