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

Question

[Алина Брэнн]

Приветствую!
У меня такая проблема: создала стандартное модальное окно посредством bootstrap, вставила туда форму плагина contact form 7, работает плагин отлично, НО! если к примеру форма не заполнена, и нажать кнопку "отправить" он перегружает страницу, как бы переходя на ссылку http://ссылка_сайта.ru/#wpcf7-f159-o3, при этом модальное окно закрывается, при повторном вызове всплывает окно с формой и там уже сообщения об ошибках заполнения и тд. То есть, мне нужно, чтоб все сообщения(в т.ч. и об удачной отправке) появлялись в модальном окне без перегрузки страницы.
Помогите пожалуйста с решением, все перерыла, такой проблемы нигде нет(((

Answer 1

[artegion]

Думаю многим будет полезно! Данная проблема чаще всего происходит, когда вы начинаете с нуля создавать шаблон, в итоге в footer забываете размещать:
<?php wp_footer(); ?>
Который непосредственно подгружает .js плагинов!
Ну и разместить желательно его повыше в самом footer.php, но ниже вывода jquery!
(протестировать данную вероятность так же можно подгрузив другой шаблон)
Протестировано на:
WP Версия 4.8.3;
Библиотека jquery 1.12.4;
Contact Form 7 Версия 4.9.1;

Лайк, если помог!

Comments

[devstudent]

Лайк! СПАСИБО! БОЛЬШОЕ! мне помогло!

[rockshery]

Это очень полезный совет на самом деле. Сам когда-то голову ломал, как ускорить работу сайта по требованиям гугла, но приходилось всё же оставлять скрипты в head, иначе не всё работало корректно на сайте.

[bondarenko_vad]

Забыл добавить wp_head()

[Альберт Макс]

Спасибо большое! Хочу отметить: не только wp_footer , но и wp_head . Но в любом случаем пришёл к этому через тебя!)

Answer 2

[София Кэрролл]

в шапку добавь wp_head() если не помогает, то в wp-config добавь define ('WPCF7_LOAD_JS', true или false );

или вообще можно принудительно прописать в шапку:

<script type='text/javascript' src='/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=твоя версия скрипта'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var _wpcf7 = {"loaderUrl":"\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","sending":"Sending ..."};
/* ]]> */
</script>
<script type='text/javascript' src='/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=твоя версия скрипта'></script>

Это не мой ответ, но у меня это сработало. Нашла ответ этого святого человека здесь

Я так поняла, что подобная проблема возникает, когда сам пытаешься написать шаблон. Мысль пришла, когда проверила работу contact form 7 на обычной теме из предложенных WP

Comments

[dimasibirak]

до сих пор актуально)

[ilyasmirnov]

Не работает

[KianoST]

Спасибо!
Всё работает.

[brees]

Помогло определение константы

[Дмитрий Самойлов]

Реально помогло, спасибо, долго не понимал, что происходит вообще. Вылезали какие то 2 надписи вообще, глючило все и перезагружалось, помогло wp_head и footer

Answer 3

[big_hasan]

Столкнулся с похожей проблемой. Опишу её решение здесь.
В бесплатной теме Travel Company от Scorpionthemes так же перезагружалась страница (ошибка 404 со ссылкой на /mail/mail.php) при попытке отправить сообщение через контактную форму. Дело было в том, что в шаблоне страницы контактной формы (contact.php) вывод контактной формы был обёрнут в еще один тэг <form>. Нужно его заменить на <div class="form"> чтобы сохранить внешний вид.
P.S.: все лежит на поверхности, но вдруг кому-то это поможет сэкономить время

Comments

[nikita_dontsov]

Ты просто спаситель
Спасибо!!!

[Ugasusa]

Суууупер! Что я только не пробовал, пол дня убил, а так все просто ))) Благодарю!

[Alenka322]

Спасибо большое, перепробовала кучу вариантов, а оказалось совсем просто!))
Спасибо !))

Answer 4

[Фёдор]

Столкнулся с подобной проблемой, разрабатывал свою тему.
Суть в том, что у меня используется js 3.2.1, а WP грузит свою библиотеку 1.12.4.
Я пробовал отключить полностью js WP и подключить свою библиотеку - не сработало :(.
НО есть решение именно ЗАМЕНИТЬ библиотеку на свою, пишем эти строчки в functions.php:
//Применяем свой jQuery
function modify_jquery() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', get_template_directory_uri() . '/js/vendor.js', false, '3.2.1', true);
wp_enqueue_script('jquery');
}
}
add_action('init', 'modify_jquery');

Я еще отправил все это дело в футер. CF7 v.4.9.2 - полет нормальный и на сайте используется js v.3.2.1

Comments

[bro-dev]

Это решение

[YakovSpb]

у меня пишет
missing name after . operator

[Владимир Куликов]

Занимаюсь оптимизацией сайта. Оптимизировал до 99 на телефонах и 100 на пк. Ищу способ отключить jquery и чтобы cf7 не переставала ajax ом отправлять сообщения. Эх.. Наверное придется свой обработчик писать..

Answer 5

[dalph]

Возможно кому-то будет полезно, решил данную проблему разобрав код и найдя там причину.
В итоге помог такой хак (для каждой формы свой):

let callbackModal = $('#callback_modal div[role=form] .screen-reader-response');
	if (callbackModal.length){
		callbackModal.append('<span role="status"></span>');
	} else {
		$('#callback_modal div[role=form]').append('<div class="screen-reader-response"><span role="status"></span></div>');
	}

Comments

[GetCode]

Единственное что помогло

Answer 6

[WP Panda]

CF7 в модальном окне работает именно так как вы хотите, ajax отправка у нее встроена , вероятнее всего у вас конфликт скриптов, большего не видя проблемы сказать не возможно

Answer 7

[Андрей]

Мне помогло, то что я перенес подключение jQuery в самый верх перед wp head()

Answer 8

[Anonimmus]

Сегодня столкнулся с такой же проблемой)
У меня решение оказалось простым. В wp-config включил debug. Обнаружил что wp_head wp_footer выдают ошибку.
А значит ошибка внутри function.php. Исправил и все заработало. Если все подключено верно на этом этапе полетит. Если нет читаем дальше

Также обратил внимание что остался action="/страница/wp7***. Здесь достаточно просто удалить тег form в конструкторе cf7.

Ну и последнее что вас спасет это зайти на офф сайт и скопировать стили и js коды в ваш проект затем подключить их как родных))

Запомните php перестает обрабатывать код если в нем ошибка. Рекомендую плагин с дебагом. Если js шалит в консоле вы это заметите.
Если пусто в обоих случаях значит в разметке дело. Всем добра

Answer 9

[Любчик]

У меня такая же проблема, конфликт скриптов был, местами в скрипты поменяла и плюс еще указала путь script type="text/javascript" src="plugins/contact-form-7/includes/js/jquery.form.js" > и script type="text/javascript" src="plugins/contact-form-7/includes/js/scripts.js" >.
C модальным окном сработало, при отправке данных страничка не перезагружалась, но вот на главной странице формы перестали работать(( и теперь не знаю, что делать вообще..
также пробовала сделать redirect(на эту же форму) для кнопки с формы модального окна, но ничего не вышло...