How to Build Your Own WordPress Contact Form and Why You Should
How to Build Your Own WordPress Contact Form and Why You Should
Contact forms are sort of must for websites nowadays. You need to give your visitors an easy way to get in touch with you. An email address works, yes, but a contact form is just so much cleaner.
There are several ways to get contact forms into your WordPress website. You can use a plugin, you can use templates if they’re built into your theme, or you can code your own as a child theme into any theme you want. Let’s take a look at all three options so you can see what works the best for you.
There are lots of plugins to choose from and they have a wide range of features. Most are free and those that are not have a free version. They’re usually easy to set up and you can choose which fields you want to include. Here are the ones that are currently the most popular free option and offer the best quality:
Contact Form 7 is one of the standards in creating contact forms. It currently has over 1 million active installs and a rating of 4.6/5. It lets you create multiple forms that you can modify with markup. You place the contact form in any post or page using a shortcode. It’s also compatible with several other plugins including three from the author of the plugin.
You can create a new contact form, edit a contact form, or duplicate a contact form.
Forms are created by choosing and filling in fields that create HTML tags. It’s a complicated process just to get a few fields for your readers to fill in, but it’s not overly terrible. You have several sections to fill in including:
- Mail 1
- Mail 2
- Messages (23 total)
- Additional Settings
- Generate Tags (16 different fields can be added)
If you want the fields in a different order you can cut and paste in the HTML into a new location. The results are nice. It’s been updated to work with the latest edition of WordPress but there hasn’t really been anything new added to it over the years. It’s good. It’s basic. It works.
This free plugin allows you to create your own forms. You can add, remove, and rearrange the fields any way you want. You can create as many forms as you want and you can place the forms on pages and posts with a shortcode. Your forms can be as simple or as complex as you want them to be.
You can create your own fields or choose from 20 different labels, add tool-tips, error messages, advanced features such as page redirects before and after, scheduling, custom CSS, custom HTML, and much more.
It also has a form preview feature so you can fix any issues before going live with your new form. The forms look great and they’re easy to set up on the admin side.
They’re also easy to use for your site visitors. That is, there’s no guesswork for filling it out.
It’s simple to use and still gives you the ability to create highly detailed forms. It’s no wonder then why it has a rating of 4.7/5 with over 400,000 active installs.
This plugin has lots of options that you can use or opt out of, should you so choose. If you prefer, you can just use the default settings and be done with it. It’s simple to use and you can place it on any page or post using a shortcode. You can also place the form in a widget.
All the options you need for a basic contact form are there. If you need more, you’ll have to go for the Pro edition for $30 per year. This one does not have built-in captcha, but it is compatible with other plugins that the company offers. The Pro edition has adjustments for colors and fonts, and you can add tool-tips.
It also has a form preview so you can see what your form will look like before publishing.
It’s simple to use and has over 300,000 active installs and a rating of 3.7/5. This is yet another good choice for setting up a contact form on your site quickly.
This one lets you create and modify forms easily and place them on pages or posts with shortcodes, or you can embed them within your themes using the php function. It has both a free and a Pro version. The Pro version adds 20 themes.
The form builder allows you to create or edit a form. It comes with 10 forms built in. There’s a good chance that one of the 10 forms will be close enough that you won’t need to modify much.
You can move the fields around easily by selecting arrows. You can also edit or delete the fields, or apply your own custom HTML.
It places a button in the visual editor where you can select your form from a list. This means you don’t have to go back to the form manager to get the shortcode.
It’s intuitive and has over 40,000 active installs with a rating of 4.3/5.
This free plugin uses AJAX and is one of the simplest contact form plugins that I’ve seen. You input the email address that you want the messages sent to, modify the message if you want, and then paste the shortcode into your pages or posts. You can connect it to your Google ReCAPTCHA account, use your own styles, and use client side validation. All data is scanned with Akismet.
The forms look nice, but you can’t add your own fields. The only things you can turn on or off are the captcha and the fact of confirming the email address. You can over-ride the From address if you want to use something other than your default email address. It includes email, email confirm, name, and message.
That’s it. Short and simple. One contact form. No more and no less. Seems pretty solid to me. It’s no wonder it has over 40,000 active installs and a rating of 4.7/5.
This one has both a free and a Pro version (which has over 200 features). Even though it has so many features you can get started within minutes using the built-in demo. The free edition only allows you to have 2 forms. It has unlimited fields which you can edit, add to, or delete. You paste the forms into pages and posts using shortcodes.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
Creating and editing forms is simple using the WYSIWYG editor. The style adjustments are only available in the Premium edition. You can add fields just by clicking on them from the screen on the right. They will appear at the bottom of the form, where you can then modify them any way you want. If you want them in a different location you can move them with drag-and-drop.
Once you’re done with the form you can generate a shortcode or you can simply click on the forms button in the visual editor and choose the form you want from the dropdown menu.
The demo is simple and clean. Even though it has Subject as one of the fields it is set as optional. You could easily just use this form as-is. If you decide you don’t want that field you can remove it easily just by selecting to edit the form from the Contact Bank dashboard and then deleting the field.
It has over 20,000 active installs and a rating of 4.2/5.
Contact Form Maker is a free plugin that currently has over 20,000 active installs, over 257,000 downloads, and a rating of 4.1/5. This one allows you to create and edit contact forms with no programming required. It has an unlimited number of fields, uses captcha, integrates with email, uses conditional logic, and includes 37 themes that you can customize with drag and drop and CSS. You can place it within pages or posts using a shortcode.
To get started you can use a pre-made form or choose a template.
The forms look fine. You can easily add to them or move things around if you’d like. The drag-and-drop feature makes this extra easy but you don’t have to use if if you don’t want to.
As you can see, this form is pretty basic, but it’ll definitely get the job done, especially if you don’t have really complicated needs.
If you’re simply looking for a way for visitors to ask questions or provide feedback, this form should suffice quite nicely.
There’s a Pro edition that adds field types, file uploading, Google Maps, and PayPal.
It’s simple enough to use but if you want something that looks unique you’ll have to do a lot of customizing.
Using Contact Forms in Themes
Some themes have contact forms as page templates. Others have nice builders where you can make your own and style them in any way you want. Here’s our personal favorite:
Upfront is our fully customizable theme platform, which allows you to build your site from the front-end using drag-and-drop. You can easily create page elements that include your very own contact form by simply placing the fields and making selections from the editor.
You can choose where to send the results, whether to show the subject field, add Captcha, choose how validations works, choose from three different field label positions, and adjust CSS and anchor settings.
It also includes a comprehensible style editor so you can customize the look any way you want.
You can adjust fonts, colors, and images, and even save the style with any name you want so you can reuse it, use it as a template, or have multiple versions to choose from.
The most amazing thing about Upfront is how easy it is to setup. It’s very clean and simple. The interface is intuitive.
Creating Your Contact Form With Code
Another option is to create your own contact form by hard-coding it into your theme. Why would you do that when there are so many free plugins? Well for one, you don’t really need all of the features most plugins offer. For another, you don’t have to worry about updates. Also, you won’t have to worry about the quality of the code because you did it yourself. And that’s probably the best reason – you did it yourself. This is a great opportunity to get your hands dirty with your very own coding project. So let’s do it.
Simpler Forms – What’s Actually Needed?
The truth is we don’t need dozens of fields in our forms. Think about the last time you filled out a contact form. You probably input your name, email address, message, and captcha. That’s probably it. Four fields total. When readers see drop-down boxes that ask you what kind of question this is or what the subject is, and then they have to input their phone number, they might just get distracted and move on.
I know I don’t like giving them my phone number. What do they need it for? Are they going to call me? I don’t want them calling me! I wonder how many of those phone numbers in their databases are real numbers of the readers that filled out the form? Don’t get me started on physical addresses!
The truth is, those complex forms scare customers and readers. They’re afraid of things like sales calls and don’t like them, especially if they didn’t ask for them.
Code It by Hand
Instead of using a plugin, you can create the contact form by hand and hardcode it into your theme. The advantages of building your own include:
- Creating a contact doesn’t require the extra load that a plugin might put on your site.
- The UI within the plugins isn’t needed.
- You learn more by doing it yourself.
- You might have to make too many adjustments to customize it anyway.
- You’ll have one less plugin to update.
All you really need to do is create a child theme that will be a page template. We’re going to use the TwentyFifteen magazine theme. We’re also going to add a stylesheet.
The 2013 edition of this article used Twenty Twelve. We’re going to try out that code and see if it still works. If not, we’ll see what changes we need.
First you have to create a folder and add files to it. Create the folder somewhere on your computer and call it “contact-form.” Inside that folder, create two new files — style.css and page-contact-us.php.
Inside style.css, paste the following:
Change your template name and import url to match the name of your theme.
Next, zip the folder and upload it to your site as a theme and activate it. Note – you must have the parent theme installed.
Alternately, you can download the files from here. All the code from the original article is original. The only thing I changed was the references to the new theme.
Next, create a page called Contact Us. This relates with the contact-us.php file that we included in the child theme. You don’t have to include any content on this page. Just hit the publish button.
Using the code from that article and the Twenty Twelve theme, the results look like this:
Then I modified the code with the information from Twenty Fifteen and it still works:
The code is simple enough to use and works just as well in 2015 as it did in 2013. You can see from the image that it only includes the features you really need:
- Human Verification
Each of these fields are required. The advantage of this code is that it’s lightweight. You can always modify it and add or remove features as you need.
I recommend going through the article to learn more about the code and how it works. Of course you can always just download the code, make the changes you need for it to work with your site, and upload and activate your new child theme.
Well there you have it! Several different ways you can add your very own custom contact form to your WordPress website. Plugins are simple and easy, but can have extra code that you don’t want. Themes that have them built in, like Upfront, can look amazing. If you just want a simple contact form with low overhead, simply code your own.
What kind of contact form do you use? Have you used any of the methods I’ve discussed here? Did I leave out your favorite? I’d love to hear about it and your experience in the comments below.