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

satinder singh / Updated : / 5 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 Javascript, and Stylesheet (JS / CSS) files reference on all the pages of our WordPress Website.
Here will try to explain how and why to disable javascript and stylesheet 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 .i.e increase page load time which is bad SEO practice and Google ranking effect on Page Load Speed. So disabling or removing Contact Form 7 JS and CSS file will make your page load much faster.
So now the big question is Is it possible to load JS and CSS on contact page only or load conditionally(load for specific pages.). The answer is YES, below have provided the code to load remove contact form 7 JS and CSS.

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 and 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). I.e., 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' );

Other Reference Link: Contact From 7 remove CSS and JS

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time!



5 comments on “Load Contact Form 7 JS / CSS files only on Contact Us Page in WordPress [remove js/css]”

  1. Ashoksinh Gohil

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

    • Satinder singh

      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

Post Comment

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