Wordpess + Contact form 7 + popup — почему перезагружается страница?
Всем здоровья!
Проблема такая: у меня на сайте на CMS Wordpess на самописной теме в шапке есть кнопка "Обратный звонок", при клики по которой появляется Pop-Up окно, в которое подгружается форма от плагина contact form 7.
Если в этой форме нажать кнопку "отправить" , не зависимо от того заполнены поля формы или нет (хотя в настройках формы указаны обязательные поля для заполнения) перебрасывает на страницу у которой ссылка выглядит так: https://сайт.ru/wp-content/themes/название-темы/ajax-callback.php#wpcf7-f1780-o1. И на этой странице расположена эта же форма, но уже без стилей 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); }); }); });
Вот код из файла 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';
Вот код из файла 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 -->
Помогите пожалуйста с решением!
Решение нашлось! Если кому-то понадобится.
В файле scripts.js заменить:
на