{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

Forms are important online. When well designed they make it nice and easy for people to sign up for newsletters, make a purchase, and so on. 

However, badly implemented forms can be a real barrier for potential customers, frustrating them to the point where they give up. 

Web form optimisation and good design is therefore vital, so here I've gathered up 21 examples of form best practice from a range of different sites.  

We have checkout forms, contact forms, mobile optimised forms and more...

Explaining form fields clearly 

This is a great example from Threadless. The simple text in brackets next to form fields deals elegantly with a number of potential input problems. 

Password strength indicators

We're all familiar with those password strength indicator bars you see in forms, to the extent that some people perhaps ignore the advice. 

Here, Geeklist has a different approach which should encourage the user to try a little harder when creating a password. 

In-line form validation

This saves users the serious annoyance of attempting to submit a form or move to the next step, only to find lots of errors. 

Here, Autoglass either approves or corrects as I complete the form. 

Fixing incorrect email addresses

Kickstarter's forms pick up on obvious email address input errors, which will save a lot of hassle for users. 

Easy input for mobile users

Optimising forms for mobile is all about reducing data entry (OK, this is true for desktop too, but even more so on mobile) to save user's time and effort. 

The Kayak mobile site detects my location and thus reduces time spent in drop-downs. The options are designed for fat fingers too. 

The calendar tool is one of the best I have seen on mobile. Big squares make it easier to avoid input errors. 

Adapting forms for your audience

Wiltshire Farm Foods delivers meals, and has a predominantly older customer base. 

Here it tries to make the payment page, and checkout forms in general, nice and simple to use.

 

No need to shout...

On Flickr, if people get all shouty, or leave the caps lock on by accident, it will convert the message into more civilised lower case. 

Maybe Mail Online needs to look at this... 

Mobile card payment screen

In this example from Murat Mutlu on Dribble, the progress indicator is excellent, while the 'scan card' option could save users a lot of time. 

Recognising card type

On Github, this handy feature recognises the type of payment card as you begin to type the number. 

This saves the customer from filling in an extra field. Anything that shortens the process of form-filling is welcome.

 

Post-its for contact forms

This doesn't improve the UX particularly, but it's a nice little design feature that makes you want to use the form.

Easy repeat purchases on mobile

ASOS stores customer card data (if they consent to this) thus making repeat purchases nice and easy, which accounts for David Moth's colourful trouser collection. 

Once customers have entered login details, they only need to key in their card security code to complete the transaction.

                         

Nice design

This 'rate the beer' form on the Barley's site has an appealing design and works well.

Aligning form labels vertically on mobile

Vertical label alignment works much better on a mobile, meaning that form fields and buttons don't have to be too squeezed. 

Addressing common questions

Sometimes users will want to know why a particular piece of data is required. Providing this information clearly can prevent them leaving the form. 

Here, Moneysupermarket provides this information right next to the relevant field.  

Clear delivery options in checkout

The John Lewis iPhone app shows clear delivery options for each product with the option to click for further details.

Slider tool for contact urgency

This is a neat tool from Wopata on its quote form, just to gauge how eager people are for a reply. 

Tailor input style to form fields 

Here, Walmart displays a numerical keypad for the phone number and zip code fields, making the job easier for customers. 

A simple touch but very effective. 

                      

Mix of data entry styles

This contact form mixes various styles of data entry, making the process much more fun.

Checkout entry page 

This page from Staples' new site is a great example of best practice.

First of all, offering the option of guest checkout is a must for avoiding abandonment as people can be deterred by compulsory registration. 

Here, Staples not only offers this, but also outlines the benefits of registration and lets customers know they can easily create an account later if they want to. 

Live chat in checkout

The House of Fraser checkout is an excellent example of best practice. 

There's no compulsory registration, an enclosed checkout, and nice proactive use of live chat at a stage where customers might have questions about a purchase. 

Mobile checkout

Best Buy has an excellent mobile checkout. The large text fields and clear calls to action mean it’s easy to navigate, while the progress bar shows many steps are left.

It has stripped out any unnecessary information so the pages are uncluttered, and text fields are well designed for touch screen users. 

                       

Our Festival of Marketing event in November is a two day celebration of the modern marketing industry, featuring speakers from brands including LEGO, Tesco, Barclays, FT.com and more. 

Graham Charlton

Published 10 April, 2014 by Graham Charlton

Graham Charlton is the former Editor-in-Chief at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+

2565 more posts from this author

Comments (17)

Comment
No-profile-pic
Save or Cancel
Paul Rouke

Paul Rouke, Founder & Director of Optimisation at PRWDSmall Business Multi-user

Graham, excellent article. One I would have liked to have produced :-) Nothing much else to say really, high five from me.

