Palmer Web Marketing Blog - eCommerce Blog PWM Products Justin Palmer Contact Justin Palmer at Palmer Web Marketing Free Internet Business e-books Palmer Web Marketing & E-Commerce Blog

25 Web Form Optimization Tips

by Justin Palmer - September 30th, 2008

Stop for a moment and consider the goals of your website. Regardless of whether it’s a purchase through a shopping cart, a lead generation, white paper download, or a email opt, I’m going to bet every one of these actions requires a customer to use a web form.

With web forms playing such an important role in the completing goals, it goes without saying that we should optimize the heck out of them. Below are 25 tips for doing just that.

  1. Ditch the Captchas: Captcha’s are great for blocking spam, but some evidence suggests they are just as good at blocking conversions. A little spam isn’t the end of the world, and definitely isn’t worth losing conversions over. If you must use a Captcha, make sure it’s easy to read.
  2. Remove Unnecessary Fields: Do you really need to ask for your customers date of birth and gender? Even if your customers aren’t concerned about privacy issues, odds are they’re lazy and might just abandon your excessively inquisitive form. Here’s some great advice from Get Elastic on registration forms.
  3. Keep It Simple: Just because we can use CSS to do all sorts of fancy things with text boxes, doesn’t mean we should. Keeping form fields simple will ensure that customers understand their purpose and won’t confuse them with design elements.
  4. Clear the Clear Button: Having a clear button next to the submit button just makes it easier for customers to accidentally delete what they’ve entered. Skip this unnecessary feature.
  5. Cancel the Cancel Button: In the case of long or multi-part form pages, such as checkouts, don’t give customers the option to cancel their decision. That’s equivalent to a commission driven salesperson asking, “Do you really want to buy this?”
  6. Label Required Fields: People want to do as little as possible. For this reason, let your customers know what they are required to fill out with an asterisk or similar label.
  7. Use Point of Action References: If customers are getting confused by the information you’re asking for in a particular field, include a small note with a popup link with more information. For example, one of the most common POA references is an explanation of the 3 digit CVV code found on the back of credit cards.
  8. Show Formatting Examples: Some fields should have notes showing how to format them, depending on your database requirements. For example, you might want phone number formatted in a certain way, with or without parenthesis, dashes, etc. In general though, keep these formatting requirements to a minimum in order to keep it simple for customers.
  9. Make it International Friendly: Forms requiring an address can be confusing if they’re built only with US residents in mind. Check out these detailed guidelines for building international friendly forms.
  10. Allow Easy Forward and Backward Movement: Customers rarely maneuver through our website the way we intend them to. In order words, they hit the back button, the forward button, refresh, etc. Depending on how your forms pass data, this could cause error messages such as “this page has expired”. Make sure you test the forward and backward flow of any multiple page forms on your site.
  11. Logical Tab Sequence: Don’t you hate it when you hit tab, and rather than going to the next field, the focus moves somewhere else on the page? This problem is likely due to the way the form is laid out with HTML tables. Make sure your forms tabs in a logical sequence to prevent customers from accidentally skipping fields.
  12. Server Side Validation: There’s 2 ways to ensure that your visitors are entering correct data into fields. You can use client-side scripting (such as Javascript which is browser dependent) or server side error processing. In addition to server side validation being less reliant on the user’s browser settings, it’s also more secure.
  13. Clear Error Messages: When displaying error messages when customers enter invalid data, make sure your messages are clear and well placed. This means saying “Please enter an email address” rather than something vague like “you must fill out all fields.” A best practice is taking them right back to the field with incorrect data, and displaying the error message next to it.
  14. Show What’s Needed When Its Needed: It’s best to hide form fields until you know they are absolutely needed. For example, if you already know your user is from the US, you can dynamically hide the province field and show the state drop down box instead.
  15. Logical List Order: When using drop down lists or radio button lists, make sure you order them in a logical way, listing items higher if they are selected more often. In other words, if 90% of your customers buy from the USA, don’t list Afghanistan as your first option, and United States at the very bottom.
  16. AJAX Validation: Some sites have begun to validate form inputs as soon as the user tabs out of the field. This can be very effective, since it does not break the flow of the process. Its easier to correct an error immediately after entering it rather than after the whole form is completed.
  17. Remember Me Feature: For login forms, allow customers to choose a “remember me” option, which uses a cookie to fill in login information the next time. Who wants to remember all those passwords anyway?
  18. Set Focus: When a page loads containing a forms, sending the cursor to the first required field will prevent users from having to click into the field in order to start typing. This can be accomplished with a simple JavaScript function.
  19. Avoid Obnoxious Password Requirements: Ever received this annoying error? “Your password must contain at least one letter, number, and be least X number of digits.” Requiring passwords to be formatted a certain way may help security, but it will likely discourage return visits since visitors must now remember an unfamiliar password.
  20. Progress Indicators: For forms that span multiple pages, include a progress indicator letting people know where they are in the process. These are most commonly seen during checkout and would include steps such as “Shipping Info > Payment Info > Receipt Confirmation.”
  21. Minimize Scrolling & Pages: A good case can be made to limit the number of pages in a a multi-part form in order to prevent customers from abandoning. However, an opposing case can also be made than ridiculously long, single pages forms that require scrolling can scare off customers. There’s no sure-fire rule here, its a perfect opportunity to perform your own a/b test.
  22. Strong Call to Action Buttons: Sometimes “Submit” just doesn’t cut it. In other words, be specific and action oriented with your form buttons.
  23. Use External Labels: Have you ever used a form that labeled the field with text that disappears when you click into it? This can be a great space saver, but extremely confusing if a customer forgets what the field is for since the label has disappeared. Here’s a great example of why external form labels are more effective.
  24. Prioritize Size and Location of Multiple Button Forms: On a form with multiple action buttons, make sure you emphasize the most important button leading to the conversion. For example, if your final order confirmation screen has 2 buttons, “Finalize Order” and “Edit Order”, make sure the “Finalize Order” button is larger and more prominent.
  25. Clear Confirmations: Have you ever filled out a long, tedious form, clicked submit, only to be returned to what seems like the same page with the form empty? You can do everything right with your form, but if you drop the ball on the confirmation, your customers will be helplessly confused. In addition to making a clear confirmation message, check out these other tips to prevent wasting your confirmation page.

