Wordpess + Contact form 7 + popup — почему перезагружается страница?

Question

[Alivgon]

Всем здоровья!

Проблема такая: у меня на сайте на 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);
        });
      });
    });

Вот код из файла 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 -->

Помогите пожалуйста с решением!

Answer 1

[Alivgon]

Решение нашлось! Если кому-то понадобится.

В файле scripts.js заменить:

wpcf7.initForm($form)

на

let modalForm = document.querySelector('.modal form');

wpcf7.init(modalForm);
if (wpcf7.cached) wpcf7.refill(modalForm);