Web Form Design: 6 Tips for More Website Conversions

Web Form Design: 6 Tips for More Website Conversions

Chances are if you have spent any amount of time doing research or shopping for a product online, you have filled out a form. This also means that you have probably come across a form that was lacking in thoughtful user experience (UX), and that you maybe even abandoned filling out the form as a result of faulty design or confusing layout. The layout of a web form is a major player in whether or not that form converts a visitor into a lead or customer. Think about it this way – if filling out a form and submitting it is easy, someone will be more likely to do it than if the form is long, overcomplicated or counterintuitive. We’ve put together six tips you should keep in mind the next time you’re designing a web form. Read on to learn more about this important piece of your website’s lead generation strategy!

1. Make sure your website form is mobile-friendly

As with any other aspect of your digital experience, the forms on your website need to be mobile-friendly. If your prospects are anything like me, they’re probably registering for accounts, signing up to receive newsletters or downloading content to read while commuting to work or waiting for a doctor’s appointment to begin. Check out this example from Sport Clips: Mobile-friendly forms have clear titles and bold calls-to-action buttons, as well as the minimum amount of form fields possible displayed in a single-column layout. Minimalism is key when it comes to mobile-friendly web forms and keeping things as straightforward as possible is absolutely necessary if you want to increase conversions.

2. Go for single-column layouts instead of double

Single-column layouts are not just for mobile-friendly forms; you should keep the location and order of your form fields as simple as possible, and single-column layouts help accomplish this. Rather than having to jump back and forth across the page as they fill out the form fields, a single-column layout displays the fields in a way that makes sequential sense and allows them to be completed quickly. Less time needed to work through your forms leads to the higher likelihood that the visitor will complete the form – which means more conversions for you! See below for an example of this from Triumph Motorcycles:

3. Align copy to the left

Keeping in line with the tip above, you should also align all of your form fields and copy to the left of the page. This is the most natural way to align copy, as it mirrors how most people read a page – starting on the left side, moving across to the right, then back to the left side when they reach the end of a line or sentence. This goes for the fields themselves, the copy and any labels you may include for the fields, whether inline or underneath.

4. Keep the form on one page

Your website’s forms should be short enough to fit on one page, and not require clicking through several pages to submit it. Keeping the number of form fields low will help you accomplish this, but should you need a multi-step form consider adding a progress bar to keep visitors in the loop on how much more they need to do. A multi-step form allows you to break up a lot of form fields into more manageable chunks rather than listing them all out on one page.

5. Use form field labels

When using field labels or identifying text, you should aim to make them inline. This takes any possible guesswork out of what the field needs from the website visitor and gives them a sort of template to make form completion quicker. Inline field labels also look a bit cleaner as a result of a better use of white space and minimize the chances of someone putting their information into the wrong field. Sport Clips also does a good job of this in their forms:

6. Utilize inline error messages

Similarly to tip number five, inline error messages effectively communicate any issues with the form completion quickly and cleanly. Rather than a generic message at the bottom or top of the form, an inline error message directs the visitors to the precise location of their error without any added confusion. You can also make this message red or add an icon to the field to draw even more attention to it.

What kind of form layouts and designs have you found to be beneficial for your website’s lead generation efforts? Let us know in the comments!