.svg){kind=small}
If you’re running a business online, forms are a valuable tool. They’re a fantastic way of gauging customer opinions and gaining feedback. Perhaps most importantly of all, they can help you obtain customer contact details. You can grow your mailing list and boost your email marketing.
Of course, forms are only useful if they’re done properly. Too many businesses forget one crucial factor: usability. Have you ever tried to fill out a form, only to find boxes that are unresponsive or too small? This experience can be incredibly frustrating, and you might even give up before submitting. The average website user is no different.
But what’s the solution? This article will look at how you can build forms the right way.
But what exactly is the right way? When building forms, it's best to look at each element individually. By bearing these points in mind, you’ll have a clearer plan when writing your website development proposal.
With that in mind, we’ll explore seven different layout options that are sure to hold the attention of visitors.
It doesn’t hurt for users to feel a little more welcome on your form page. Whilst there’s nothing wrong with the standard ‘enter details here’ message, a user isn’t going to feel at home. Instead, why not welcome the user, and thank them for taking the time to contact you?
Below is a good example of friendly feedback form copy.
‘Hi there! Thanks for visiting our feedback page. We want to know exactly what you think of [brand name] so we can make our services better for you. Why not leave your thoughts below? We promise we won’t be offended.
Remember, the goal of every form is to hold the attention of the reader. Multiple columns will only distract and potentially confuse the reader. This means they’ll take longer to complete a form, and could even go elsewhere.
A better alternative is to use a single-column layout. This way, a user can easily work their way through your form. This ensures speed and reduces the chance that a visitor will miss any fields.
Above is an example of a single-column layout. As you can see, this layout puts simplicity at the forefront. A user can easily see what/where they need to fill in. It also has the advantage of rendering nicely on mobile devices.
If we know one thing about website users, it’s that they don’t like to be kept waiting. In fact, research shows that 50% of visitors abandon a website that takes more than six seconds to load. When it comes to creating forms you need to place a similar focus on speed.
This means ensuring that your form loads quickly and smoothly. Below are some methods for ensuring the best possible speed on your form.
When creating shorter forms such as lead capture ones, try to stick to presenting content on a single webpage. Remember, a customer values speed. They don’t want to travel across multiple pages to input information. If this is the case, they’re going to be less willing to fill out your form.
At this point, you may be thinking ‘this is all well and good but what about longer forms?’. It’s true that having a long form on a single page isn’t practical. In fact, a user might be put off by having too much information on a page.
In this scenario, you can create a multi-step form. This form does involve using multiple web pages, but in a way that doesn’t feel overwhelming. With this layout, the different steps to completion are clearly set out. For example, you might have ‘account’, ‘personal’, and ‘professional’ as steps.
A user can see where they are in the process and how close they are to the end. The act of moving from one page to another should feel seamless. This means that a user should have little awareness that they are moving from one page to another.
It might sound basic, but font is an essential part of your form building. Choose the wrong font or color, and your form can be off-putting or look unprofessional.
Typically it's best to stick to black or dark gray text. In general, try to pick a color that suits the background image of your website. When it comes to font design, try to avoid ‘Roman’ fonts as these are usually harder to read. The best fonts are readable even at smaller sizes.
Font size should be equal throughout your form. In other words, the size of the text entered by users should be the same as the size of the question text. Try to pick a size that is sensible (not too big or too small); around 16 pixels is usually a safe bet.
Always use actual text rather than images of text. This might mean that you will need to convert some areas from JPG to PDF.
Finally, don’t forget about links. If you link to any external sources in your form, make sure that links are clearly signposted. It’s best to underline links with a different color than the rest of the text.
One of the most frustrating experiences is filling out a webpage only to find out that something is wrong. This experience is even worse when it isn’t clear what a user has done wrong. They’re forced to sift through the form to find any mistakes that they have made. A lot of users won’t have time for this and will give up.
A far better option is to clearly signpost exactly where a user has gone wrong. Next to each field in your form, add a symbol. If information was entered correctly, the symbol should appear green. If a mistake was made, the symbol should appear red.
Rather than leaving a user to guess exactly what mistake has been made, add additional content. For example, you might have a message informing a user that an email address has been entered incorrectly. Or you might let users know that their password doesn’t contain the necessary characters.
By adding a little more signposting and content, you’ll make users’ lives easier. For more information, read our full article on inline validation for forms.
There was a time when website owners didn’t need to think about mobile users. But this time has long passed. Today, nearly 60% of internet users are on mobile. If your forms aren’t accessible, you’re potentially cutting yourself off from a huge number of responses.
When building your forms, make sure that mobile users aren’t an afterthought. But what can you do to make your forms more usable? Below are some tips to bear in mind when building your forms:
Forms are fantastic tools, but too often they’re badly built. Users get frustrated, and businesses don’t get the information they need. These problems could have been easily avoided by focusing on the user from the start.
Luckily, as we’ve explained here, building forms correctly doesn’t have to be difficult. We’ve explored seven simple tips to set you on the right path.
It’s best to get the entire team on board. Have them compare your forms against the points listed below. It’s a good idea to share development documents so that each member can give their unique perspective (you may need to convert PDF to MS Word to allow your team to edit).
Let’s recap some of the key areas. When building your form did you:
With the right approach, form building shouldn't be difficult. So, why not improve your form layouts today?
Zuko is the most powerful form analytics platform available on the market. Find out how to improve your form and checkout conversion by taking a product tour.
PRODUCT TOUR
