Get the latest web news, tips & tricks in your inbox. We promise never to spam you or sell your email address.
Forms are all around you
Let's walk through your morning routine:
You pour a big cup of coffee, sit at your desk, log in to your computer, sign in to your email account, browse Instagram, and Google funny memes to share with co-workers.
Notice all those forms?
A form is a web page with boxes you can type into. You use forms all the time. Well-designed and tested forms you probably don't notice. But I'm sure you'll recognize a bad form when you run into one.
Bad forms make people frustrated. And bad forms can have consequences for your users. They stop filling them out. They leave your site. They use fake information. They abandon the cart. This is not good for your website or for your business.
A form is a conversation between you and your website visitors
Forms completed on your website can be an important element to help measure the success of marketing campaigns, online sales, and more (depending on your strategy). Just like in real life, you want your conversations to leave a good impression.
Improving your forms can increase conversions while maintaining the quality of leads.
One contact form study showed that reducing the number of fields from eleven to four increased the conversions by 120 percent.
We want your forms to be successful too, so we're sharing some tips about how to create forms that are usable and will help you increase your conversions.
Who is filling out your form?
What else might your visitors be doing while trying to complete your form? They could be browsing Facebook, listening to Spotify, checking email, researching a purchase, etc. They are not eagerly awaiting a form to fill out online, that's for sure.
Keep this in mind when you're making your form.
Completing a form online is like starting a conversation.
It's normal to ask someone their name, maybe what they do. You wouldn't ask for their annual salary or home address (they might start questioning your motives).
It's the same with your form, how much information are the visitors willing to give? What information do you need to help them complete their task?
Tip: If you have personas for your website, you can use them to walk through any forms on your site. What are personas?
Remember: Questions have a cost
Every field you include on your form is data that will have to be processed and stored. In addition to storing and moving around all that information, there are hidden costs for your site users.
If you have too many questions, you'll lose people. Or if people think a question isn't necessary they'll submit fake data (have you been getting any fake info on your forms?). Now you have to spend time cleaning that up and aintnobodygottimeforthat.
Make the form easy to complete
Only include necessary questions that collect useful data.
Talk with the people who will use the information after it's submitted. This could be your customer service team, sales team, or an administrative professional. Why do they need that piece of information? Who uses it? What happens if bad information is submitted in that field?
If you're talking to someone at a bar, and they ask for your number, you expect them to use it.
Just like if you ask for information on a form, your users will expect you to use it. If I give you my email, I expect to get an email confirmation that you got my submission. If you aren't sending me an email, let me know why you need it. Otherwise, why ask for my email in the first place?
For more complicated forms (or for forms that may run into a disagreement about what information is needed by administration or management), try using a question protocol.
Question protocol: How to find unnecessary form fields
In the book, Forms that Work by Caroline Jarrett and Gerry Gaffney the authors define a question protocol as a list of:
- Every question you ask
- The people who use the answer for each question within your organization
- What they use it for
- Whether the answer is required or optional
If the question is required, the question protocol shows what will happen if the user enters fake information to get through the form.
Example question protocol
Start by listing all current form fields (answer column), then go through one by one and complete the rest of the information. After you've gone through all answers, look back and determine which fields are needed/required to complete the task.
|Answer (Required fields with *)||Who needs it?||For what (notes)?|
|Title||Registration office||Do we need to ask for titles? Seems more formal.|
|*Name||Registration office||Communication to confirm registration|
|Fax number||Registration office||When was the last time we sent a fax to an attendee?|
|*Telephone number||Registration office||Call in case there are any questions with registration.|
|Registration office||Email to confirm registration.|
10 Tips To Help Improve Your Web Form
1. Put labels where people see them
Eye tracking shows that users focus on the labels and fields, and barely look at the rest of the form.
Users see labels above and to the left of fields.
Nielson Norman Group found that using labels as placeholders in the form fields hurt usability more than helping it. One reason is that eye tracking also shows users eyes are drawn to empty fields, so when placeholder text is used, the field looks complete and is easier to miss. Read all seven reasons why placeholder text hurts usability.
But there's an adaptive approach that combines a label in the form field when not active, and then adjusts after content is in the box. Warby Parker uses it, and we've implemented something similar on one of our recent forms.
2. Validate the field when the user is done
It would be strange if you were talking to someone and they kept interrupting you to ask your name while you were trying to tell them your name.
So validating the field after the user is done is a fancy way to say "please don't interrupt/correct me until after I'm done entering my information." One of my biggest pet peeves is when I'm in the middle of filling out a field and the form is telling me it's incomplete. Yeah, I know, I'm still filling it out. Your users may not mind. Again, here is where testing comes into play. But validating early is appreciated and saves the user time from waiting until the end to make any corrections.
Image of form that validates while the visitor is filling it out.
Image of a form that validates field after it's complete.
3. Make the clickable area an appropriate size
This is really important for mobile devices. Your finger is bigger than you think! Be sure to test your form on mobile to ensure it's easy to complete and submit on a smaller screen.
4. Have the field size match the amount of content needed, and give guidance on what input you're looking for
If you're asking for an email or telephone number, you don't need a big text box. Size the field to match around what you'll need.
And for the phone number field, will you allow dashes and dots in numbers? Or no symbols at all? Make it clear to users how they should complete the fields. This will save them time by not having to go back and correct those errors.
5. Take users to specific errors, and provide helpful feedback
Oops. You missed a field. But it might be hard to see now that you're at the bottom and/or top of the form.
If someone misheard your name in a conversation, you'd correct them the first time, not wait until the conversation was done.
The same thing applies with forms. Provide error messages that address field-specific issues, and take the users to those fields so they can fix them quickly. You can also give more general error messages, but make sure it is easy for users to find what needs to be corrected.
Also, be nice. It's not the end of the world if your visitors forget to fill in a field or don't complete one correctly. Give them guidance on what they need to do to successfully submit the form. Avoid using exclamation marks and ALL CAPS, it's rude to yell at people when you're in a conversation.
6. Let users know what's required (and/or optional)
There are different opinions in the industry here. You'll see different strategies for different forms. The only way to know what will work best for you is to test, test, test!
Three options for labeling fields:
- Label only required fields
Most visitors will understand the asterisk means the field is required. If your users question why you need some of the information, give a brief explanation of why you're asking. These tips can be displayed inline, as tool tips, or as dynamic descriptions that only show up when you are using the specific field.
- Label only optional fields
There's some research and testing to support the idea that users will complete more information if you only label the optional fields.
- Label required fields with an asterisk and label optional fields
Jarrett and Gaffney (Forms That Work, 2009) recommend marking required fields with an asterisk and labeling the optional fields since that is the convention most web forms follow. They say that only labeling optional fields is “unusual, and therefore, confusing.”
Whatever approach you choose, be sure to test your form to determine if it is the best strategy for you.
7. Break up long forms, and provide progress indicators (if necessary)
If you put too many fields on one page it can intimidate your users. It's like your filibustering your site visitors, and that's not very polite.
Group like fields together, and hide additional fields until they are needed. If it's a long form with multiple screens, make sure users know where they are and how much is left before the form is complete. If you don't tell them, they'll probably leave (I know I do).
Imagine you're going to hire a wedding DJ. What would you talk about in the first conversation? What information would you need next? There are phases of information that the DJ will eventually need, but it would be very intimidating to try and talk about them all the first time you meet.
I loved my recent wedding DJ, but I started sweating when I saw the form he wanted me to complete on his website. He had relevant fields grouped together, which was good. But there was lots of room for improvement.
So many fields presented at once. No way to save my progress. And I didn't know I'd need to know so many of these details, I thought I was just sending music. I skipped a lot of the fields and just emailed him the extra information later. I'm sure with some help this form could improve his goal of keeping all of this information together for his events.
Tip: Give your visitors a heads up about any specific types of information they'll need before they get started.
8. Only ask for the information you need
Worth repeating again. If you're in doubt, check that question protocol.
9. Don't settle for a "submit" button
Say hello. Download the E-Book. Get Started Today. So many button text options.
Carefully-crafted button text can also help increase your conversions. Through testing, you can find out what will get your visitors to take action. Make your button stand out from all the other submits! Align your action with what your users want to do. Just be sure that you're clear, and maybe get a little creative. Who doesn't appreciate a good submit button?
10. Close with an informative thank you
Your conversation should end smoothly. Don't just drop your drink and run out of the bar.
Acknowledge the user's efforts. Let the user know what will happen next and make sure to follow up as appropriate. Offer a helpful link to your website, like going back to the home page. Or offer a contact for help if they encounter any problems.
Not sure where to get started? Check out these examples of successful thank you messages.
Now that you're armed with tips for creating and improving forms online, go forward and start improving your conversions!
If you need any help, you know how to get a hold of us.
What other form tips do you have to share? Let us know in the comments.