Designing forms that convert, 7 proven techniques

Web 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.