Contact form 7 + popup why does the page reload?

Question

Bootstrap

Greetings!
I have such a problem: I created a standard modal window using bootstrap, inserted the contact form 7 plugin form there, the plugin works fine, BUT! if, for example, the form is not filled out, and you press the "send" button, it reloads the page, as if going to the link http://site_link.ru/#wpcf7-f159-o3, while the modal window closes, when you call it again, a window with the form pops up and there already messages about filling errors and so on. That is, I need all messages (including those about successful sending) to appear in the modal window without reloading the page.
Please help me with a solution, I searched everything, there is no such problem anywhere (((

Answer 1

I think a lot of people will find it useful! This problem most often occurs when you start from scratch to create a template, as a result, you forget to place in the footer: Which directly loads the .js plugins! Well, it is desirable to place it higher in the footer.php itself, but below the jquery output! (you can also test this probability by loading another template) Tested on: WP Version 4.8.3; jquery library 1.12.4; Contact Form 7 Version 4.9.1; Like if it helped!

Answer 2

add wp_head() to the header if it doesn't help, then add define ('WPCF7_LOAD_JS', true or false ) to wp-config;
or in general, you can force it to be written in the header:

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

This is not my answer, but it worked for me. Found this holy man's answer here.
I understand that a similar problem arises when you try to write a template yourself. The idea came when I checked the work of contact form 7 on a regular theme from the proposed WP

Answer 3

Faced a similar problem. I will describe her solution here.
The free Travel Company theme from Scorpionthemes also had a page reload (404 error with a link to /mail/mail.php) when trying to send a message via the contact form. The point was that in the contact form page template (contact.php), the output of the contact form was wrapped in another tag . It needs to be replaced to keep the look. PS: everything lies on the surface, but suddenly it will help someone save time <form><div class="form">

Answer 4

Faced a similar problem, developed my own theme.
The bottom line is that I use js 3.2.1, and WP loads its library 1.12.4.
I tried to completely disable js WP and connect my library - it didn’t work :(.
BUT there is a solution to REPLACE the library with my own, write these lines in functions.php:
//Apply your 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');
I also sent the whole thing to the footer. CF7 v.4.9.2 - the flight is normal and the site uses js v.3.2.1

Answer 5

CF7 in the modal window works exactly as you want, it has a built-in ajax sending, most likely you have a script conflict, it’s impossible to say more without seeing the problem

Answer 6

It helped me that I moved the jQuery connection to the very top before wp head()

Answer 7

If the form (we) is displayed on the page using do_shortcode(), then you need to manually include the file on the page

/wp-content/plugins/contact-form-7/includes/js/scripts.js

You just need to understand that where the form worked, it will stop due to the connection of this file (since when the form is displayed through the admin panel, this file is already on the page). Therefore, in order not to connect the script a second time, you need to make a check. For example, I needed to display only on pages where the URI is present /cars/, so my code looks like this:

<?php if (strpos($_SERVER['REQUEST_URI'], '/cars/') !== false) { ?>
<script type="text/javascript" src="/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.3.2"></script>
<?php } ?>

Answer 8

Today I faced the same problem)
My solution turned out to be simple. Enabled debug in wp-config. Found that wp_head wp_footer give an error.
So the error is inside function.php. Fixed it and everything worked. If everything is connected correctly at this stage it will fly. If not, read on
. I also noticed that action="/page/wp7*** remained. Here, it's enough just to remove the form tag in the cf7 constructor.
Well, the last thing that will save you is to go to the off site and copy the styles and js codes to your project then connect them as native))
Remember, php stops processing the code if there is an error in it. I recommend a plugin with debug. If js is naughty in the console, you will notice it.
If it is empty in both cases, it means the markup is all right.

Answer 9

I have the same problem, there was a conflict of scripts, I changed places in the scripts and also indicated the path script type="text/javascript" src="plugins/contact-form-7/includes/js/jquery.form.js" > and script type="text/javascript" src="plugins/contact-form-7/includes/js/scripts.js" >.
It worked with the modal window, when sending data, the page did not reload, but on the main page the forms stopped working ((and now I don’t know what to do at all .. I
also tried to redirect (to the same form) for the button from the modal window form, but nothing happened...

Answer 10

Perhaps it will be useful to someone, I solved this problem by disassembling the code and finding the reason there.
As a result, this hack helped (each form has its own):

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>');
  }