Author: Elena Sevastopoulos, SEO Specialist

“On the web, forms are the linchpins of ecommerce, social interactions, and most productivity-based applications,” Luke Wroblewski writes in the book Web Form Design. It’s important to think of forms as a form of conversation between a person and a company or organization.  In addition, forms should not be overly long so that they appear tedious and invasive.  The last thing an online business needs is to make visitors feel like forms get in the way or make the experience feel like an interrogation.  Questions on forms should be succinct and the content should be organized logically.  When many of the questions on a form are unrelated, multiple web pages are useful for organizing forms.  Optional questions, like a request for a sign-in, can be asked later after the form is completed.

An example of a site with a poor checkout process is that of a kitchen supply company circa July 2012 (since then they have greatly improved their checkout process).  In July I was looking for a beehive cake pan and didn’t complete the order the first visit because I perceived the checkout process as too tedious.  To the left is a picture of the checkout form – it’s not only time intensive but it’s too long to fit on a standard display without scrolling.

The first change that should be made is splitting the content into more than one page.  The Obama campaign figured this out in their 2012 campaign by A/B by testing a one-page form versus a form broken up into four pages – they saw a 5% increase in conversions with the multi-page donation form.[i] In cases of websites that require shorter formers, like Yahoo’s sign up, content grouping or categorizing of fields and questions can be implemented too. The second problem is that a full description and image of what is being ordered isn’t featured on each page.  Third, the form is asking for a lot of optional information upfront that the site could wait until after the purchase to buy, e.g. ‘What are you interested in?’, ‘ did you hear about us?’ and ‘Enter Catalog Source Code’.  Finally, there is also no way to save and return and no breadcrumbs to help with navigation. There is one good thing about this form however – there is useful help text, e.g. ‘Please remember we must have a house number and street name for delivery’, that makes each field a bit easier to fill out.

Fab.com is an example of a site that has a very good checkout experience.  The form is broken up into three pages with breadcrumbs at the top and each form is named, e.g ‘Shopping Cart’, ‘Payment Method’ and ‘Place Order’.  Fields that are not always necessary, like ‘Shipping Address’ or ‘Is this Order a gift?’ are hidden unless a button is clicked. Optional questions are not included in the pre-payment checkout process. Paypal, an easy, secure and trusted way to make purchases online is an option. The item to be purchased is visible on the checkout page and the final confirmation page.  Help text is present.  The final confirmation page also includes a summary of all information including the return policy and the shipping estimate, giving customers an extra feeling of security. Features Fab.com could add are inline validation and an image of the item to be purchased on the ‘Payment Method’ page.

Getting a web form up and running is a process that requires you to step into the shoes of your visitors and think about the form from their viewpoint.  You must also take into account exactly who will be using your site, whether those people are donors, subscribers, or customers, and tailor it to their needs.  Instead of thinking about the ultimate goal, usually a conversion, think about how you can gradually engage those visitors to lead up to form completion and, ultimately, long-term engagement resulting in more conversions.