Don’t underestimate the power of a good form when designing your web page – it’s the key to generating leads. The problem is, we all make mistakes, and when it comes to landing page optimization, those mistakes will cost you leads and sales.
In this article I’ll show you some of the mistakes I see most commonly in forms and how to avoid them.
With a well-designed online form, visitors will be eager to convert by the time they reach your call-to-action button.
If you’re serious about finding your mistakes and fixing them, check out my tips below.
1.) Your form isn’t mobile responsive
When using my smartphone there is nothing I find more irritating then coming to a page or form that isn’t mobile responsive. At the start of 2014 smartphones accounted for at least 25% of all web searches. This traffic is only increasing at an exponential rate as smartphones continue to replace the traditional computer.
Therefore it’s essential your form be mobile responsive. If I have to scroll around a page to find the correct fields I need to use, you’ve lost me. Your form should be able to re-size and fit any device.
You can also formulate two sets of questions for your forms. On the mobile version of the form you can ask for the minimal amount to get them going. On the browser version you can ask more/in-depth questions as its easier to fill out forms on full size screen with keyboard.
The image above is to show you how irritating a non-responsive mobile form can be. On the left design you can see the entire text box and form fields. On the right design you have to scroll around the image to type inside the text box.
Making your form mobile-friendly is extremely important because it’ll get you conversions on the go. The more pain-free you make it, the more likely someone is to fill it out. Read on to see other ways you can make your forms stand out.
2.) The user has no idea which field they’re in
The user moves their mouse or tabs down to what they think is the correct field but nothing happens. You can let the user know they’re in the right spot by highlighting the field. This can be done by encompassing the field with a border and/or adding a background color to the entire area.
I’ve shown how this could look on your forms in the examples below. Basically when a user moves into a field it will change color and the background and border will turn purple.
Here’s how it would look when the user is in the “Your Email Address” field:
Here’s how it would look when they go into the “Your Phone Number” field:
This example illustrates how highlighting can reduce confusion for visitors by showing exactly what field they’re on. This is great for mobile users because they don’t have to zoom in to see where they are as it will be obvious.
3.) You’re asking for too much information
Depending on how far your lead is along your marketing funnel you want to make sure you’re asking for the right amount of information. Three or four form fields is the most you can really ask for in a top-of-the-funnel form. Think about it like you were asking strangers for their birthday and address upon meeting them. Not very likely someone off the street is going to tell you that information.
Asking for the bare necessities in this order: email address, first name, last name is best for this first form. The great part is, once you’ve started a relationship with new leads you can continue to get more information as they feel comfortable.
4.) Your long form is horizontal, not vertical
Humans are generally programmed to fill out forms in a top-down fashion. Therefore, the easier your form is to use, the more likely it is that a user will finish filling it out. According to this survey two-thirds of people prefer to fill out a vertical single column form over a horizontal multi-column form.
As you can see in the example below, a vertical form is easier to scan and should be used over a horizontal form when the form is long. This is because the information flows towards the bottom and towards your call-to-action. This means the user doesn’t need to second guess where to go next. It’s also easier to read because the titles can go just above or beside the field. Meaning that a user won’t have to guess which title belongs to which field.
The vertical form design makes it easy for the eyes to follow a flow. This study found that on a multi-column horizontal form users had no idea where they were supposed to be looking next. They took longer to find the information and were less likely to finish the form because it was too hard to follow.
The example below illustrates where your call-to-action should be on a vertical form. When a user starts filling out your form they will continuously follow it down until you get to the bottom. Right below your last form field is the best spot to have your call-to-action as the user is already primed to be looking there.
Take out the guess work for visitors so you decrease the amount of time it takes for a user to complete your form. You don’t want a user to even to think about whether it’s worth finishing your form or not.
So should I ever use a horizontal form? Yes but only use them when you’re only asking for minimal information. There are tons of successful sites that use horizontal forms when there are low barriers for entry.
For example, the form below just asks for email and first name. Forms that ask for three fields or less and/or can fit on one horizontal line can be just as effective as vertical ones.
5.) The field label is inside of the field
You might be saving space by putting the field label inside the form field, but never do this! Why? As soon as the visitor clicks on the box it’ll disappear. Someone using your form may get frustrated because they may have forgotten what they’re supposed to be filling in. This would also be a problem for visually impaired people trying to fill out your form. A screen reader is not going to recognize that there’s information inside your form field.
The example below by Salesforce illustrates this concept. Looking at the form you could probably infer that the first field is your first name but when it gets down to “Job Title” you might not remember that’s what the field was asking for.
Avoid this mistake by writing what a visitor needs to fill out outside of the form field. Inside the form field I recommend having an example so that the visitor can see the format you’d like. If the field was for your birthday you could put the format inside (YYYY/MM/DD).
Another option if you’re incredibly keen on not having the form fields beside is to use a float label. An example of this is shown below.
Basically you would show what you need inside the fields but when a user clicks the field the title will float above. The user can then reference what you were looking for if they forget.
6.) The page reloads your form riddled with errors when you press submit
How often have you seen something like this?
This mistake is all too common. You’ve filled out a long form, press submit only to have the same page come back with error messages. You can easily alert users of their errors with on the spot in-line validation.
In-line validation lets the user know that there’s a problem within each field instantly. This way they know the username they’ve chosen is taken, or they’ve submitted the wrong format, or of any problems with their submission. By making the fields dynamic you can give positive as well as negative feedback, like a checkmark or “x”, when they fill out a field.
Twitter does a great job of letting the user know that they’re filling out the required fields correctly on their sign up form. It tells me what i’ve done right and how I can correct my mistakes. Two of the mistakes on the form below are that I didn’t write a long enough password and that my username is used. It takes the idea of in-line validation further by telling me how long my password needs to be and gives me options for other usernames.
7.) Your Form is Hidden
Your form either blends in with the rest of your web page or is hidden at the bottom of your page. Make your form easy to find by using the ideas of contrast, space and placement to have it stand out in relation to other elements your web page.
Help visitors find your form by doing these things:
Contrast your form in relation to the rest of the page. Contrast is when two elements are different making one stand out in relation to the other. The greater the difference between the two elements the more your form will be highlighted. For example you could contrast the color of your form with the background color of your webpage. If your web page was a blue color you could use an orange color to really make your form stand out.
You could also increase the amount of blank space directly around your form. By reducing the amount of text or images around your form you will increase the likelihood of your form standing out. Try and have at least an inch of blank space around your form to make sure that it’s easy to see
Place your form somewhere that it’s easy to find. Generally this means above the fold.
In the example below, the form stands out in relation to the back of the page in a few ways. First, the form is a bright yellow and white color which contrasts nicely with the light blue of the web page. Next, all of the writing is on the left side of the page and gives the form room to breathe. Finally, it is placed above the fold which makes it easy to find.
You want users to fill out your form and the best way to do this is by making it easy to use. Mistakes are easy to make but noticing them and testing out new designs are the only way you’re going to see positive results. I hope you can now sympathize with and see how annoying a simple mistake on your part can be for a user.
Want to learn more?
- 7 Best Practices for Web Form Design
- Optimizing your Landing Page Form Fields for Conversion
- 5 Landing Page Conversion Killers