Wordpess + Contact form 7 + popup — почему перезагружается страница?
Всем здоровья!
Проблема такая: у меня на сайте на CMS Wordpess на самописной теме в шапке есть кнопка "Обратный звонок", при клики по которой появляется Pop-Up окно, в которое подгружается форма от плагина contact form 7.
Если в этой форме нажать кнопку "отправить" , не зависимо от того заполнены поля формы или нет (хотя в настройках формы указаны обязательные поля для заполнения) перебрасывает на страницу у которой ссылка выглядит так: https://сайт.ru/wp-content/themes/название-темы/aj.... И на этой странице расположена эта же форма, но уже без стилей css.
Как сделать, при отправке формы в Pop-Up окне никуда не переадресовывало и что бы все сообщения об ошибках и об удачной отправке появлялись в этом модальном окне без перегрузки страницы.
Поиском в интернете пользовался. Что нашел, то проверил. Т.е. в файлах header.php и footer.php вызовы wp_header(); и wp_footer(); присутствуют.
Вот часть кода из файла scripts.js, которая отвечает за вывод Pop-Up окна
(function ($) { $(function () { $('button.js-show-modal').click(function () { $('body').append('<div class="modal"><div class="loader"></div></div>'); if ($(document).height() > $(window).height()) { $('body').css({ overflow: 'hidden', 'margin-right': getScrollBarWidth }); } var theme = $(this).data('theme'); var file = 'ajax-callback.php'; var modal = $('div.modal'); modal.css({ visibility: 'visible' }).animate({ opacity: 1 }, 400, function () { $('<div>').load('/wp-content/themes/' + theme + '/' + file, function (html){ modal .empty() .append( '<div class="modal__container">' + '<button class="modal__close" type="button" aria-label="Закрыть"></button>' + '<div class="modal__inner">' + html + '</div>' + '</div>' ); var $form = modal.find('form'); wpcf7.initForm($form); if (wpcf7.cached) wpcf7.refill($form); }); }); }); |
(function ($) { $(function () { $('button.js-show-modal').click(function () { $('body').append('<div class="modal"><div class="loader"></div></div>'); if ($(document).height() > $(window).height()) { $('body').css({ overflow: 'hidden', 'margin-right': getScrollBarWidth }); } var theme = $(this).data('theme'); var file = 'ajax-callback.php'; var modal = $('div.modal'); modal.css({ visibility: 'visible' }).animate({ opacity: 1 }, 400, function () { $('<div>').load('/wp-content/themes/' + theme + '/' + file, function (html){ modal .empty() .append( '<div class="modal__container">' + '<button class="modal__close" type="button" aria-label="Закрыть"></button>' + '<div class="modal__inner">' + html + '</div>' + '</div>' ); var $form = modal.find('form'); wpcf7.initForm($form); if (wpcf7.cached) wpcf7.refill($form); }); }); });
Вот код из файла ajax-callback.php:
header( 'Content-Type: text/html; charset=utf-8' ); require_once( '../../../wp-load.php' ); require_once 'includes/crb_theme-vars.php'; include 'callback.php'; |
header( 'Content-Type: text/html; charset=utf-8' ); require_once( '../../../wp-load.php' ); require_once 'includes/crb_theme-vars.php'; include 'callback.php';
Вот код из файла callback.php:
<div class="callback<?php if ( $sidebar ) echo ' callback--sidebar sidebar__section'; ?>"> <p class="callback__heading">Для бесплатной консультации отправьте заявку</p> <?php echo do_shortcode( '[contact-form-7 id="11b0aee" title="Заказать обратный звонок"]' ); ?> <?php if ( $terms && $privacy ) { ?> <p class="callback__terms">Нажимая кнопку вы соглашаетесь с <a class="callback__terms-link" href="<?php echo get_page_link( $privacy ); ?>">политикой конфиденциальности</a> и правилами сайта изложенными в <a class="callback__terms-link" href="<?php echo get_page_link( $terms ); ?>">пользовательском соглашении</a></p> <?php } ?> <?php $callback = true; include 'parts/phones.php'; $callback = false; ?> </div><!-- .callback --> |
<div class="callback<?php if ( $sidebar ) echo ' callback--sidebar sidebar__section'; ?>"> <p class="callback__heading">Для бесплатной консультации отправьте заявку</p> <?php echo do_shortcode( '[contact-form-7 id="11b0aee" title="Заказать обратный звонок"]' ); ?> <?php if ( $terms && $privacy ) { ?> <p class="callback__terms">Нажимая кнопку вы соглашаетесь с <a class="callback__terms-link" href="<?php echo get_page_link( $privacy ); ?>">политикой конфиденциальности</a> и правилами сайта изложенными в <a class="callback__terms-link" href="<?php echo get_page_link( $terms ); ?>">пользовательском соглашении</a></p> <?php } ?> <?php $callback = true; include 'parts/phones.php'; $callback = false; ?> </div><!-- .callback -->
Помогите пожалуйста с решением!
Дополнительно:
Решение нашлось! Если кому-то понадобится.
В файле scripts.js заменить:
wpcf7.initForm($form)
на
let modalForm = document.querySelector('.modal form'); wpcf7.init(modalForm); if (wpcf7.cached) wpcf7.refill(modalForm); |
let modalForm = document.querySelector('.modal form'); wpcf7.init(modalForm); if (wpcf7.cached) wpcf7.refill(modalForm);
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Судя по описанию, форма в popup подгружается не через штатный shortcode в контенте, а отдельным PHP-файлом темы. Поэтому при отправке браузер уходит на адрес этого файла:
/wp-content/themes/.../ajax.... Contact Form 7 в нормальном режиме не должен так работать: он отправляет форму AJAX-запросом на REST API WordPress и показывает сообщения прямо на странице.Проверьте три вещи:
do_shortcode('внутри WordPress, а не как отдельная HTML-копия.Ошибка: Контактная форма не найдена.
')
Правильнее всего не открывать отдельный PHP-файл напрямую. Создайте скрытый popup в футере или подгружайте его через
admin-ajax.php. Пример вывода в шаблоне:echo do_shortcode('[contact-form-7 id="123" title="Обратный звонок"]');
Если форма добавляется AJAX-ом, после вставки HTML вызовите инициализацию:
document.addEventListener('DOMContentLoaded', function () { const popup = document.querySelector('.callback-popup'); if (window.wpcf7 && popup) { popup.querySelectorAll('.wpcf7 form').forEach(function (form) { window.wpcf7.init(form); }); } });document.addEventListener('DOMContentLoaded', function () { const popup = document.querySelector('.callback-popup'); if (window.wpcf7 && popup) { popup.querySelectorAll('.wpcf7 form').forEach(function (form) { window.wpcf7.init(form); }); } });
Также проверьте, что в форме нет своего
action, который указывает на файл темы. Contact Form 7 сам генерирует action и скрытые поля. Если вы копировали HTML формы вручную, удалите такую копию и выводите только shortcode.Если после этого всё равно идёт редирект, смотрите консоль браузера и Network: запрос должен идти на
/wp-json/contact-form-7/v1/contact-forms/ID/feedback. Если вместо этого отправляется обычный POST на PHP-файл темы, значит popup-скрипт или разметка формы собраны неправильно.