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

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

Заметки к вопросу:
Alivgon 7 месяцев назад

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

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

wpcf7.initForm($form)

на

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

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