Load Contact Form 7 JS / CSS files only on Contact Us Page in Wordpress [remove js/css]

/ / 7 Comments

Remove contact form 7 javascript.js and Stylesheet.css: This article explains how to load contact form 7 on contact page only or any other particular page. In short we don't want to load Contact Form 7 JavaDcript, and Stylesheet (JS / CSS) files reference on all the pages of our WordPress Website. Here will try to explain how and why to remove javascript and stylesheet file on all other pages in WordPress.

What is Contact Form 7?

Contact Form 7 is the best plugin and widely used in all WordPress website. It can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

It's easy to set up, and the built-in antispam and CAPTCHA make it secure and more reliable. It's one of my default plugin which has installed in all of my WordPress sites.

Why remove Contact Form 7 JS and CSS files?

I love this plugin, its a great contact form plugin for WordPress, but there is one disadvantage of using it. That's is it loads its JavaScript and CSS on every page of your site, even if you have used it only on one page. Loading JavaScript and CSS reference on all pages will affect your page load speed. Increase in page load time is bad for SEO as Google ranking factor is depend on Page Load Speed.

By removing Contact Form 7 JS and CSS file will make your page load much faster. So now the big question is it possible to load JS and CSS on contact page only on contact us page or load conditionally(load for specific pages.). The answer is YES, we have to make changes in our functions.php file

Code to Optimized Contact Form 7?

#Restrict Contact form 7 scripts and styles: Now login to your Wordpress admin dashboard go to Appearance --> Editor --> select functions.php files. Add the below-written code at the end of your functions.php file. This will load Contact from JS and CSS files only for the specific page.

Here in my case, I want to load contact form 7 only on my contact page. So first we have to find out our contact page id and use that page id in our custom function (load_contactform7_on_specific_page). Here in my case 100 is my contact page id. 

function load_contactform7_on_specific_page(){
   //  Edit page IDs here
   if(! is_page(100) )    
   {		
      wp_dequeue_script('contact-form-7'); // Dequeue JS Script file.
      wp_dequeue_style('contact-form-7');  // Dequeue CSS file. 
   }
}

add_action( 'wp_enqueue_scripts', 'load_contactform7_on_specific_page' );

Conclusion :  By modifying our functions.php file will able to load contact form 7 file only on contact us page. This will help us to load our web faster, where we don't want to load these files.

Other Reference Link: Contact From 7 remove CSS and JS

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.

Post Comment

Your email address will not be published. Required fields are marked *

7 Comments

  1. Ashoksinh Gohil 01/15/2017 11:10:26
    Hello, very nice post which I am searching,.....same problem happened with me ! CF7 load its JS and CSS on every page which not good practices! Also, all contact form doing same things, I didn't find any good plugin which load js and CSS where it needed.. you have any idea any plugin which do this job (load js and CSS where it required) ?? Please suggest what to do? use this code or any other plugin which work good (provide name)?
  2. Satinder singh 01/16/2017 10:18:20
    Hi Ashoksinh, Contact Form 7 is one of the best plugin. I suggest you, to use this plugin along with the above code I have written, which helps to stop loading CSS and JS files on each pages
  3. Deb 02/17/2017 07:36:14
    Hello, what about multiple form. I am using contact 7 in 2 page. So tell me which codes to use
  4. Satinder singh 04/06/2017 15:35:38
    Hi Deb, By adding both page ids you can load contact form 7 files on those 2 pages
  5. surendra 05/09/2017 07:52:16
    nice solution
  6. rony 10/27/2021 15:05:32
    how to separate ids by , or " " please ans
  7. Nico 02/09/2022 12:29:34
    /** Load Contact Form 7 and Recaptcha JS / CSS files only where's needed  */
 add_action('wp_print_scripts', function () {
	global $post;
	if ( is_a( $post, 'WP_Post' ) && !has_shortcode( $post->post_content, 'contact-form-7') ) {
		wp_dequeue_script('google-recaptcha');    // Dequeue google recaptcha
		wp_dequeue_script('wpcf7-recaptcha');     // Dequeue cf7 recaptcha
        wp_dequeue_script('contact-form-7');      // Dequeue JS Script file.
        wp_dequeue_style('contact-form-7');       // Dequeue CSS file. 
	}
});
    might be useful to someone ... Bye
👳 Want to thank me? Buy Me a Coffee
↥