Recently, my company upgraded their subscriber database. One of the major advantages of this upgrade is that it let our website communicate directly with our database, meaning that (among other things) our order forms could send their information directly to the database.

In writing the code to allow this to be possible, I found quite a few areas that needed improvement. Here is our old order form:

And our new one:

So what were the changes?

1. The new order form uses fieldsets to clearly seperate the various sections of the form, and help to create a natural progression when entering information.
2. The labels, field text, and fields themselves are bigger. The last thing someone should need to do is have to squint while they input their credit card number.
3. Added a confirm email field. Even though it is an important field, and people must type it several times per day, we still found we were receiving a large number of orders with mistyped email addresses. Unfortunately the order may still go through anyway, even though the subscriber will have no way to receive their order, nor be contacted about the problem.
4. There was only one line for the mailing address, even though a fair number of individuals and even larger number of companies have two lines for their mailing address.
5. The state and country fields were turned into drop-down lists. This was originally done because our database needed states as abbreviations, while people would sometimes type the whole state name. But I soon realized that people are much more used to selecting their state and country from a drop down. A small note on this: United States is at the top of the list and selected by default. I often find it frustrating on U.S. based sites when the U.S. is listed alphabetically, near the bottom.
6. I added card type as a drop down. I had initially removed this field, as it seemed to be an unnecessary hindrance since the credit card type can be determined from the first digit. However this led to two problems. First, people would add “Visa” to the beginning or end of their number, thinking they had to put it in some place. Second, by having the user choose the credit card type, it seems to increase the likelihood that they will pay attention to which credit card they are inputting, and type the number correctly.
7. I added logos for each type of credit card accepted. It was mentioned in a speech at Pubcon that including credit card logos increased conversion by 1%, as they instilled confidence in the buyer. Along those lines, I also made sure that our Better Business Bureau and McAfee Secure logos were always visible.
8. The submit button was made even larger and placed directly under the previous field.
9. Several ASP field validators were added or adjusted, including a regular expression validator to confirm the credit card, and a comparison validator to check the two email fields. This allows for more error checking to occur client side, before the user submits their form.
10. If an order is submitted and rejected by the database, a large error panel is displayed at the top of the page, which describes the error but also provides instructions on how to answer customer service.