After publishing 12 tips for optimising web forms last week, there were some very useful comments left by readers. 

These comments contained some very useful tips for web forms that I hadn't included in the original article, so here they are...

Optimise forms for mobile

Don't neglect your tablet and even more specifically your mobile visitors.

Think about which aspects of mobile are harder for customers. For instance, text entry can be a real pain thanks to 'fat fingers' so entry fields should be large enough to click in, and buttons bug enough to click easily. 

Here, though Graham and Green's checkout is mobile friendly, the entry fields for email address and password aren't visible so it isn't immediately apparent where touch screen users should aim for:

Meanwhile, Schuh provides a good example of clear buttons for touch screen users on its shopping basket page: 

Disable auto suggest for tablet and mobile users

According to PRWD's Paul Rouke:

When your intelligent device is trying to auto correct your name or email address it just disrupts the user journey and creates friction. 

Auto-correct can be useful at times, but is often more likely to be a barrier to purchase on mobile/tablet. Read this example of an auto-correct issue on mobile forms which was causing abandonment. 

In this case, the customer was unable to add their correct town as the iPhone kept correcting her. Yes, she could have clicked the x, but it's all about making it easier for the customer: 

Make it clear what the next step involves

Paul Rouke:

Don't leave users need to take a leap of faith when submitting a form. They should be 100% confident what they are committing to ie. moving to an order review page or actually placing their order. The use of descriptive button wording is key to this. 

Amazon's checkout is a good example of this. First of all, before the final order page, just as you have entered card details, it says 'you will confirm in the next step' so customers are reassured that they have a chance to review the order. 

Then, as Paul says, the button wording, 'place your order' is nice and clear: 

Provide a progress indicator

This makes it 100% clear to the user which stage in the process they are on, and how far they have to go to complete the purchase. If clickable, these indicators also provide a means of easy navigation back and forth between the checkout pages. 

Here's an example from Simply Piste:


Trust symbols on calls to action

Another great tip from Paul Rouke:

For retailers, on both your 'proceed to checkout' button and your 'place order' button, test introducing either a padlock symbol on the button and/or updating the wording to emphasise this will be a secure transaction. "Checkout Securely Now" has performed well in some of our tests.

Use trust logos to reassure visitors

Paul Rouke:

On the subject of trust (and yes even the most reputable retailers need to emphasise this, believe me) ensure you have prominent trust logos and messaging in your enclosed checkout and particularly on your payment page.

Here, Lovehoney provides reassurance in the form of Verisign and Shopzilla logos. Also, and this is something which is important for this retailer, it reassures customers about the discreet packaging and how the charge will show on customers' bank statements. 

Use autocomplete to speed up progress

The next two tips come from Albie Attias. First of all, use autocomplete to speed up customers' progress through web forms. 

This is also useful for avoiding any mistakes in data entry which may result in delivery issues. 

Explain why you're asking for the information

If you're asking for information which isn't strictly necessary for the completion of the transaction, then it makes sense to explain this. 

On a side note, I would avoid asking for unnecessary information, or at least not making these fields compulsory. 

Here, ASOS does explain why it asks for customers' gender, though it should explain why date of birth is needed. 

ASOS checkout call to action button

Tailor input methods for mobile devices

A great tip for mobile / tablet forms from LBi's Glynn Davies:

Using the email and url values of the type attribute for input fields is handy on mobile, too: brings up an keyboard with convenient things like ampersands and pre-set TLDs in a more accessible places.

Here, the Santander app recognises that I'm about to enter a numerical code, and so the phone style keyboard is much more suitable: 

Use 'search engine-style validation'

This tip comes from Natalie Green of Postcode Anywhere, and it effectively reduces address entry to just one field. 

On the Reiss site, I just need to type part of Econsultancy's office address, and it recognises the full address: 

Then it's just a case of clicking on the correct one, and the address fields are automatically completed. Bingo...

Thanks to Paul Rouke, Albie Attias, Natalie Green and Glynn Davies for the tips. Any more tips? Let me know in the comments...

Graham Charlton

Published 10 July, 2013 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

You might be interested in

Comments (5)


Mike Upton, E-Commerce Manager at Demon Tweeks

I personally feel that the REISS (and also Hotel Chocolat) implementation of the Capture+ system is confusing. The predictive system looks for a whole address regardless of which line you are entering details on. The first line is 'Address Line 1' which for many people will mean their house number and street name. If your address is '10 Main Road' or something equally as common then your actual result will not appear in the predictive box due to the volume of options with this address. It is then not immediately apparent to the user to continue typing the rest of their address in that box to pin down their exact address more as the natural reaction would be to go to the next line 'Address Line 2' and fill that in which is awkward to achieve on these sites.

In my opinion the Capture+ system is a great idea but it needs to be implemented with a single input field, else it can get confusing. You can still provide a manual address field option if users would prefer that to the predictive system. The whole point of Capture+ is to simplify the process for users and if its implementation does anything to confuse people then it is not doing its job right.

about 5 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

@Mike good point, I see what you mean. I do think a single field and a clear explanation may work better. It would also have the effect of making the form seem shorter to users.

about 5 years ago

James Gurd

James Gurd, Owner at Digital JugglerSmall Business Multi-user

Yep I think @Mike is right - Capture+ suits the single data field approach, so you just keep typing and then click when a match is found.

Not sure why they would want to use multiple fields for it.

Be interesting to hear if it was a restriction imposed by the retailer or a genuine reason recommended by PCA.


about 5 years ago


Dee Roche

Some forms, particularly in regulated industries such as financial services, can be complex – and there is little you can do as a company to change potentially perplexing legal wording. So look at proactive web chat and co-browsing with agents to improve accuracy and help customers complete the customer journey. Proactive chat can be triggered by customers pausing for a certain amount of time on a form or consistently typing wrong answers, which show they aren’t confident in completing the form. Proactive chat can improve rates of form filling and the overall customer experience as well.

about 5 years ago


Russell Loarridge

This article offers some good ideas to online organisations when it comes to making the most of their web forms. However, it is of primary importance that organisations should keep all their options open when it comes to collecting customer information via registration forms.

Web forms have been and still are the traditional method for online registration and checkout options but more and more consumers are demanding a more agile and simple option, social login – the ability for consumers to register via an existing social profile.

By allowing consumers to use social login organisations are able to begin to understand them as an identity and not just a customer. They can ask deeper questions over time and really build up a profile of the individual, his or her likes and dislikes, hobbies, interests and products they may be interested in. This will result in an increasingly beneficial experience for both the organisation and the consumer.

Social login also makes life easy for mobile users. Mobile users are increasingly asked to register by slowly entering details such as name and password or filling in a registration form via small touchscreens or tiny keyboards. Not only is this frustrating, but it actively deters consumers.

Offering social login and enabling users to register via an existing social identity such as Facebook, Twitter, Google or LinkedIn not only makes registration a simple push of a button, eases engagement and also supports the growing consumer desire to share personal data in order to receive more relevant offers and information from brands.

Russell Loarridge - @RLoarridge
Managing Director Europe

about 5 years ago

Save or Cancel

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 Digital Pulse newsletter. You will 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.