Having a contact form on your website is a great way to add an effective way for visitors to contact you or send you a message. In fact, it would be quite difficult to find a website without a contact form of some sort. I mean, what kind of business doesn’t want their customers to contact them? Even if it is for a personal project, a contact form can come in handy for receiving feedback or correspondence from those who pass by your website.
With WordPress, there seems to be a plugin for everything. If you have gotten this far down the WordPress development rabbit hole by now, you are probably realizing that there are countless plugins out there for adding contact forms to your website. One of the most popular is Contact Form 7. At first glance, this plugin seems like a great choice; it is almost 15 years in the making, it has thousands of loyal users, it has features such as anti-spam and ReCaptcha, and is incredibly easy to install and configure. However, if you are on the quest for a high-performing and fast-loading website then Contact Form 7 might make this harder for you.
Why code your own contact form?
You see, plugins typically load globally on each one of your pages and posts, and can slow down your site loading times significantly. Contact Form 7 in particular adds 37k page weight to every page of your site. If you are on the hunt for faster load times, then you may want to consider an alternative to using a plugin for your contact form. This is the problem I face whenever I am building a WordPress site, and the solution I have come up with is extremely simple: code your contact form from scratch!
Although it may sound intimidating if you have no experience coding HTML or adding custom CSS to your site, it is actually rather straightforward. To make it even more simple, I suggest using a form handling service such as Getform.io if you don’t wish to write your own PHP.
Create the HTML
We are going to start with the basic HTML layout for your form. Everything is going to be enclosed in a form tag, and to keep things simple you can style the elements inline. If you want to keep your CSS separate, simply give each element a class, and style them from your CSS file.
Below is the complete HTML code we are using for this example:
<form accept-charset="UTF-8" action="https://getform.io/b/20217" method="POST" enctype="multipart/form-data" target="_blank" id="wpform">
<div>
<label>Name</label>
<div>
<input style="margin-top: 5px; background-color: #fff; height:35px; width:235px;" type="text" name="first_name" placeholder="" required="required">
</div>
</div>
<br>
<div>
<label>Email address</label>
<div>
<input style="margin-top: 5px;background-color: #fff; height:35px; width:235px;" type="email" name="email" placeholder="" required="required">
</div>
</div>
<br>
<div>
</div>
<div>
<label>Telephone</label>
<div>
<input style="margin-top: 5px;background-color: #fff; height:35px; width:235px;" type="tel" name="telephone" value="" required="required">
</div>
</div>
<br>
<div>
<label>Message</label>
<div>
<input style="margin-top: 5px;background-color: #fff; height:35px; width:235px;" name= "message" type="textarea" value="" required="required">
</div>
</div>
<br>
<br>
<input type="hidden" name="utf8" value="✓">
<button style="font-size:14px; background-color:#61ce70; color:#fff; font-weight:bold; padding:10px 35px; margin: 5px 0 0 0;" type="submit">SUBMIT</button>
</form>You can see we are requesting 4 pieces of data from the user: their name, email address, telephone number, and a message. We have used the “required” attribute so the user needs to fill in every field before they are able to submit.
Making it work
The most important part of your form is the action attribute. This determines what happens when your user clicks the submit button. In this case, our form is sent to a third-party form handling service which automatically routes the message to our email, after running it through a spam filter. If you are planning to use GetForm, they have a free tier perfect for personal projects and small businesses that is very easy to configure with your email address. Simply visit their website and click “generate endpoint for free.”
If you are using the WordPress block editor, it is very easy to embed the form on your page. Add a new block and select “Custom HTML” as the block type. From here, you are going to place your form element. If you styled your CSS inline, it will go here as well. If not, you will simply add your CSS to the “Additional CSS” section on the WordPress customization page. If you are using a site builder such as SiteOrigin or Elementor, the method for adding custom HTML will be very similar. Just find the custom HTML widget for whatever builder you are using, and paste your code into there.
Below, you will see what the form looks like when we’re done:
