Only include Contact Form 7 javascript and CSS when needed

The Contact Form 7 is a great WordPress plugin for adding contact forms to your site. The plugin is very easy to use and make nice contact forms with.

The bad news is that the plugin includes javascript and CSS on every page which makes your site load slower than necessary. The good news is that there is an easy fix for it.

By adding the two following code snippets to your themes functions.php you can remove the javascript and CSS from all pages that don’t use it which makes your site load faster.

Remove Contact Form 7 javascript

add_action( 'wp_print_scripts', 'deregister_cf7_javascript', 100 );
function deregister_cf7_javascript() {
	if ( !is_page(100) ) {
		wp_deregister_script( 'contact-form-7' );
	}
}

Remove Contact Form 7 CSS

add_action( 'wp_print_styles', 'deregister_cf7_styles', 100 );
function deregister_cf7_styles() {
	if ( !is_page(100) ) {
		wp_deregister_style( 'contact-form-7' );
	}
}

In both code snippets, change the number 100 to the id of the page where you have added the contact form or use the page slug instead.

About Fredrik Malmgren

Fredrik Malmgren is an entrepreneur, project manager and developer specialized in WordPress. Read more about me or get in contact with me. You can also find me on Twitter. (@fredrikmalmgren).
This entry was posted in Plugins, Tutorials, WordPress and tagged , , , , , , . Bookmark the permalink.

29 Responses to Only include Contact Form 7 javascript and CSS when needed

  1. Works like a charm!
    Thank you for sharing it! It reduced the loadtime and now I’ll use in my other WordPress-sites.

  2. Nabil says:

    Would you recommend one to use a caching plugin such as W3 Total Cache (and not get the CSS/javascript to load) or to use your fix?

    I’m voting for the first option since it makes your site load even more faster :)

    /Nabil.

    • Fredrik Malmgren says:

      I don’t know how cache works technically but why load something from the cache when not needed? I guess that it also takes time and resources although much less.

      So, maybe the best solution is to use them in combination.

      I saw that you are using both W3 Total Cache and Contact form 7. It would be interesting to see what happens if you add this fix to your site and compare the load time.

      Anybody have a better answer on Nabil’s question?

      • W3 Total Cache is merging and minifying all the css files or js files to one(if you’ve set it up to do so). So it is not a good thing using both methods, because then you will load the cf7 styles and scripts directly from the cf7 plugin AND from the cached files.

        I would compare the methods to each other. And see what fits your site best. Sometimes (not often!) W3 Total Cache is having the opposite effect, it makes your site slower. So you should always test your configuration with, for example, YSlow.

        We use W3 Total Cache for some of our sites, and I can definitely recommend it!

  3. Ama Honeg says:

    Hi, how would I go around on enabling the JS for more than one pages? I have a few pages where the contact form is used. Thanks

    • Fredrik Malmgren says:

      To add Contact Form 7 JS and CSS to more than one page just change the is_page function.
      Example: !is_page(array(40,45,50))
      This will add the JS and CSS to pages with id 40,45 and 50.

      Note that you can also use the post slug or title instead of the id.
      Example: !is_page(array(40,’contact-us’,'Contact’))

  4. how about just avoiding it to load in certain pages instead of permiting it in certain pages ?????

    Any help with that.

    • Fredrik Malmgren says:

      If I understood you question correctly you can just remove the exclamation mark from the if-statement:

      if ( is_page(100) ) {
      wp_deregister_script( ‘contact-form-7′ );
      }

      This will remove the javascript only from the page with ID 100 instead of removing it from allpages except the page with ID 100.

  5. Xavi says:

    Works great Fredrik! I wonder why the CF7 author doesn’t enable this by default… Thanks for the code :)

    • Fredrik Malmgren says:

      You are probably not the only one that wonder why they don’t fix this problem.

      Anyway, always nice to be able to help.

  6. Kyle says:

    Just what I’m looking for. Works perfect!
    Thank you so much for sharing it Fredrik :)

  7. Georgy says:

    Wow! worked like a charm! Thanks a ton!

    Can i have some help on how to remove the share-this calls and scripts from my wordpress site? i removed share-this plugin long time ago. Its nowhere in the template files, still its getting loaded in the page source as you see …src=’http://w.sharethis.com/button/buttons.js?ver=3.2.1′>…

    How can i get rid of that? Searched a lot on net and got suggestions like use the “Clean Options” plugin but still no hope! please try to help me with this!!! Its eating up unnecessary reources at each page load.

    Thanks,
    Georgy

    • Fredrik Malmgren says:

      Hi Gregory,

      I haven’t used ShareThis so unfortunately I don’t have any solution for you.
      However it sound strange that the call to their javascript still is loaded on your site when you have removed the plugin.

      Search in all you files after the javascript, that might give you a clue how to remove it.

  8. henry says:

    how do i style cF7 though without editing the plugin css directly

  9. Paul says:

    Wouldn’t it be better to put this code in the plugin itself (wp-contact-form-7.php?This way if the user ever changed themes, the effect would still occur – the javascript would only load on the correct page.

    It seems that this should be suggested to the plugin author – offer an option to restrict it to certian pages…

    • Fredrik Malmgren says:

      Yes, I agree. The plugin should have a function for selecting on what page you want to show the form so you don’t have to do this fix…

  10. Yousuf Khan says:

    Superb tutorial! I was searching for it from many days, I mean months :D

  11. Bharat says:

    Simple yet superb tutorial, this increased my page loading speed by 5%, thank you :)

  12. Jason H says:

    That’s awesome. I was looking for something like this while trying to speed my site up and reduce http requests. Thanks!

  13. Victor says:

    I really appreciate your sharing this. The original author of CF7 offers a solution but I didn’t like the suggested option.
    This works great.

  14. Brad says:

    Is there a way to have it dynamically disable? I can tweak it on demand, but looking to extend the ease of use in case I have to repeat many times. Looking to create a function and add it as a plugin to make sure I dont lose any changes after any updates.

    • Fredrik Malmgren says:

      I’m not sure that I understand what you want to do but you can of course create a plugin of the code above.

  15. According to the official CF7 docs you can add a ‘define’ in wp-config.php to disable loading the JS and/or CSS.
    http://contactform7.com/loading-javascript-and-stylesheet-only-when-it-is-necessary/

    It would be very cool if the CF7 plugin looked for a CF7 shortcode and only then added the JS and/or CSS.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>