Contact Form 7 is one of the most used free contact form plugins. At the time of this article, it has more than 5 million active installations. I think it is just right to consider it the most used contact form plugin.

With this large of an audience, optimizing the usage of Contact Form 7 seems like optimizing a significant number of WordPress users. If you don’t know it already, Contact Form 7 includes its CSS & JavaScripts files on each and every page of your site.

This redundant & wasteful inclusion should be addressed.

Why did you need to Optimize Contact Form 7 for Best Performance?

An extra CSS and/or JavaScript file on every page will be like extra baggage which you don’t want to pick up when you are walking on foot. Two extra HTTP requests can negatively affect your site load time.

If we know the fact that the Google loves to rank the sites which have page load time below 1s. First 14 KB are the critical ones.

You might want to load these CSS & JavaScript files only on the pages where you are using the Contact Form 7 plugin to create a form. It will save your site from loading extra files on each page instead these files will be loaded only on the pages with contact forms.

Read Also: How to make your website faster

How to Optimize Contact Form 7 for Best Performance

Step 1: De-Registering Contact Form 7 CSS Files

First of all, we need to check which pages have contact forms. Then we need to de-register the CSS file generated by Contact Form 7 plugin for all the other pages.

Find Page’s URL Slug

Let’s find the slug of your page with contact form. Go to Pages. Click Quick Edit and copy the slug.

Let’s take an explicit example: Imagine that you have a page titled “Contact Us” which has a URL slug contact-us. Add the following code in your theme’s functions.php file at the end.

// Deregister Contact Form 7 styles
add_action( 'wp_print_styles', 'aa_deregister_styles', 100 );
function aa_deregister_styles() {
if ( ! is_page( 'contact-us' ) ) {
wp_deregister_style( 'contact-form-7' );
}
}

This code adds a function aa_deregister_styles() which checks if the page is not contact-us then de-registers the style CSS by Contact Form 7 for other pages.

Step 2: De-Registering Contact Form 7 JavaScript Files

Likewise with the JavaScript sources, we will de-register it for all the pages except those with contact forms.

Add the following code in your theme’s functions.php file at the end:

// Deregister Contact Form 7 JavaScript files on all pages without a form
add_action( 'wp_print_scripts', 'aa_deregister_javascript', 100 );
function aa_deregister_javascript() {
if ( ! is_page( 'contact-us' ) ) {
wp_deregister_script( 'contact-form-7' );
}
}

This code adds a function aa_deregister_javascript() which checks if the page is not contact-us then de-registers the JavaScript file by Contact Form 7 for all the other pages.

That’s it. You have successfully optimized your Contact Form 7 plugin.

What if you have Multiple Forms on Multiple Pages?

The answer to this question is simple: use is_page() function which has massive function reference at WordPress Codex: is_page(). You can add an array of pages. It can get parameter value as Page ID, Page Title or Page Slug.

/**
* is_page( array( ID, 'slug', 'Title' ) );
* Returns true when the Pages displayed is either post ID 42, or post_name "about-me", or post_title 
*/
is_page( array( 42, 'about-me', 'Contact' ) );

That’s it. You have successfully optimized your Contact Form 7 plugin.

Enter your personal email address below to subscribe our Newsletter:

Your information is 100% safe and will not be shared with anyone else. You can unsubscribe with one click at any time.