over 2 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

Thanks Paul!

over 2 years ago

Avatar-blank-50x50

Minhaj

Thank you so much Graham.

I was just thinking to design a web form. This article really helped me to craft my design better.

I liked the Github's and walmart's form.

over 2 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

@Minhaj - thanks. Is it a mobile form?

over 2 years ago

Avatar-blank-50x50

Sonny Nanua, UX Analyst at Nottingham

Good article!

One of my irritants is the not being able to auto tab on sort code or DOB fields – especially on mobile!

over 2 years ago

Avatar-blank-50x50

Dr RWP

Some very useful points here. Another thing to consider is disabled accessibility (e.g. making sure the form can be used on e.g. screen readers etc.)

over 2 years ago

Avatar-blank-50x50

Peter Bell

Brilliant insight and tips Graham, covering nearly all the bases. Might be worth a comment on social log-ins - In theory, they make forms redundant! I wonder what percentage use social log-in versus standard form fill option?

over 2 years ago

Avatar-blank-50x50

Michel Leconte

In the Staples example, It always strikes me that most people are so used to seeing something that they don't even challenge the concept altogether.

My colleagues and I developed our own open source eCommerce system, where the account is created automatically for the client. the shop owner can decide whether to communicate about it and email credentials to the client once they've placed their order.
Clients have access to their shipping address, orders history etc, while reputation and security risk is minimized since the system does not keep credit card info.

End result; checkout is streamlined and diversion-free as clients don't have to even start thinking whether they should create an account.

over 2 years ago

Grant Kemp

Grant Kemp, Omnichannel and Mobile Practice Manager at Inviqa/ Session Digital

Lovely Article Graham.

Especially like the shout about live chat support on checkout.

We need more brands to be doing this.

over 2 years ago

Avatar-blank-50x50

Guy Mucklow, Senior Web Designer at PCA Predict (formerly Postcode Anywhere)

Another great article once again Graham. I'd be interested to see your thoughts on address form design. There are so many variations when it comes to entering your address online but with so much at stake in terms of an incorrect address, I think it is one of the most important forms to get right.

over 2 years ago

Avatar-blank-50x50

Jaimes Baker, Head of Creative at Haymarket Network

On thing that I find interesting is the variety of field header positioning. Most examples have the title above the answer field but some have it to the left and one has the field title within the field box ready to be immediately overwritten.

I personally favour having titles to the left to aid scanning of titles and answers, but is there any view on which is preferable or gets better conversion?

over 2 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

@jaimes - I think it's horses for courses. Title above is better for mobile is it's amore efficient use of space, while horizontal alignment can be better for scanning. Having text in the box can work, though obviously it will disappear when the user clicks in the box, which can be a problem.

over 2 years ago

James Gurd

James Gurd, Owner at Digital JugglerSmall Business Multi-user

Hi Graham

Thanks for sharing.

I really like the javascript solution for checkout that recognises the card type as you enter the number. It reduces the number of clicks + means you can easily tailor the form based on the number being entered.

An interesting trend for retail ecommerce checkouts is for the sign-in page to request an email address only then give the option to sign-in or register. The optimal implementation IMO is to lookup the email address and if it's already registered, display the sign-in fields, if it's not recognised, display the guest checkout option.

thanks
james

over 2 years ago

Avatar-blank-50x50

Jason Ojukwu, Digital Project Manager at Carers Trust

I agree with the points that we raised in relation in e-commerce but I noticed that in having to sign-up to make a comment the Econsultancy form uses several pre-filled placeholders. Any thoughts on whether this aids the user experience or detracts from the required actions?

7 months ago

Kyle Prinsloo

Kyle Prinsloo, Creator at StudyWebDevelopment.com

Really good post, Graham. I make websites and teach others to make websites - will definitely refer them to this page.

Keep it up.

Kyle

7 months ago

Avatar-blank-50x50

Bridie Pritchard, Senior Editor at Sticky Content

I completely disagree with you about the the beer rating. While the icons are nice there is no indication of which way the rating system runs. Is 1 the highest as more beer has been drunk and winners come in first or is it like hotel and Amazon ratings where the more stars the better.

7 months ago

Avatar-blank-50x50

Bridie Pritchard, Senior Editor at Sticky Content

Sorry hit post accidentally rather than preview before I had completely finished.

Also, because of the symbol top top left are you rating it from dark to light rather than on quality.? Think it is all potentially confusing.

7 months ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.