4 Tips to Create an Epic Web Form

You finally got someone to click on an ad, a social media post, or a link from a piece of content. Congratulations! Now the hurdle is to get her to complete the form on your landing page. Web forms are the way that users become a member, make a donation, buy a product, or sign up for an event. Web forms are where the action is on your website.

Or at least they should be. A lot of users don’t finish web forms; instead, they click away. Why? Too many forms are cluttered, long, and include extraneous questions. They complicate what could be a simple interaction and, in doing so, lose the relationship that you want to build with your user.

So, how can you build a better web form?

1. Keep the page uncluttered

The form’s purpose is to allow users to complete a task, so keep it clean and easy for users to perform the task. Include only the most important information and keep it as brief as possible. Include some white space in the form’s design; it makes the form “feel” uncluttered. Graham Charlton of EConsultancy lists this form from Geeklist as an example of a great web form. It’s clean, simple, and gets the job done.

2. Don’t ask for too much information

Drop-off rates increase as you include more extraneous questions and fields. I understand that you want to know as much as you can about your users, but only include necessary questions. “This is probably one of the most common problems out there: you want 12 pieces of information from your visitor, and they’re only willing to give you two. This comes down to having a thorough internal discussion about which fields you absolutely require and which could be removed,” says Ian Everdell of Mediative. What’s the optimum number of fields? If you can have only three or four, your completion numbers will be higher.

Really, really want more information about your users? Everdell says, “If you have a CRM system that ties into your web forms, it likely has some sort of progressive profiling feature built in. When a visitor comes to your site and converts multiple times (e.g., downloading several white papers), they’re presented with different fields on each form. This lets you collect, say, ten pieces of information while only asking your visitor for four at any given time.”

3. Make it easy

There are a lot of ways to make forms easier for users.

Make sure that the length of a field is appropriate for the type of data it will contain. A postal code should be 5 characters long.

Make it clear which fields are required and which are optional.

Research shows that the best place to put labels depends on how familiar the form is. In a familiar form, such as one to sign up for an event or to buy a t-shirt, put the labels above the fields. In an unfamiliar or very complex form, put the labels to the left of the fields.

Keep related questions together. Everdell says, “Grouping related fields together gives the visitor the opportunity to scan the groups and get a high level sense of what is required; however, only use the minimum number of visual elements necessary to communicate useful relationships.”

Fields should auto-fill when possible. It is easier for a user if the postal code auto-fills after they put in their street address and city. A credit card number can automatically fill the credit card type field with “Visa” or “Mastercard.”

Provide help to your user if you think they’ll need it. This is especially useful “when asking for unfamiliar data, when the user may question why the data is being collected, or there are recommended ways of providing the data,” says Everdell. But don’t give too much help. Indeed, Everdell says that if you want to offer a lot of help or tips on a form, “consider exposing them only when the visitor reaches that field (e.g., tooltips) or clicks on a help icon.”

Allow for tabbing between fields. Users expect to be able to do this now.

Everdell says, “Provide direct feedback as data is entered – use inline validation to verify input and suggest valid input if errors are found…Show errors at the top of the page and at the place where the error occurred. Make sure that they are visually distinct. Provide error messages that help the visitor understand what went wrong and how to fix it.”

4. Create a stellar “thank you” page

Your thank you page and follow up email are just as important as the form itself. Unfortunately, they are often an afterthought. Be creative and make people feel good about the action they just took. Use video, images, and make it personalized! A thank you page is not only polite, but also continues the interaction between you and your user.

“It’s an important page because it is one of the few times you have the hyper-focused attention of your donors as they wait for their credit card payment to be processed and confirmed. Yet surprisingly it is one of the most overlooked web pages on a nonprofit’s website,” according to an article on Nonprofit Tech for Good.

Your thank you page should confirm the action. For example, “Thank you for donating to our organization,” states the action that has been taken. A thank you page is also a place that could lead your user to interact with you on a social network, so include social media buttons.

Joanna Wiebe, author of “Copy Hackers,” has a checklist of the most important things to include on a thank you page:

  • Say ‘thank you’ or an appropriate version of that
  • Tell peeps what they can expect next
  • Give new subscribers and customers an action to take
  • Keep your brand tone, look, and feel alive
  • Provide company contact details, especially if it’s a contact form submission thank-you page

Andrew Woo on KissMetric says that a thank you page is a great place to get feedback. You can ask your user questions or even to fill out a survey. Woo also suggests providing links to your best content on your thank you page. A thank you page may also be a great place to display testimonials.

An article on Nonprofit Tech for Good suggests providing buttons on a thank you page that will allow a donor to share their donation on their own social media profiles. The article also suggests a thank you page that allows donors to have snail mail cards sent to the people they are honoring with their donations. This is a nice example from Conservation International: