Как грамотно связать CF7 со всплывающим окном fancybox без перезагрузки страницы при отправке?
Использую библиотеку fancybox и плагин для Wordpress CF7.
Форма из плагина открывается во всплывающем окне fancybox. Но при отправке страница перезагружается, вместо AJAX отправки.
Если я правильно понял, такая проблема возникает из за того, что fancybox при вызове окна перемещает по DOM html код формы. И, вероятно, надо переинизиализовать форму cf7 с помощью wpcf7.init().
Пишу так:
Fancybox.bind("[data-fancybox]", { on: { done: (fancybox) => { wpcf7.init('.fancybox__container.is-animated form'); }, }, }); |
Fancybox.bind("[data-fancybox]", { on: { done: (fancybox) => { wpcf7.init('.fancybox__container.is-animated form'); }, }, });
Но толку нет. Возможно не туда капаю?
Дополнительно:
Каким образом интегрировали форму cf7 в popup fancy ?
Так-то форма и отправляется без перезагрузки, иногда необходимо наоборот закрывать окно при удачной отправке)
- Внедрил форму вот так:
<a href="#order" data-fancybox>Оставить заявку</a> <div id="order"> <div class="popup"> <?=do_shortcode('[contact-form-7 id="397491c"]')?> </div> </div>
<a href="#order" data-fancybox>Оставить заявку</a> <div id="order"> <div class="popup"> <?=do_shortcode('[contact-form-7 id="397491c"]')?> </div> </div>
В шаблоне формы использую для отправки input:
[submit "Отправить заявку"]Может быть надо использовать button? Или вообще отправлять своим AJAX-кодом по событию?
Хотя без всплывающего окна форма по дефолту отправляется ajax-ом без перезагрузки страницы.. - Спасибо, Вы меня направили в верное русло. Вместо того чтобы копать в сторону fancybox, я понял что дело не в нем. И начал отключать плагины и скрипты.
В итоге оказалось что отправка фоном не работала из-за переменной в javascript коде по имени Map. Я заменил на GeoMap и все заработало.
Хотя консоль не выводила никаких ошибок с этой переменной.
Надо научиться полноценно отслеживать проблемы в dev tools chrome..
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
У Contact Form 7 AJAX обычно ломается во всплывающих окнах по двум причинам: форма вставлена в DOM после инициализации CF7, либо fancybox клонирует/перемещает HTML так, что обработчики событий теряются. Простого
wpcf7.init('.selector')может быть недостаточно, особенно если передаётся строка, а функция ожидает DOM-элемент формы.Для CF7 5.x обычно нужно инициализировать конкретный элемент формы после открытия popup:
Fancybox.bind('[data-fancybox]', { on: { done: function () { document.querySelectorAll('.fancybox__container form.wpcf7-form').forEach(function (form) { if (window.wpcf7 && typeof window.wpcf7.init === 'function') { window.wpcf7.init(form); } }); } } });Fancybox.bind('[data-fancybox]', { on: { done: function () { document.querySelectorAll('.fancybox__container form.wpcf7-form').forEach(function (form) { if (window.wpcf7 && typeof window.wpcf7.init === 'function') { window.wpcf7.init(form); } }); } } });
Но лучше не клонировать форму. Если одна и та же форма используется на странице и в popup, сделайте отдельный скрытый блок с формой для fancybox или открывайте inline-контейнер без дублирования. У CF7 каждая форма содержит служебные hidden-поля, nonce и id, поэтому копии могут конфликтовать.
Проверьте также, что на странице подключены скрипты CF7:
contact-form-7/includes/js/index.js, и что в консоли нет ошибок JS до отправки. Если оптимизаторы типа WP Rocket откладывают CF7 или fancybox, добавьте их в исключения.Итог: инициализируйте не строку-селектор, а сам DOM-элемент формы после открытия окна. Если всё равно перезагружается страница, значит CF7 JS не подключился, форма была клонирована некорректно или другой скрипт перехватывает submit.