Nothing hurts conversions more than an ugly form. Clashing colors, unreadable fonts, and clunky fields can make a person reconsider giving you their information. However, by following a few key design principles, you can reassure your users and get the answers you need. Read on for web form design tips that will help you create an enjoyable user experience and collect more submissions.
A classic debate in form design is whether to make your forms short or long. The answer? Go as short as possible.
3 Ways to Tackle Long Forms
Questions lie at the heart of your form. The fields you use to gather information affect usability and how people perceive you. Follow these quick steps to make sure you’re providing people with a simple and inviting form experience.
Group related questions into sections or steps if your form has more than six fields. This will guide users through the form and improve the overall flow.
Don’t ask unnecessary questions. People don’t like giving out private information, so be certain you’re only asking for the information you truly need.
Know when it's appropriate to use radio buttons, checkboxes, and dropdown fields.
Use radio buttons when only one answer can be chosen.
Use checkboxes when multiple options can be chosen.
Use a dropdown if there are 5 or more options and only one can be chosen.
Vertically stack radio buttons and checkboxes. Single column forms are easier to visually process, and they are less challenging to fill out on mobile.
Use copy to guide your users and show them how to fill out a field correctly. Field labels also give you the opportunity to explain why you need certain types of information.
The way your form looks has a huge impact on user perception. Don’t turn people away with ugly design. Here’s a simple checklist you can follow to create forms that look branded and professional.
Avoid fonts that are difficult to read. Opt for legible fonts like Verdana and Georgia.
Use images and gifs! Highly visual content consistently performs better than simple text.
Use color to incite action. It's been proven that colors affect people’s decisions in many ways.
Use quick form CSS hacks to enhance your design and nail your company branding.
After you’ve tweaked your form’s length, questions, and overall look, it’s time to finish strong with an awesome submit button. Since this is your call-to-action, it’s one of the most pivotal elements on your form. How you design and position your submit button can mean the difference between getting a ton of submissions or getting only a handful.
To help you optimize your submit button, we’ve put together a 4-part email series that’s packed with recommendations on:
Sign up below to get these form design tips delivered straight to your inbox.