Thankfully it is rare to come across a website with a form I find confusing or one that forces me to leave the website without subscribing or buying something.  But I am finding forms where PayPal, or Amazon Prime is involved daunting.

Where PayPal and Amazon is concerned, one type of customer will like their process, another type of customer won't and they are certainly not catering to the customer who wants to get through the till ASAP.  These two certainly concentrate on what they want their visitor to do, which is sign up for a PayPal account or Amazon Prime, when all you want to do is pay.

With both these companies, I have to spend an extra few minutes hunting down the tiny line of blue text that I need to follow to complete my order without signing up for additional features - so annoying.  However, for someone else who wants to pay using a PayPal account, or wants to sign up to Amazon Prime then they have made their lives real easy and the sign up along with a product purchase is seamless.

I also came across another well known brand, where I wasn't sure which form I had to fill in first, the gift recipients details or my billing details, then I had no idea until I paid for the item if they had taken any notice of the recipients details - it was a very disjointed experience and not one I'm likely to put up with again.  So I figured it was time to put pen to paper and write a blog about website forms - so here goes. 

Factors that make a person feel confused, lost, annoyed or happy are major aspects of a web form's layout that will either enhance or diminish the user experience.  Getting it right will create a long lasting relationship with customers.

Below, I will review six web form layouts and tell you why they work well, but firstly for those of you who may not know what a web form is I'll give a quick explanation before moving onto the examples.

What is a website form layout?

A form on a website is an area where your visitor can fill out information you need from them.  The layout is the way in which the form is arranged and where it is placed on your web page.

Why is website form layout so important?

You've probably noticed nearly every website has a form.  The layout of these forms play a huge role in how well that form will convert.  Making it easy and seamless will generate more conversions than a difficult or confusing form.

6 Best Practices and Examples of Website Form Layouts

I'm using examples of forms that can be applied to the majority of website types.

1.  Single column layout

Keeping your form straightforward as possible helps you to convert more visitors.  Using a single column layout means no fields will be missed by your visitor.  Using a multi column form can slow your visitor down, mainly because they miss an essential field so your system will not allow them to complete the submission until that form is completed correctly or in full.

Example:
This example shows you a single column format.  The layout is streamlined, straightforward and minimalist which is exactly what you should be aiming for.  This helps your visitor complete the form in a timely manner without making mistakes or causing confusion.

2.  Keep your text to the left

Align all of your form fields to the left side of the web page.  This is the way the majority of us were taught to read so don't fight the norm because you think it looks pretty in the middle.  Do the same with your labels for each form field, that way your visitor knows exactly which label goes with which form field.

Example:
This example shows you left side alignment for both the form fields and labels.  Left alignment makes the form clear for visitors and allows for speedy completion.

3.  One page layout

It is best practice to stick with a one page layout so there is only one form located on any page.

However, as you've experienced when buying a product on line from a company for the first time, they need a lot of information.  To keep things simple these forms are split up into manageable steps, called a multi-step form.  Each page deals with a separate part of the form such as, delivery address, billing address, payment details, shipping, order confirmation.  By using a multi-step form you are making the process look more manageable to the visitor.  Often you'll see a progress bar at the top of the page so the visitor also knows how far along they are, this helps to keep them on the form.

Example:
Pay attention to the forms you complete next time you buy from any well known website for the first time.

4.  Mobile friendly layouts

Mobile phones are used more often then desk top computers to view websites.  However, at the time of writing, a higher percentage of people complete purchases on a desk top.  I don't think it is going to be long before this changes, if companies get it right when securing our data.  Because we are at the tipping point of form completions on mobiles, it's vital your website includes mobile friendly forms.

Example:
This mobile form is simple to use with it's single column layout and minimalist design.

5.  Add inline form field labels

The labels, such as name or address, are inside the field you want the customer to complete.  It takes the guess work out of which label belongs to which field.  They also keep forms looking clean, minimalist, clutter-free, and sleek.

Example:
This form looks shorter and simplistic as the field labels are inside the field.

6.  Use error messages

People will inevitably make mistakes when they fill out a form, and the last thing you need is an incorrect or incomplete form to deal with.  The best way to sort this problem out is to stop the form being submitted if something is wrong.  You then need to highlight the problem by incorporating a red line around the box (read our blog on colour theory) that needs to be completed, and/or giving written instructions above the box so the visitor knows what they have to do.

Example:
In this form the invalid field is highlighted in red.

Conclusion
Get your forms right and you'll leave a positive, lasting impression on your visitors.  Streamline your form so there can be no confusion for your visitor.  Why not take a good look at other websites forms and fill them in to see what you like and what you don't like about them.  It will give you some great experience you can then try out on your own website.

DRA design forms daily, so we know exactly what to do.  If you are looking to commission a new website design that incorporates the best forms then give us a call or fill out our contact form to get a no obligation quote today.

Read our latest website design tips and tricks to learn how to improve your website's look and ability to turn visitors into paying customers.

The 4 Essential Stages of Web Design
Which One is Right for You: Website Design Tool vs Website Designer?
The Ultimate Guide to Choosing the Best Fonts for Your Website
14 Tips for Making a Professional Website in 2022
How to Choose the Perfect Color Palette for Your Website to Increase Sales
9 Steps to Creating a Business Website
What Are the Benefits of Having a Business Website?
The Complete Guide To A Landing Page
The 7 Principles Of Design Applied To Websites
How To Create A Professional Service Based Website For Your Business
Is Colour Important In Website Design
Step By Step Guide: How To Make A Professional Website In 2020
4 Key Satisfaction Factors Your Website Should Have
Should You Consider The Huge Range Of New Top Level Domains
42 Resources Every Web Designer Needs
Why You Need A Dynamic Website
How To Create A Free Business Website

Comments have been switched off for this post!