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

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