Skip to content

Web Forms that People are Happy to Complete

A master of rhetoric once remarked that in order to convey something effectively one should, “Tell them what you’re going to tell them. Tell them. Then, tell them what you told them.” Remarkably, the same basic formula works for requesting information as well. Tell them what you’re going to ask them. Ask them. Then, tell them what they said.

In order to fulfill customer orders and sign people up for services, we need to get information from them. If we’re upfront about the process, hold their hand the whole way through, and confirm with them at the end, we’re a lot less likely to lose them along the way.

That rhetorical master, his name was Aristotle. He convinced a few people of some things. So, let’s see if we can extend the spirit of this helpful attitude to designing web forms which people will be happy to fill out.


Consider the User’s Concerns

They will size your form up right away. How much of an investment are you demanding. One approach is to bury the complex parts of your form in dense steps toward the end. This allows you to say, “Only three steps to completion.” Your user, though, is always going to remember that the third step was a doozy. That negative brand experience will cost you down the line.

So, you ought to help your user to know — right at the beginning — how long this will take. At the same time, you should do whatever you can to make the process short.


Use Social Media Signups

The sign up options you choose are also an opportunity to establish brand positioning. Signal professional interest by putting a Linked In sign up option right at the top. Signal a more casual experience with a Facebook sign in option. This acceleration through the signup process decreases your bounce rate and quickly gets the user a little invested in sticking around. That first step of investment can dramatically increase your conversion rate.


Keep it Simple, But Even More Clear

Eliminate as Many Fields as Possible. Complexity is more than just the number of elements in your form. It is more helpful to think of complexity in terms of the number of considerations which the user will have to hold in their mind. Requiring the user to think about too many things risks losing them.


Resist the Urge to Collect Data You Don’t Need

Having the most accurate picture of our customers is critical. If getting that accurate picture costs you the sale, though, it wasn’t really worth it. People can tell when they’re being held hostage for market research. Feeling that we’re being taken advantage of is all the reason we need to abandon a cart or drop a signup process.


Layout is Your Primary Weapon

Always display input labels. It can be tempting to save space by relying on placeholders inside of fields. But placeholders are replaced as soon as the user starts typing, so any minor distraction will cause the user to lose their place.

Similarly, a single column layout is preferable to two or more columns, even on desktop. Remember that the total number of decisions that your user has to make determines their experience of complexity. So, reviewing left and right as well as up and down is more fatiguing.

Cluster related questions. This will allow the user to mentally chunk each step in the process, which is much more comfortable to the mind.

Include elements which provide real time input validation. You want to reduce feelings of disappointment in your guest’s experience. So make sure they know if what they’ve typed is valid before they hit the submit button. Grey the submit button until the inputs are all valid. Show a nice green check mark when a field is valid.


Be Friendly

Marking optional fields rather than mandatory ones creates a lighter, less punitive experience. And, if you’ve eliminated as many fields as possible, then most of your fields ought to be required.

Your users will have different levels of trust in your brand. If you need sensitive information, clearly state how you will use that information. Reassuring users that you don’t share phone numbers with third parties will increase your form completion rates.


Account for All Devices and Make Use of All Affordances

Fully take advantage of all available features of HTML. Use input masks to decrease guesswork in formatting. Native features of devices and operating systems are a moving target, but it pays to keep up with them and make use of them to serve your customers. A few ways that you can leverage native features include:

Use location services to complete address fields
• Turn autocomplete on for fields likely to contain common terms
• Turn autocomplete off for name fields and others inputs which will not receive common words
• Allow biometric sign ins and authorization


Never neglect the ‘type’ attribute for field elements. How you set the element type will determine which keyboard mobile devices pull up when the element is selected. There are seven field element types: text, email, tel, number, date, datetime, and month. Forgetting this one detail could cause any number of your prospects to give up on your form out of frustration.

Consider mobile first, but don’t forget about the desktop. If your fields don’t have hover effects, people are likely to think that the form hasn’t fully loaded and isn’t yet active. Or worse, they may just think that you’re cheap and built a low production value site.


Make the Form Accessible

Less obvious factors include ensuring that all of your fields and interaction buttons are clear and usable for people using screen readers or who don’t see color.
Be sure to include ‘alt’ tags for icons. Avoid icon fonts for interactive elements. They can cause a lot of confusion for screen readers. Even if your service isn’t ideal for the visually impaired, you will lose points with search engines for neglecting these accessibility concerns.


Only You Can Prevent Input Errors

Disable buttons on submission. There’s a quality assurance joke that goes something like, “A QA Engineer walks into a bar and orders a beer, then orders 17,042 beers, then orders ‘duck cumquat ceremony’ beers. The point of the joke is that it’s the developer’s responsibility to ensure good data hygiene, not the user’s. If you leave the door open, you can’t complain about what blows in. Disable buttons as soon as they are pressed. Validate all of the field input data, according to field type, on the client side before sending it to the server.


Make Them Feel Good on Completion

Before doing anything that would be hard to reverse, show them all of the information they’ve entered. Make sure that your final confirmation page doesn’t include any more sales pitches or final offers. Make it easy to focus on validating their order information.


Review

Tell them what you’re going to ask them. Make sure they know what they’re in for and they won’t resent you.

Ask them. Make it clear and comfortable. Make them feel like you’re with them through the whole process.
Tell them what they said. Get data confirmation and collect that final affirmation that they’re on board. Building that bit of trust after you’re holding all of their information is critical.

Get out there and make Aristotle proud.