Form types
Search form
The most simple form that many sites have is a search form.
Whether it’s in your sidebar or only on your 404 page, this form typically has a single text field (known as an input) + a submit button. The function it performs is far from simple, but thankfully we don’t have to stress about that today.
Opt-in form
Collecting a site visitor’s email is the core purpose of most opt-in forms.
You may ask for a few additional bits of information — like their phone number, first name, last name, or a social media handle — but at the end of the day, this form could be as simple as the search form. All you need is their email address + a submit button.
Contact form
The last type of form you see on most WordPress sites is a contact or inquiry form. The complexities vary quite a bit for this form type + there’s no way I could even list out all of the options you have in a single blog post. so I won’t.
What’s important about this form type is that it’s purpose is to get the site visitor in touch with the site owner (sometimes through their VA or PR person.)
The basic necessities of this form type are a contact option (like a phone number or an email address), a message box + a submit button. Adding anything else to the form is like a geeky form of icing on the cake.
Overlooked form details
Now that you know the 3 types of forms your WordPress site might have, it’s time to make sure you have your form details covered.
Error message
What happens if someone skips over a required field on your form? In an ideal world, your form will tell that person what went wrong + how to fix it. Otherwise they’ll likely get frustrated + not stick around to figure out what’s not working.
The error message isn’t the best place to get quirky, but adding in a bit of brand pizzazz never hurt…as long as the message is still concise.
For example, let’s say swearing is your forte. Why not change your form error message to say something like “Oh shit, you forgot to fill out this required field” + have it show right next to the required field in bright colors?
Another type of error message is what’s shown when there are no search results from a term typed into a search form.
This message is built into your theme PHP files, but again, it’s a great place to add some personality while also offering up a helpful suggestion. Keeping up with our swearing concept, “Fuck! I don’t have any blog posts with that info! Send me a note with the details + I’ll send some pointers your way” … with a link to your contact form would be helpful + far from boring.
Confirmation message
The confirmation message is just like an error message, but it means something good happened instead. It’s what’s displayed when your form successfully submits (aka when the form does what it’s supposed to do.)
There are 2 ways to treat the confirmation message — by either displaying a message on the same page in place of where the form used to be or redirecting the user to a new page so they know the form worked.
If you use the same page message option, I always recommend styling the message with a change in color, font-weight or size to get the attention of the person filling out the form.
Want to go with the new page route? Then think of what content would be useful for someone filling out your form.
Let’s say they signed up for your newsletter, you could route them to a page with a simple checklist of what they can expect next + a link to your latest newsletter. Or maybe the visitor filled out your contact form + you want to thank them by sending them to a page with your favorite YouTube video embedded on it. It’s your website, you call the shots, boss!
Form notification
The last detail that most folks forget when they are planning out their forms is who needs to know about the form entry.
When it comes to search forms, you typically don’t need to know that someone used the search box in your sidebar, so this doesn’t apply to that form type.
And odds are that your mailing list service either emails you a summary of how many new subscribers you have OR you don’t want to get those emails as inbox clutter. But if your ESP doesn’t, you can set forms to notify you of new opt-ins if you’d like.
Where the notification matters most is for our contact/inquiry type forms. But, it’s not just about you — the form notification might need to go to multiple people. (Ooh yeah, we’re gonna get nerdy right now.)
Maybe your site features an application process for your upcoming group program + your VA looks through the applications to hand-pick the best candidates. When the application form is filled out, you’ll likely want your VA to get an email with all of the form details. No problem!
But what if you want all applicants to get their completed application form too? It could act as a secondary confirmation (Hey look, you really did fill out the form…here are your answers.) So instead of setting up your form to email only your VA, you’ll want to make sure it also sends a copy to the person filling out the form — which means the email address field needs to be required so you know where to send it.
Do you see why planning out these form details is important? There are plenty of moving pieces!
From start to finish
The next time you find yourself needing to set up a form on your site, work through these steps to address all of the form details that you’ll need before you can start collecting that info!
- Form fields (What do you need to know + what needs to be required)
- Form error message (If a required field is blank, if a field with a character limit has too much text in it, if the form didn’t submit)
- Form confirmation message or page (What type + what content to show)
- Form notification (Email subject, recipients, show all form content or just some of it)
Once your form (and all of your form details) are in place, run through a test or two. Try making mistakes when filling out the form, see how long the confirmation + notification takes to send/load, ask yourself what is crystal clear as a user + what is confusing.
The more questions you answer during testing, the fewer you’ll have to answer when folks are trying to use your site!