Contact Form 7 vs Simple HTML Form
Another tip to speed up your website a bit!
This post is related to my last blog post about my efforts to speed up our site, by removing plugins where the benefit does NOT outweigh the convenience. (Just here for the code samples? Click here.)
The Story:
Up until a few days ago our site was using the very popular plugin “Contact Form 7” which at present has 1+ million active installs. I noticed for such a simple thing as a contact form that it was adding a few more scripts than I wanted to the loading of the site, it was adding 1 CSS file, 2 JS files and calling an ajax loading GIF.
In total they don’t add up to very much in terms of KB size but then again with the load of an extra plugin it might, so I set out to compare if it was worth swapping it out for a static version.
For the non-code savvy people out there I found a nice little free (they seem to have moved to a membership model, but our code below will still work) tool that lets you build a contact form online with no coding skills required https://coveloping.com/tools/html5-responsive-form-generator I actually used it on our site and will use it in these examples because there is no point me telling you why something is good and not telling you how to do it 🙂
The visual results:
I did not copy our contact form exactly when replacing it and actually I think it now looks nicer than before, you can have a look at it over at https://wpgeodirectory.com/contact-form/
I didn’t take screen shots of before and after on our main site so for these examples i’m going to show it on a fairly clean install of 2015.
Contact Form 7:
Our Simple Contact form :
So how much did it speed up our site?
Again I did not take note of the exact savings on our main site so I did some fresh benchmarking on a pretty clean 2015 install on the sample page with the results as below. (these were averages of several refreshes with no caching)
Before any contact form (base results):
After Contact Form 7 plugin installed (but not added to page):
Contact Form 7 plugin active and shortcode on page:
Our Simple Contact form on page (CSS added to styles.css and send function to functions.php):
You can see the results are not staggering but that it is certainly faster to have a simple contact form on your site not adding any more http requests to the page load than to have a contact form plugin. Adding the plugin to the page added about a 22% extra loading time or about 120ms, this is exaggerated % figure as the site is so small and clean in the first place, on much heavier sites the % difference would be much lower.
The Results:
Was it worth swapping out our contact form for a simple HTML/CSS solution? I think it was, the savings were 4 extra files not having to be requested by the site and ultimately saving around 120ms in load time on every page load and really every second ms counts these days!
This solution can easily be swapped out by non-code savvy people and below I’ll show you the exact code we use on our contact form. The HTML and CSS are 99% made from the coveloping.com tool mentioned above with the only additions being:
#1 We wrapped it in a div.
#2 We added a honey pot hidden input field for basic bot protection.
#3 We added a extra hidden div below to show a message after the form is sent.
Below is the exact code we used on our site.
The code samples:
# The HTML (this goes on your WordPress page, make sure you have the “text” tab selected and not “visual”):
# The CSS (this goes in your theme style.css, probably best at the bottom of the file, you can edit this under Appearance>editor):
# The JS, you can place this inside script tags in GD>Design>Scripts>Footer Scripts
# The PHP, be sure to swap the YOURFROM@EMAIL.COM and the YOURTO@EMAIL.COM email addresses with your own, these represent the emails that the email will come from and go to respectively.
(this goes in your theme functions.php, you can edit this under Apperence>editor>Select functions.php, make sure the code goes after the opening PHP tag <?php and before the closing PHP tag ?>) WARNING: You can totally break your site by editing this in the wrong place, you do so at your own risk. (Disclaimer: I was hungry while writing this, also my fiancé was right, this did take longer than 30 minutes to write, she wins again!)
