Best Practices for Designing Web Forms

Have you wondered why you're not getting more leads from your web forms? If you have great online marketing and a top-notch website, but your web form is hard to fill out, off-putting in some way, or simply doesn't work, then your online marketing funnel is broken, and all those wonderful leads you've attracted to your website end up going nowhere.

Bounce rates for lead generation pages average between 30 and 50 percent. The problem here is two-fold: prospects don't take the time to complete web forms accurately or they don't complete web forms at all.

How do you design a user-friendly, appealing web form that captures as many leads as possible? Learn about web form basics, best practices and common mistakes so you can get closer to your online marketing goals.

Short and Sweet

ImageScape improved a clients’ conversion rate by 120% by reducing the number of form fields from 11 to 4. And Expedia saved $12 million a year by deleting one form field.

Source: Unbounce

The more fields you include on your form, the lower the chances people will fill it out. Only ask questions that are absolutely required. Consolidate information into one field instead of multiple fields wherever possible. 

Don't Default

Don't have your form question default to a certain answer. Let your visitors answer the questions themselves. Don’t assume people take extra time to look at all available answers for every question. For example, if you ask “Who is your favorite Star Wars character?” and the dropdown defaults to “Darth Vader”, you might get a lot more "Darth Vader" answers than intended just because people didn't see the other options. For dropdowns, always default to "-- Choose an option --" or "-- Select --" and require them to select an answer from the dropdown.

Labels Matter

Labels tell people the purpose of the form field. They should be short and descriptive. They should also always remain visible, even after filling out the field (see section on placeholder text below).

Label Style

It should be easy for people to scan your form and quickly tell what information is being asked of them. By putting labels in bold, it makes it easy to see the difference between the field label and their answer. Always write form field labels in sentence case (Email address) or title case (Email Address); never all caps (EMAIL ADDRESS). All caps reduces the shape contrast of each word which makes your form harder to make sense of.

Placeholder Text

Placeholder text is a field label that's inside a text field. It disappears when you place your cursor in the field. It produces a clean looking form, but one of the only times it is appropriate to use placeholder text is with username and password forms.

Text Field Placeholder Text

The problem with using placeholder text in longer forms is that once a field has been filled out, the placeholder text isn't visible, so you can't be sure exactly what the field label is supposed to be. Thus, you can't double-check to make sure what you've entered is correct. 

Floating Labels

An alternative to placeholder text is floating labels. Floating labels start out the same as placeholder text, giving the same clean look, but when you type in the field, the label moves up above the input, so you can still tell what the field label is.

Floating Web Form Labels

Keep Layouts Simple

It's best to keep forms in one single column. One of the many problems with multi-column forms is that people are likely to interpret fields inconsistently. If your form has horizontally adjacent fields, then you force the user to visually scan in a "z pattern", slowing their speed of comprehension.

Below are a few ways people may interpret multi-column forms.

Exceptions to this rule are (first name | last name) and (country | state) fields. In these cases, users have an easier time interacting and understanding field groupings.

Spacing

Keep labels and input fields close together. It’s important to make sure there is enough height between the fields so that users don’t get confused as to what information should go where.

Give Immediate Feedback

Use inline validation, which immediately displays a message on the form if something needs correcting or got missed. This saves people time and hassle, and increases conversion rates. Without inline validation, you have to wait until you submit the form to find out if you filled out anything wrong, which makes people abandon your form out of pure frustration. 

Buttons that Make People Take Action

The action button is what submits the form when someone is done filling it out.

Style

The main rule for action buttons is to make sure it looks like a button. Don’t get so creative that people don't know if it's clickable or not. It's also critical to make sure that your button is high contrast compared to its surrounding elements. Make your call to action clear so there is no doubt in peoples' minds how to submit the form they just filled out.

Naming Conventions

The wording of the text on your button has a huge impact on the conversion rate of your form. Avoid generic words like “Submit”. Instead, be more descriptive, like “Subscribe now” or “Create your FREE account”. The more relevance and value your button text has, the more likely people are to fill out your form. The key here is testing. Try out different button copy to see how it affects form conversions and adjust accordingly.

Conclusion

A lot of people don't want to take the time to fill out web forms or give away their personal information. But if you can make your forms simple and engaging, you'll get a lot more submissions. Be conversational. Have fun. Test different elements, see how users react, and refine your form as time goes on. Soon you won't find yourself asking why nobody's filling out your form anymore!