So what are your thoughts? Have any other form optimization tips to add?

Like these 25 tips? Here’s 192 more.

About Justin Palmer

Justin Palmer is the founder of Palmer Web Marketing, an internet marketing and e-commerce consultancy. Justin’s current project is MedSaverCard.com, a pharmacy discount card & county RX discount card program for the under-insured in America.


Related Posts:

31 Responses to “25 Web Form Optimization Tips” by Justin Palmer

  1. Amrendra Says:

    Thanks you have better ideas on such issues.

  2. Bloggers Digest 10/3/08 | Get Elastic Says:

    [...] Justin Palmer offers 25 tips for optimizing web forms. [...]

  3. eva Says:

    great summary list. One quibble re: #8 – I recommend not requiring particular formatting for a field if instead the data can be handled programmatically. Let the customer enter any format but only save the nunetic characters. Easy for the customer; easy to format later. And no conversion dip from customers getting cranky about your format requirements.

  4. FormSpring Blog » Blog Archive » 25 Web Form Optimization Tips from Palmer Web Marketing Says:

    [...] Palmer Web Marketing recently posted (a continuation of their “25 ways” series) about Web Form Optimization Tips. [...]

  5. Matt G Says:

    Regarding CAPTCHA..do consider the downstream impact of your choice.

    If its just a contact form to you, sure, keep the barriers low. But if you are building forms for newsletter subscriptions – for instance – a SPAM-bot could signup hundreds of users to your newsletter at the behest of a site like Spamza.

    The end result could be a lot of angry, unwilling email recipients hitting the “Report as SPAM” button and landing you on a blacklist, potentially harming your business and cutting you off from your audience.

    There are other examples, but this one illustrates that the user experience may not end with the form. Its an ongoing relationship that requires compromises.

  6. Tips To Increasing Customer Response By Optimizing Your Web Forms | Josh Baker - Marketing Optimization Says:

    [...] great tips to optimizing the performance of your web form? Check out PalmerWebMarketing’s 25 Web Form Optimization Tips to get yourself headed in the right direction to more webform [...]

  7. Justin Palmer Says:

    @ Matt,

    All great points. A decision like removing a captcha must be considered in light of other ramifications.

  8. Optimizing Websites for Short Attention Spans Says:

    [...] many fields, too little time. Do your web forms stay on a need to know basis, or are you quizzing your customers for information you’ll never [...]

  9. Richard McLaughlin Says:

    @ Matt,

    All great points, but if you have a double opt-in you should be OK.

  10. SEO Asia Guy Says:

    You’re right about the Captcha. I once tried to pay for a web hosting plan at a well known webhosting company and the Captcha was not working. I gave up.

  11. Gunjan Pandya Says:

    Thanks….

    Really its great tips for Form Optimization

  12. 50+ Must Read Web Design for ROI, Usability and SEO Articles | SEOptimise Says:

    [...] 25 Web Form Optimization Tips [...]

  13. TheGrok’s Not-To-Miss Links for the Week 10/31/08 | FutureNow's GrokDotCom / Marketing Optimization Blog Says:

    [...] 25 Web Form Optimization Tips – Covers most of the basics, a good reminder. [...]

  14. Ecommy Says:

    The post is just great and useful especially for newbies.

    Anyway for the beginners that read this post, don’t forget to proper validate the user input and avoid hacking attempts on your brand new form, especially SQL injection and XSS.

  15. ROI, Usability и SEO статии Says:

    [...] 25 Web Form Optimization Tips [...]

  16. Jillian Says:

    Great tips. For #8 – I always appreciate seeing an example for dates, telephone numbers and serial numbers. And since this is the internet with a global audience, address fields for international customers is a must. Also, if an order form for products a currency conversion tool and international shipping info (or restrictions) is helpful.
    Thanks for this list – I needed it.

  17. Link Love - Tuesday 04/11/2008 Says:

    [...] 25 Web Form Optimization Tips on PalmerWebMarketing. Here you can get 25 simple and important tips for the web Form Optimization. [...]

  18. gMoney Says:

    Holy smokes! This is an outstanding resource that any and all website owners should have a read of.

    Love #11 as it’s a huge petpeeve of mine as well. Users that are used to being more productive by using keyboard shortcuts shouldn’t be penalized simply because table layouts are not done correctly. Kudos!

  19. 50+ Must Read Web Design for ROI, Usability and SEO Articles | Last 24 hours news website Says:

    [...] 25 Web Form Optimization Tips [...]

  20. .eduGuru Links of the Week for November 14th, 2008 | .eduGuru Says:

    [...] 25 Web Form Optimization Tips – With web forms playing such an important role in the completing goals, it goes without saying that we should optimize the heck out of them. Below are 25 tips for doing just that. [...]

  21. How To Optimize Your Site Forms Says:

    [...] 25 Web Form Optimization Tips; [...]

  22. Best of 2008: Top 10 Website Optimization Posts to Kick Start and Improve Your Website! Says:

    [...] 25 Web Form Optimization Tips Badly designed forms can often be a major cause of poorly optimized websites. Justin Palmer [...]

  23. How to collect Names and Addresses on a Web Form? Says:

    [...] 25 Web Form Optimization Tips [...]

  24. stevie black Says:

    #19 – Obnoxious Password Requirements

    This may be the Number One reason form are left unfilled – developer/codetalkers simply don’t get that a 12-digit alphanumeric batch with special characters thrown in simply isn’t what we “general publica” think of as a password. Additionally, when we “break” the form by putting in a code or a character that the form can not feed on, more often than not, the error code is ridiculously unhelpful and, worse, dysfunctional.

    Bottom Line?

    If you are going to require a passcode that has all these difficult elements, good SEO and user experience requires that you do these four things:
    #1
    Explain the error to the user so that we can make the changes necessary in one step – making me riddle it out over 4-10 submissions simply isn’t a formula for success.
    #2
    Remember, the error I put in a field might be at the top of the page – have the courtesy to have the cursor take me back to the first of the offending areas – or highlight the fields that bother the internal brain of the form – again, don’t make me riddle it out – it’s your form.
    #3
    If you need things to be more secure and require special characters to promote healthy strong password compliance – tell me that before I start and give me a suggestion for what I might use – e.g., “youruSualpaSSword+@”. Tell me what you need.
    #4
    If you don’t need the password until the end, then make the forms and the process allow for as much openness as possible. Login means that I have to stop exploring – it makes me “feel” inside – or it makes me want to go to a site where they invite me in more as a guest and don’t require me to be their BFF on the first date. It’s psychology, but it works.

    Thanks for listening.

    SB

  25. Justin Palmer Says:

    Great points Stevie, most error messages like the ones you describe are worthless. It’s very important that someone with marketing perspective reviews all web forms, and checks for errors such as these.

    Justin Palmer

  26. Ash Says:

    Well, it depends on your application whether you want server side or client side authentication. Client side is fast and good but if you are working on a secure application then you must avoid client side and use server side authentication. Server side auth have its own disadvantages too like making calls to database each time you authenticate something against db.

    Anyways, all the points seems good.

    Nice post Justin

  27. Karim Says:

    Great article about web forms. Very helpful for designers and developers also.
    Thank you Justin

  28. 10 Tips for Incredible Web Forms! | Design Reviver Says:

    [...] 25 Web Form Optimization Tips [...]

  29. Dat To Says:

    Amazing list thank you. I always have to keep reminding myself to keep it simple because will go buy from the company that is simple, fast and easy to deal with.

  30. SEO Daily Reading - Issue 130 « Internet Marketing Blog Says:

    [...] 25 Web Form Optimization Tips — Not Converting? Take a Look at Your Forms [...]

  31. forms Says:

    nice tips… thanks a lot! it will be very useful on my part…. http://www.forms.com/
    Web Forms


Blog Updates
RSS Twitter