After click on send button of Contact Form 7 plugin, it's whole page is refreshing and goes to top of the page but I want to reload contact form only

Question

In my project(website on WordPress) I had added a contact form 7, when I click on SEND button then it's goes to top of the page and whole page is redirecting but I want only contact form 7 is refresh and submit the value's like Name,Message,Email. Please help...Thanks in advance.

Answer 1

make sure you called

<?php wp_footer(); ?>

in your footer, that's how the AJAX files for contact form 7 get into your theme.

Answer 2

It's depend on yous CSS and JS...For do it successfully you should follow these step's.

Step 1: Stop loading the JavaScript and CSS stylesheet on all pages

When the value of WPCF7_LOAD_JS is set to false (default: true), Contact Form 7 does not load the JavaScript. You can set the value of this constant in your wp-config.php like this:

define('WPCF7_LOAD_JS', false);

Likewise, you can control the loading of the CSS stylesheet with WPCF7_LOAD_CSS. Contact Form 7 does not load the CSS stylesheet when the value of WPCF7_LOAD_CSS is false (default: true). You can set it in the wp-config.php like this:

define('WPCF7_LOAD_CSS', false);

Or, if you’re using Contact Form 7 3.9 or higher, you can also disable the loading of the JavaScript and CSS by adding a few lines of code into your theme’s functions.php file, like this:

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

Step 2: Load the files on pages which contain contact forms

let’s say you have a page named “example.php” and it is the only page that contains a contact form. You must edit the ‘example.php’ template file and insert the following lines (put upon side of short code of contact form)into it:

<?php
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
wpcf7_enqueue_scripts();

}

if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
wpcf7_enqueue_styles();

}

?>

Now you should refresh your page and click on send button it'll work correctly. Thank's.

Answer 3

# Restrict Contact form 7 scripts and styles
function conditionally_load_contactform7() {
if(! is_page( array ( 14 , 19 ) ) ) { # Edit page IDs here
    wp_dequeue_script('contact-form-7'); # Dequeue scripts.
    wp_dequeue_style('contact-form-7'); # Dequeue css.      
    }
}   
add_action( 'wp_enqueue_scripts', 'conditionally_load_contactform7' );