Designing forms that convert, 7 proven techniques

Wdd Logo.
March 18, 2014
Designing forms that convert, 7 proven techniques.

thumbnailWeb forms are the stars of any respectable landing page though they're often taken for granted. They receive all the personal information of your leads or buyers, so that you can start to move them down the sales funnel. Depending on how you design your web forms, you can expect greater or fewer conversions.

In general, hardly any site visitors want to spend too much time filling out web forms, so you'll have to focus on brevity first and foremost. Of course, you may also want to balance that with the knowledge that longer forms tend to receive higher-quality leads. At the end of the day, designing web forms should be about the user experience above all else.

They should be very visible, but not intrusive; clear-cut, but not dumbed down; and minimalistic, but still not boring. Follow these best practices, and watch your website's conversion rate begin to noticeably improve.

Remove confusing fields

Sometimes, failing to pay attention to what specific fields you include on your web forms can cost you a whole lot of money, as none other than Expedia found out. A while ago, the online travel company had a "company" field right under the "name" field on its web form on its site. This "company" field, in spite of it being totally optional to fill out, confused many would-be Expedia customers who actually entered their bank names in this field.

As a result, they also went on to input the address of their bank in the "address" field; they were supposed to input their home address in that field. Unsurprisingly, credit-card processing failed because address verification failed since the information in the field was not the cardholder's address.

Long story short: This confusion on the company's web form ended up costing it $12 million in lost profits per year. Expedia was only able to find this problem and correct it after performing thorough data analytics. Moral of the story: When designing your web forms, don't pull an Expedia and make them confusing enough to lose successful conversions and profits.

Keep web forms shorter rather than longer (an exception applies)

Web designers can help increase conversions for a website by focusing on the specific length of web forms. In general, it is highly recommended that all web forms are shorter rather than longer. Research like this case study has confirmed that site visitors are very fond of shorter web forms that have fewer fields.

Imaginary Landscape is a web design and development firm that experimented with various lengths of contact forms on its website. The first form they used was an 11-field one; the second they used was a mere four fields long. Guess which one scored the most conversions? If you said the four-field one, then you're spot on. The conversion ratio jumped by a whopping 120% compared to the 11-field contact form.

It's also interesting to point out that the quality of the submissions stayed constant in the drop from 11 fields to just four.

Today, Imaginary Landscapes uses a mere, three-field contact form on its homepage.

However, other research does suggest that shorter web forms can actually reduce the quality of your leads who fill out your shortened forms. Essentially, what this means is that there is a tradeoff between quantity and quality when you cut down on the number of your fields. So if you want higher-quality leads—as in leads who provide more information about themselves and are more likely to actually convert—then you may want to stick with longer forms nonetheless.

Consider side-by-side field captions

It's also very wise to consider implementing side-by-side field captions in your web forms. This is a smart alternative to what too many designers do incorrectly, which is to place the field labels on top of the fields. As a result, the entire web form will appear longer than it really is. This is a practice best avoided by putting any field captions horizontally and on the same line as the blank fields.

An ideal example of this web form best practice can be seen in the sign-up page of Spiro Fit, which is an online fitness network. Interestingly, the Spiro Fit web form is quite long due to the number of fields that it boasts, yet it still manages to stay mostly above the fold because the field labels are right next to the blank fields.

Make your web forms stand out by being unusual

Sometimes, there is absolutely no substitute for being unique. When you're unique, you draw attention to yourself, and that makes you memorable. This applies to web forms as well. When all of your competitors are designing theirs to look and feel the same, your very unorthodox approach to web forms can be a very pleasant change for your site visitors and users.

Case in point is the account login for SVN2FTP. Right away, the user is drawn to how attractively unorthodox the fields are. Instead of entering their information into a plain, old, boring box, users can enter their information into fields that are made to resemble notebook pages. This unexpected fun factor alone can increase subscribers to a service.

See that site security is the highest priority

The most obvious aspects of web form best practices seem to go unnoticed by some designers. If the information that's submitted to web forms is ever compromised, then your site has a disaster on its hands since stolen personal information means your business takes a humongous hit. It may not even recover. These days, you just can't err too much on the side of caution when it comes to your site visitors' personal data.

It's a good idea to utilize an SSL certificate on your whole domain. With this, your users aren't going to just be protected when they sign up, but their whole viewing session is going to be protected thanks to https. Essentially, if your SSL certificate is working, a browser's address bar will turn green, like this.

While a precaution like this isn't a must, it definitely doesn't hurt to go a little bit further to protect the personal data of your site visitors, leads or buyers. Your users will feel a bit safer trusting you with their personal data, and this works to build trust over the long term.

Ensure that everything is clearly labeled

There's nothing worse than web forms that aren't labeled very clearly. Unclear web forms and fields inevitably lead to user frustration due to a very poor user experience. In addition, the friction in the transaction increases, meaning that successful conversions will be hampered, too. This can't be stressed enough.

The format that your users will rely on to enter their information has to be crystal clear. There should not be any doubt whatsoever about what is supposed to go in which blank field. You shouldn't leave it up to chance at all. Including just a few extra words next to blank fields can make all the difference when it comes to getting site visitors to properly input their personal information.

Take this example from The Bullitt Agency, which describes itself as a boutique agency for the top international DJs and producers. Looking at the Agency's contact form, you can tell that its designer is a big believer in the axiom of "less is more." The contact form is very short with only four fields, but the best part is how its ultra-simple approach means everything is labeled clearly.

If filling out a field is up to the user's discretion, then it's clearly labeled with an "optional" tag, and even something like putting the word "your" in front of email address can markedly cut down on confusion.

Take designing web forms seriously

Although lots of people dread filling out web forms, they shouldn't be taken for granted. In fact, that is precisely the reason why it demands that you spend extra time on them to make them as painless as possible for site visitors. It's really not rocket science, when you think about it; it's just using common sense to ensure that your users are not turned off by unsightly or irritating web forms.

Web forms that fail to follow these best practices in the industry will have a negative impact on basic things such as the user experience and conversions. This will work to increase friction, and that will only lead to fewer subscribers, leads or buyers. Taking a bit of extra time and care to make sure that you design effective web forms is definitely necessary.

Featured image/thumbnail, design image via Shutterstock.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.

Read Next

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…