Navigation

Designing forms that convert, 7 proven techniques

By Marc Schenker | Web Design | Mar 18, 2014

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.

Share this post
Comments (no login required)
  • Dave

    Article seems to be lacking links

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      Apologies, they’ve been retrieved.

  • Ivanov Karmazov

    I feel like there are links missing in this article. Or maybe it’s just me.

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      They were missing, apologies, we’ve put them back.

  • Shakil

    Can you provide some visuals or examples to better grasp each of the techniques?

  • bgbs

    One of the most important things is to make the web forms mobile friendly. The biggest UX problem with forms, is the literal pain of filling out a form on a mobile device. So make it easier for customers by making the form shorter, with looser requirements and credentials.

    • http://marcschenkerwriting.com/ Marc Schenker

      Great observation. I like forms that expand to fill the size of the screen with a double-tap. Makes things so much easier.

  • ranaman

    Great article Marc, some very good points mentioned here that we will be taking up here.

    I would also like to add some more to your list from the experiences we have had. Although these may seem obvious, and in some cases are functionality considerations, I still think they are relevant.

    1. A clear description or title telling the user about the form.
    2. Clearly labelled and appropriate error validation messages (and for those validations to appear AFTER the user moves to the next field and NOT after pressing submit).
    3. Sample text within the fields to help the user with what they are supposed to enter.
    4. Tooltip box when the user interacts with the field. To provide the user with more detail.
    5. A clear and visible thank you message, with details of what happens next (this should appear near the submit button and not out of sight or the user may continuously press submit not knowing the form has been submitted.)

    6. If the form is long, and after pressing submit there are fields that require attention, the page should scroll up so #5 is not repeated.

    Raj

    • http://marcschenkerwriting.com/ Marc Schenker

      Thanks for adding your own points, Raj.

      Just want to add, though, that your number three may be problematic for some users if the sample text disappears too quickly before the user can really read and grasp what it’s all about.

      But good list, to be sure!

  • http://www.reynoldsdigital.com/ RD Design London

    Big thanks for great article that ,I reckon, has covered most characteristics to create a successful contact form.
    Back to The Bullitt Agency example, would like to add how subtle, discreet the form is, perhaps, down to it clear and definite location on the front home page

    • http://marcschenkerwriting.com/ Marc Schenker

      Thanks, Barry.

      The things you point out with the Bllitt Agency form are the reasons I put that in the article. :)

  • Seb Kay

    Web forms are usually one big bag of worms that nobody wants to really look at. Not in serious projects anyway. I find people just do what’s easy instead of actually tackling the problem. Thanks for tips Marc :-)

    • http://marcschenkerwriting.com/ Marc Schenker

      Right on, Seb. And then those same people wonder why they’re not getting the leads and conversions they wanted or expected! LOL.

  • http://www.serenademysoul.com Krishna

    This is so unbelievable true. I was trying to book tickets from NYC to Atlantic City and back and Greyhoud had the cheapest tickets. While filling out the form it wouldn’t let me put in my Credit Card information. After hours upon trying different browsers (I worked in QA at the time) I finally gave in and called. Re-routed for 30 minutes and they wanted to charge me a $6 fee to book the tickets over the phone.

    I was LIVID. I e-mail customer service explaining my frustration and they had it so that 1 line in the form (with 2 fields) that could only be filled out RIGHT to LEFT. I told them that was ridiculous and ending up booking with another bus.

    But I’ll never forget what a pain it was and how it felt like a scam. Make it hard to customers to pay online so you can charge a booking fee. Go figure.

    • http://marcschenkerwriting.com/ Marc Schenker

      I hear your frustration, Krishna. And I bet that Greyhound lost a customer for life in you. Just shows you that something as innocent as a little web form can drive away many customers. Thanks for sharing!

  • David

    Hey Mark, good job on the article.

    In my experience, one of the things that I have seen turn potential customers off isn’t necessarily in the “design” or UI aspects; rather, it’s the content that the form is asking a user to fill out. Case in point, had a client who was asking potential customers questions like their company revenue (and some other financials). I A/B tested the forms – one with financial questions and one without financial questions. To our surprise, the client had 45% more engagement and conversions on the form without financial questions.

    Whether or not the type of content being aggregated is deserved to be on the list, I think it is a potential hiccup to a successful conversion ratio, despite how pretty or how usable the form is (although those do tie in well with customer happiness).

    Again, great job on the post.

    • http://marcschenkerwriting.com/ Marc Schenker

      Hello David,

      Thanks a bunch!

      What you’re mentioning can still tie into the overall observation that shorter forms do better. I mean, if a form asks for financial information, then that can be considered intrusive or too personal for some people, thus turning them off and discouraging a conversion.

  • Bianca Board

    Great article. Nothing I hate more than long never ending forms. It’s amazing how a few simple approaches can improve their convertability.