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

Our Reader Score
[Total: 0 Average: 0]
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.

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!


Get your Printable Copy