25 Web Form Optimization Tips
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.
- 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.
- 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.
- 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.
- 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.
- 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?”
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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?
- 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.
- 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.
- 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.”
- 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.
- Strong Call to Action Buttons: Sometimes “Submit” just doesn’t cut it. In other words, be specific and action oriented with your form buttons.
- 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.
- 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.
- 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 this post? Subscribe to the Palmer Web Marketing RSS feed.

Need a second opinion on your website? Palmer Web Marketing's website review services will give you the insight you need.
To make emails more relevant to your subscribers, offer a preference panel that allows them to control what they receive from a company. Offer the flexibility to pick areas of interest, frequency, etc. Allow readers the ability to change their selections with each mailing. Make it as easy as possible! Stay away from complicated password-protected access, these are a real turn-off, and readers may just start deleting your emails rather than try to change their subscription.
The unsubscribe function would of course be a part of this panel. But subscribers may not want to unsubscribe completely - they may simply want to hear from your company less frequently. Smart marketers should look into offering options other then "remove me from everything". And, since "too frequent" is one of THE top reasons for reporting an email as spam or unsubscribing, this preference panel would go a long way in building a good relationship with the subscriber.
Here's a great example from J.Crew, which gives the subscriber an opportunity to control the frequency - or to easily go on to remove themselves from all J.Crew mailings. This form comes up when the recipient selects unsubscribe. J.Crew offers a polite touch point between the initial 'click here to remove' request and the final 'remove' function. (NB: The form is pre-populated with the email address.)
Jennifer Curtin
Head of Marketing
Newsweaver
We’re Closing Our Doors
Dear AOL Hometown and Journal's users,
We're sorry to inform you that as of
Thank you,
The AOL Team
Dear
We're sorry to inform you that on
Sincerely,
The
How to Save Your Info — Australia
We're sorry to inform you that as of October 31st, 2008, AOL Hometown(R) has been shut down permanently. We sincerely apologize for any inconvenience this may cause.
- The AOL Hometown Team
Attention AOL Journals Users — Canada
"We're sorry to inform you that on
Thank you,
The AOL Journals Team
Dear
The
We appreciate your patience during this transition period. We invite you to bookmark the People Connection Blog where you can read further information about
Sincerely,
The
Attention AOL Journals Users — Mexico
Estimado usuario de AOL Journals,
El equipo de AOL Journals desea hacer de tu conocimiento algunos cambios que afectarán tu experiencia actual. A partir del 30 de Octubre, AOL Journals se cerrará permanentemente. Para nosotros es muy importante que tengas la oportunidad de salvar todo tu contenido de AOL Journals. Estamos trabajando en un proceso para migrar tu información fácilmente a otra plataforma de Blogs. Recibirás un mensaje vía e-mail durante la próxima semana sugiriéndote a) salvar toda tu información manualmente y encontrar otro espacio para tu Blog o b) optar por la migración, donde tu Blog actual será transferido a la nueva plataforma.
Apreciamos tu paciencia durante este tiempo. Te invitamos guardar la liga al Blog de People Connection donde podrás encontrar más información acerca de AOL Journals. También puedes suscribirte al feed RSS del Blog de People Connection para mantenerte informado de cualquier cambio. El Blog de People Connection será actualizado frecuentemente, te sugerimos usarlo como tu principal punto de referencia.
Sinceramente,
El equipo de AOL Journals
Lee más acerca de cómo descargar y guardar tus archivos de AOL Hometown aquí.
Cómo descargar tus archivos de AOL Hometown
Para descargar tus archivos de Hometown por medio del Cliente de AOL
1. Conéctate al Cliente de AOL
2. Dirígete al Keyword: FTP
3. Asegúrate de tener espacio suficiente en tu disco duro antes de descargar tus archivos
(Imagen Keyword)
4. Haz click en el botón: "See My FTP Space"
(Imagen My FTP Sapce)
5. Selecciona el archivo que vas a descargar y haz click en el botón "Download Now". Debes repetir este paso para cada archivo. Si tu archivo se encuentra en otro directorio, haz doble click sobre ese directorio para tener acceso a tus archivos, ahí podrás descargar tus archivos individualmente.
(Imagen FTP manager)
Para descargar tus archivos Públicos y Privados de Hometown por medio de un Cliente FTP
1. Descarga e instala un Cliente FTP. Existe una gran variedad de clientes FTP gratuitos o de prueba gratuita disponibles. Los usuarios de AOL pueden buscar en AOL Download Center, o en sitios de búsqueda como Download.com, Shareware.com, Tucows.com, etc.
2. Configura tu cliente FTP. Las instrucciones exactas pueden variar de acuerdo al programa, revisa sus instrucciones. La información básica es: En las configuraciones se te preguntará la siguiente información para poder conectarte a tu sitio FTP: Dirección del host (Host address), Usuario (User ID) y Contraseña (Password).
- Para la dirección del Host escribe members.aol.com
- Para el usuario escribe anonymous (es posible que exista una casilla o menú para Anonymous que tendrás que marcar o seleccionar)
- Para contraseña escribe la dirección de e-mail completa del Nombre de Usuario AOL del FTP al que deseas entrar.
Por ejemplo, para mi nombre de usuario JournalsEditor, mi dirección del Host será members.aol.com; el usuario será anonymous (marcando la casilla); y la contraseña será journalseditor@aol.com:
(Imagen Propiedades FTP)
3. Asegúrate de tener espacio suficiente en tu disco duro antes de descargar tus archivos
4. Asegúrate de estar conectado con tu Cliente AOL con el mismo Nombre de Usuario AOL que el sitio FTP al que deseas entrar. Esto es muy importante - la conexión del Cliente AOL se hará cargo de la autenticación, para que no puedas ver el sitio privado de alguien más. Si estoy conectado con mi Nombre de Usuario JournalsEditor al Cliente AOL , sólo podré tener acceso a mi espacio FTP de JournalsEditor.
5. Conéctate a members.aol.com para descargar tus archivos.
Para descargar tus archivos Públicos de Hometown por medio de un Cliente FTP
1. Descarga e instala un Cliente FTP. Existe una gran variedad de clientes FTP gratuitos o de prueba gratuita disponibles. Los usuarios de AOL pueden buscar en AOL Download Center, o en sitios de búsqueda como Download.com, Shareware.com, Tucows.com, etc.
2. Configura tu cliente FTP. Las instrucciones exactas pueden variar de acuerdo al programa, revisa sus instrucciones. La información básica es: En las configuraciones se te preguntará la siguiente información para poder conectarte a tu sitio FTP: Dirección del host (Host address), Usuario (User ID) y Contraseña (Password).
- Para la dirección del Host escribe members.aol.com/NombreDeUsuario
(sin incluir @aol.com)
- Para el usuario escribe anonymous o déjalo en blanco
- Para contraseña déjalo en blanco.
3. Conéctate a members.aol.com para descargar tus archivos
