How To Load Contact Form 7 Styles & Scripts Only On Selected Pages

by | Last updated Jul 18, 2019 | Latest Tutorials

Contact Form 7 (CF7) is the best and the most popular contact form plugin on WordPress.

I’m personally using Contact Form 7 and for me has been working great from it’s early day, more then 10 years.

I’ve been using it all the time at mine and my clients websites.

This plugin (CF7) embeds few files into your website’s HTML code what creates addition queries and effects loading speed of your website, accordingly to Google one of very important SEO ranking factors.

In early WordPress days CF7 JavaScript and Style Sheet loading was not a big deal. WordPress has had so much more important problems and issues that nobody even thought about this.

Things have changed over the time and it’s mostly due to user experience and user satisfaction which might be the most important factors when Google is ranking the websites in search result pages.

Having slow site affects your SEO

Having few unnecessary queries loading on all of your pages can significantly effect your chance to rank high for your target keywords. Contact form 7 JavaScript is a quite heavy and it does affect your site’s speed. There is no doubt nowadays in 2019 everyone should include this quick patch for it’s problem on their pages.

So in this quick tutorial I’m going to teach you how to disable loading of Contact Form 7 files files on website pages, except on the pages that you can select either by name, id or page title. We are going to do this through the two steps by editing functions.php file.

Do not to edit WordPress parent theme files, first because you can make a mistake and your website won’t load at all, again even if you do everything correct once there is the new version of the theme and you update to latest version all your changes will be erased. When you performing this type of fixes you should always consider adding changes to a child theme. If you don’t have one, or you don’t know how to make a child theme go this blog post in which I’m explaining you how to do one.

Contact Form 7 Load Speed Fix Video

Stop loading Contact From 7 CSS and Javascript on all pages

To completely stop loading of Contact Form 7 scripts and styles on all website pages we have to do two tests.

These are the scripts are styles by default loaded on all WordPress pages

by default loaded CF7 styles and scriptsTo fix this we have to to pass post and page data and then check if passed content has a required shortcode. If passed content has right shortcode in it we will allow these pages to continue the load if not we will stop loading of CF7 files.

Stop loading of Contact Form 7 files on all blog posts unless there is a shortcode ‘contact-form-7’

How contact form 7 shortcode looks likeIn first step if it’s is_singular() what means single posts and we perform get_post() and check if the passed content contains a specific short code ‘contact-form-7’ which is shortcode used by our plugin and if so our variable check is true, then in the second part we say if variable check is not true stop files from loading.

Yeah, it’s that simple!

Stop Contact Form 7 from loading on all other pages but selected ones

In the second step we are going to do it slightly different and actually we will create a custom function in which we are going to set variable check to by default to false so we can test against it. Then we load pass data only from single page or array of the pages for a check and if check is true we do nothing while for all other pages we say if check if false remove script.

And this works like a charm!

And here is how final version of this Contact Form 7 speed patch should look like!

If you have any issues installing this permanent patch/fix first check our YouTube Channel for step by step video on how to apply this fix or just comment below and we will get back to you shortly.

Good Luck!

0 Comments

Submit a Comment

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