When Less Is More: The Dos and Don’ts of Designing Web Forms

Out of all the user-interface elements on your website or in your app, perhaps none are as tricky to get right as the web form. On top of that, it’s quite low-key, as forms are ubiquitous and familiar to virtually all site visitors. However, that small piece of screen real estate possesses quite a lot of power, which is why it’s vital to design it effectively.

Forms hold the key to collecting lead-generation data. Everything from email addresses to names and phone numbers to specific customer preferences are shared with you, courtesy of these forms. When websites have this information, their marketing departments can usually follow up with these leads, hoping to nurture them down their conversion funnels with greater confidence.

The job of forms is to get as many conversions as possible. Here we’ll look at hard data that will help you design them in a smarter way than ever.

Less really is more

On the web, people’s attention spans are very short. Your visitors will tune out your content if you don’t get to the point quickly. According to a Microsoft Research study by Chao Liu and colleagues, users will leave a page in just 10 to 20 seconds, not leaving designers with much time to successfully persuade their visitors to take a specific action. UX-research company Nielsen Norman Group concluded that, therefore, designers only have 10 seconds to clearly convey their value proposition or risk losing these visitors.

A fundamental aspect of clearly communicating the value proposition of a page is reducing content, so that you don’t overwhelm your visitors.

One of the best ways to do this is to shorten the number of fields in your forms.

Instead of forcing your visitors to screen many fields in a form to determine what data you’re asking for, only prompt them to share basic information.

That begs the question, how many fields are considered short? Let’s look to the data for help.

According to a Marketing Experiments study about Marketo, the marketing automation platform, the lead-generation form with just five fields outperformed forms with seven and nine fields, respectively: 13.4 percent to 12 percent to 10 percent.

Armed with this data, HubSpot concludes that shorter forms persuade more people to fill them out, so your page will generate more leads.

However, the downside of this is that the quality of the leads, as well as the data they provide, will likely be lower quality. When you’re only getting basic information about your leads, you won’t be able to follow up with them as effectively as when you know more in-depth details about them.

And that brings me to your next consideration.

Longer means high quality

If you’re a designer working with a website that already gets a substantial number of leads from forms — so much so that your team is struggling to sift through the data to discover relevant leads — then you may want to actually switch to longer forms, in spite of the above data. While it’s true that fewer people will fill out your forms, which will result in fewer overall leads, you’ll get higher quality leads since those people taking the time to fill out the longer forms are obviously more interested in your services.

This will net you more in-depth data about leads that your marketing team can use for more relevant follow-ups.

Certain studies also support using longer forms with more fields.

A video case study, also from Marketing Experiments, details the case of a large press-release organization that succeeded in driving up conversions on its form by a healthy 109 percent — which it did by going from 11 fields to 15 fields. When it tested out a second variation, going from 11 to 10 fields, it only saw an increase of 87 percent. Applying this data, we can actually argue that using fewer fields — 10 versus 15 — would result in a conversion drop of 20 percent.

The video case study is long, more than 41 minutes, so I’ve identified the important takeaways for you here.

Form design best practices

What the conflicting data above shows designers is that it’s always vital to test, test, and then test their design iterations again.

In other words, there are more factors than just form length that determine a smarter (read: higher converting) form. To that end, here are some best practices when designing forms to ensure you optimize them for the lead generation:

• Use large forms, fields, and copy for easy reading.
• Be persuasive and clear-cut in your calls to actions to reduce confusion.
• Use forms that work seamlessly on mobile and desktop.
• Provide value to your leads when filling out forms.
• Tailor forms to their unique purposes (for example, an email signup form is much different than a new account form).
• Use autofill properly.

This last bullet point demands its own section.

Autofill dos and don’ts

Ah, autofill. That aspect of filling out a form that can lead to frustration more times than anyone can count. Sometimes one of the most challenging features of a form to get right, autofill can make or break your form’s UX.

Here are some dos to always follow when designing with autofill:

• Do enable autofill in browsers like Chrome and Firefox, ensuring that fields are tagged with terms most browsers would recognize (name, email, phone number, etc.).
• Do ensure fast autofill suggestions by displaying a drop-down list of suggestions as soon as your user types in the first letter of his word.
• Do ensure relevant suggestions that make sense for a user’s history and profile.

Now, here are some don’ts to ensure you don’t make life hard for the users filling out your forms:

• Don’t use auto-advance, which automatically advances the cursor to the next field, as some users will fight it because they don’t expect it.
• Don’t distract users by providing big visual separators or padding between autofill suggestions (using alternating row colors is a huge no-no).
• Don’t forget to use clearly marked labels in each field to help users understand what they have to input.

Consider many factors to design smarter forms

Forms are often one of the most crucial elements on the websites, landing pages, and apps you design. They are lead-generation magnets, helping sites and apps get the conversions they need to stay in business.

Designing forms is never an exact science — there are many factors that impact a form’s UX and conversions. As the designer, it falls on you to be extremely circumspect and see all the possibilities of how form and field length, copy, and autofill can positively or negatively affect this.

To help you optimize your forms with greater accuracy, be sure to always test out competing iterations that you design.

For UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.