Как грамотно связать CF7 со всплывающим окном fancybox без перезагрузки страницы при отправке?

Question

[Вадим Тимошенко]

Использую библиотеку 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');
			},
		},
	});

Но толку нет. Возможно не туда капаю?

Answer 1

[aex-svs]

Каким образом интегрировали форму cf7 в popup fancy ?
Так-то форма и отправляется без перезагрузки, иногда необходимо наоборот закрывать окно при удачной отправке)

Comments

[Вадим Тимошенко]

Внедрил форму вот так:

<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..