Get my new tutorials in your inbox every week

WordPress Contact Form 7 issues. Why did I stop using it?

contact form 7 causes performance issues for wordpress websites

Contact Form 7 plugin for WordPress has performance issues and can eat up your website’s performance. Often, our WordPress websites are loaded with elements that are not needed to load on specific pages or even everywhere. These assets (CSS & JavaScript files), as well as inline code, are adding up to the total size of the page, thus taking more time for the page to load.

This could end up in a slow website that leads to page abandonment, poor ranking in Google search and sometimes conflict JavaScript errors where too many scripts are loading and one of them (or more) has poorly written code that is not autonomous and badly interacts with other code.

What is Contact Form 7?

Contact Form 7 is a plugin for WordPress, which lets you create custom forms for your pages and posts. I will not go into the details of the plugin since I am assuming you already are using it and is aware of it. This article covers the issues of using Contact Form 7 plugin and how to fix it.

What is the issue?

The issue is that this plugin loads 2 files (stylesheet & javascript) everywhere throughout your site when most of the WordPress websites only use them on the contact page. These files are:

  • /wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.1.4 (Stylesheet file)
  • /wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.4 (JavaScript file)

At the time of writing this article, I was using version 5.1.4. Your’s might be different. Need not worry. The main issue is why do I need to download these files when I am on my website’s home page? Ideally, I need these files only when I load my page which has the contact or my custom form. Refer to the screenshot below. Here I have captured the network requests for my home page. You can clearly see contact form 7 stylesheet and javascript files getting downloaded. (** note that I have not minified and combined my scripts so that I can analyze the issue. )

contact form 7 downloading everywhere
contact form 7 causes performance issues for WordPress websites

Moreover, the JavaScript file has an inline code associated with it, which looks something like this:

<script type='text/javascript'>
/* <![CDATA[ */
var wpcf7 = {"apiSettings":{"root":"https:\/\/www.yourdomain.com\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"},"cached":"1"};
/* ]]> */
</script>

These extra files loading, as well as the HTML code used to call them, not to mention the inline code associated with the JS file, add up to the total size of the page: the number of HTTP requests and the HTML source code size (this is a minor thing, but when dealing with tens of files, it adds up).

Not only that, the Contact Form 7 javascript file that I downloaded unnecessarily on my home page has around 92% of unused code. See the screenshot below. This is a code coverage report. The marker shows the Contact form 7 issue. And that is not good at all.

contact form 7 issue has 92% unused code.

This not only happens for the home page. It happens for every other page, for example, the about page, the terms and conditions page, privacy policy page, 404 Not Found page. It also happens for my single posts or article pages.

The question is why? This is making my website slow. Why do my website readers need to download these files unnecessarily on every page they are viewing?

Want similar tutorials to be delivered to your inbox directly? Subscribe to my email newsletter. I also send out free ebooks and tutorial pdfs regularly to my readers. I do not spam by the way and respect your privacy. Unsubscribe any time.

How to fix the issue?

You can still go ahead and use the Contact Form 7 plugin to create custom forms for your website. You can follow the steps mentioned below to fix the performance issues of Contact Form 7 plugin for WordPress. The final outcome would be:

  • Contact form 7 stylesheet and javascript files will not be downloaded on every page of your website. Only download on the contact page.
  • Both the files will be minified and as a result, the download size will reduce.

Enough said, let’s see how to fix it.

Step 1: Use W3 Total Cache plugin to minify.

Go to your Admin Dashboard -> Performance and click on Minify from the menu ( ** Install the W3 Total cache plugin if you have not). Now, Under JS minify settings, add the URL of your script file. Click on the Add a script button and paste the URL in the text input field.

/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=your_version

Replace your_version with the version of your file.

See the screenshot below

use w3 total cache to minify scripts

Do the same for the stylesheet file under CSS Minify settings.

/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=your_version

Step 2: Use Asset CleanUp plugin to unload Contact Form 7 from other pages

Install the Asset CleanUp: Page Speed Booster plugin, if you have not already done so.

Go to your Admin Dashboard -> Asset CleanUp and then click on CSS/JS Load Manager from the menu. This will show you a list of all the plugin files that are being downloaded on the home page, posts page, other pages and so on.

Refer to the screenshot below.

use asset cleanup plugin to remove contact form 7 from home page

Scroll down to see the section where it shows up the Contact Form 7 stylesheet and javascript file. Now using the toggle buttons, enable them to unload or remove these unnecessary files from the home page. You can do the same for other pages, post pages by using the Asset CleanUp plugin. Refer to the screenshot below.

use asset cleanup plugin

Using the Asset CleanUp plugin you can basically have total control of all such unwanted files, when and where to load them. You can disallow from the entire site or allow in specific pages where they are needed.

Conclusion

Once you have followed the steps, clear/purge your website cache and do a speed test. I am sure the numbers will improve. I have made my website faster by around 15%. This is a significant number when it comes to performance.

Give me a shoutout in the comments section if you have been able to follow the steps and improve your website’s performance. Cheers!!


I am a WordPress Performance Expert and enthusiastic about SEO. I provide Professional Consultation to WordPress Website owners and can help you with

Making your website faster and higher search rankings

Technical support unless you shine

Becoming your lifelong friend


What people say…


You may be interested in my other articles:

Write a Comment

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