Best Practices: Online Order Form

Written by Formstack on June 22, 2010

Posted in Form Hacks

A good online order form is short, easy to fill out, asks for the least amount of information possible, and avoids frustrating the end-user. If someone is filling out your order form, they’ve already decided to purchase your product.  You don’t want to change their mind by presenting them with a form that presents any sort of challenges.

Here’s a sample order form.  It may look okay at first glance, but there’s something wrong with every single field on this form:

Click here to view an example of a bad order form.

The first thing wrong with this form, is that every field on it is important and needs to be filled out, but none of the fields on the form are required.  By making all of the fields required, you prevent the user from only filling out part of the form and leaving out crucial info, such as a delivery address or payment info.

Second, we have the address field.  It looks fine at first glance, but there’s a country list available.  That’s fine, but other countries don’t necessarily have states and zip codes.  We can’t make that field required while requesting info that every person might not have, so that field needs to be edited to be more international-friendly.  In Formstack, you’d edit that address field and choose the “Other” format instead of “U.S.” format.

The e-mail field is fine, except it needs to be required like all of the other fields on the form.

The “How many copies of my book do you want?” field is just a short answer field that will let the user type in anything they want.  They could type in letters, numbers or gibberish here.  Instead of using a short answer field, it would probably be better to use a select list field here and give the user a set list of numbers to choose from for quantity, in order to prevent any user errors.

This goes double for the “How much do you owe ($12 per copy)?” field.  We don’t want to ask the user to do math, as it’s just another opportunity for them to make a mistake.  Instead, we would want to use a calculating form field to display a total for them based on the quantity they chose on the previous field.

It’s hard to tell just from looking, but the credit card field on this form is just a short answer field.  It has none of the security features that a Formstack credit card field has.  This form doesn’t use SSL, data encryption or PGP, so any credit card numbers submitted through this form would not be secure.

Finally, the credit card expiration date field here is also just a short answer field, allowing for user error when inputting the date.  Instead, it would be best to use a date/time field to guarantee the date is submitted in the correct format.

Keeping all these suggestions in mind, here’s the same form with all the proper changes made:

Click here to see an example of a good order form.

Other things that you would want to avoid on order forms are captchas (Why lose a sale because someone has trouble filling out a security code?) and excessive fields that ask for additional info not related to the purchase.  All marketers are tempted to glean as much info as possible from the person filling out the form, but if you make the form too long by asking for additional info, you may lose the sale in the process.  A better idea might be to follow-up after the purchase with a survey sent out to all of your customers.

There are other important matters to consider when building an order form, such as design and sales text, that will affect conversions, but keeping the form short and easy to fill out is probably the most important thing to keep in mind when building an order form.