Explore all the solutions you can create with Paperform: surveys, quizzes, tests, payment forms, scheduling forms, and a whole lot more.
See all solutionsConnect with over 2,000 popular apps and software to improve productivity and automate workflows
See all integrationsExplore all the solutions you can create with Paperform: surveys, quizzes, tests, payment forms, scheduling forms, and a whole lot more.
See all solutionsConnect with over 2,000 popular apps and software to improve productivity and automate workflows
See all integrationsPlenty of research shows that first impressions really matter. And no, we’re not talking about getting the spinach out of your teeth before you strut into a blind date or a networking event. We’re talking about your online forms.
Your overall form design is the first thing people take in when they land on your form. A first impression that’s polished, aesthetically pleasing, and spinach-free (wink) encourages people to stick around and actually complete the form the way you want them to.
Needless to say, there’s a lot riding on your form design. But how do you make sure you’re doing it right?
In this guide, we’re dishing out all of the form design best practices you need to know to pull together an online form that represents your brand, engages your visitors, and most importantly, converts.
The name says it all: Form design is the process of laying out and building a form or questionnaire that people use to submit information to you.
On the surface, forms seem simple enough—it’s just some questions and answer fields, right? But there’s a lot that goes into adequate form design. When you consider the overall use and appearance of your form, you need to consider both:
It’s totally possible to design a form that’s functional but ugly. And it’s also possible to design a form that’s stunning but impossible to navigate. For your online form to perform the way you want it to, you need to hit both of the above aspects with your design: a form that’s both functional and attractive.
Particularly for short or simple forms, it can be tempting to write off form design as unnecessary—something that’s only worth sinking time and energy into if you find yourself with a few extra hours.
However, neglecting your form design does your form (and your business) a major disservice. Your overall design is just as crucial to your form’s performance as the questions you ask. A well-designed form allows you to:
Even if you never have any direct contact or conversation, asking someone to fill out a form is an interaction with your customer. They’re having an experience not just with that form, but with your brand as a whole.
Investing attention into your form design allows you to ensure that experience is a good one, which is important when a whopping 86% of consumers admit they’ll leave a brand they trusted after as little as two poor customer experiences.
You don’t just want people to find your form—you want them to complete it. It’s easier said than done, with 81% of users admitting that they’ve abandoned an online form after starting to fill it out.
Effective form design can help keep them around, and there’s a surprising amount of psychology behind it. Things like colors and even fonts can elicit specific emotions and perceptions, all of which can help urge your visitors toward specific actions.
When someone lands on a form and it looks like a jumbled mess, what impression does that give of the business behind it? They’re sloppy. Inattentive. Unconcerned. All words you’d rather not have associated with your brand.
While an online form might not be as public or prominent as your website, it’s important to remember that, for some people, it could be their first or only interaction with your business. You want a form design that’s actually representative of your brand.
“On the other hand, badly-designed forms can leave users feeling frustrated,” explains Rizelle Maynigo, Visual Designer here at Paperform.
“More often than not, forms can be a final touch point that a user will make with your business—whether it’s sending an inquiry, signing up for your newsletter, or completing a checkout process—so you want to leave a positive impression.”
When you’re geared up and ready to design a form—whether it’s your first or 400th—what does that process actually look like?
That can vary depending on your form goals, timeline, and the different teams or stakeholders involved. But generally, if you’re really committing to high-quality form design, you’ll want to:
Not every form will need every step. Something as simple as a subscribe form with two fields probably won’t require a ton of brainstorming and feedback. But a longer form—like a job application—warrants a little more thought and time.
Sure, picking the right color or font is a part of form design—but there’s plenty more to consider too. In this section, we’re looking at 20 different form design tips to help you build a form that’s:
Let’s start with one of the most important aspects of your form: functionality.
Some forms will require more length than others. But in every circumstance, focus on conciseness and brevity to avoid overwhelming people with a seemingly never ending form. Include only questions and fields for the information you need most and skip the rest.
Our own data here at Paperform shows that shorter forms lead to better conversion rates. Another small experiment showed that removing just one form field can boost form conversion rates by as much as 26%.
Your text alignment isn’t the place to get too clever. Keep all of your text left-aligned on your form. Doing so means all of the text starts on the same side of the form so your eye doesn’t have to scan for the beginning of each line the way it does with center or right-aligned text.
Keep your labels on top of the fields people need to fill in, rather than on the side or underneath. And make sure your labels are close enough to the actual form field that people aren't confused about what information goes where. These seemingly small changes make your form easier to read and complete.
Imagine a form that asks for your first name, then your preferred contact method, then your date of birth, then your last name, and then your email address. Confusing, right?
There’s a design concept called visual hierarchy that explains how our brains process the order of information on a page, and you can use this to organize your form in a logical way—like putting the most important questions near the top of the form.
Grouping similar questions together is another way to use visual hierarchy. To do so, you organize your form into different sections.
“For example, think about a salon appointment form,” Rizelle explains. “You would have a section for customer details first, type of service, booking calendar, and maybe even a payment section for a deposit at the end.”
It’s a helpful way to organize information in a way that makes the form feel more intuitive and predictable to users. Check out the example below.
“Help text” is additional text you include with your questions to provide more information or details. This could be information about your business or even the required formatting for a birth date or a phone number.
These gentle and friendly reminders guide people along as they complete your form and can prevent them from having to deal with frustrating error messages when they try to submit their responses.
People want to know how long a form will take them to complete and using a progress bar is a straightforward way for them to glean exactly how much further they have to go before they reach the end of your form.
Unnecessary questions hinder the functionality of your form—not to mention the fact that they frustrate your users. Conditional logic changes how your form behaves based on specific actions and answers so people never even have to see questions that don’t apply to them.
Your form might look great on a desktop, but what about on mobile? Smaller devices come with smaller screen space and smaller keyboards, both of which can alter the appearance and functionality of your form. Test your forms on a range of devices to confirm they work correctly everywhere.
This is less of a concern if you look for an online form builder that’s mobile-friendly. Paperform’s responsive forms are built with mobile-first design, meaning your forms will automatically scale with any device.
Start your 14-day free Paperform trial now. No credit card needed.
You don’t need to be a designer to pull together a beautiful online form—provided you use the right online form builder. Paperform makes it easy to customize the appearance of your form. Plus, there are hundreds of templates if you’d rather avoid starting with a blank canvas.
Color is fun, but as the sample below demonstrates, using too much on your form can be a real eyesore and can even make it hard to look at and use.
Stick with mostly white space and black font and reserve your pops of color for important information like buttons, error messages, or other details you want to stand out.
And Rizelle advises to think about contrast for easy readability. “You want either light text on a dark background or vice versa,” she says. Notice how the example below, uses the Twitch brand colors, while also ensuring text is legible.
Even if you’re diligent about limiting your questions, seeing a long line of prompts on a form can be overwhelming. Keep both the function and appearance of your form fresh by incorporating some different question types and unexpected elements. Slider questions are one great example.
But be careful not to go too overboard with design elements. “Keep it clear and simple,” says Rizelle. “When it comes to visuals, think about legibility and accessibility too.”
The process of “designing” something might make you think you need to cram in as many clever touches as possible. But when it comes to design, less is usually more. When your form has adequate white space, it feels far more balanced and readable.
Start your 14-day free Paperform trial now. No credit card needed.
You don’t just want a form that looks good—you want one that converts well. One of the first things to consider is your form placement. How easy is it for people to find and access?
Putting it above the fold (meaning, visible without any scrolling) is the best option. Research shows that, regardless of the type of device they’re on, visitors fill out forms more frequently when they’re placed above the fold. In fact, the average difference in how users treat content that’s above the fold versus below the fold is a whopping 85%.
Technically, your entire form is a call to action (CTA). You need people to enter their information and then actually submit the form.
Don’t let your “submit” button be an afterthought. The colors and language you use there can make a big difference. Here are a few tips:
If somebody took the time to complete your entire form but then was met with a generic “validation error” when they actually tried to submit it, do you think they’ll invest the extra elbow grease and detective work to find out how to get it to go through? Probably not.
“I recently had a bad experience where I was completing a checkout form and it wasn’t accepting my address details,” Rizelle shares. “But there was no indication what the error was. In my frustration, I abandoned the cart without completing the purchase.”
Don’t leave people guessing about what errors they need to fix. Call them out in-line on your form with bright text so they know exactly what they need to change to submit the form successfully.
Start your 14-day free Paperform trial now. No credit card needed.
In many cases, your forms will request Personally Identifiable Information (PII). That means there are certain regulations you need to abide by when collecting and managing those personal details.
Skip the stress of wading through legal jargon and look for an online form builder that follows industry standards and best practices with regards to security and compliance.
People are rightfully cautious about sharing personal information in an online form. So when you need to collect something that’s potentially sensitive—even something as simple as a phone number or email address—include a little information about why you need those details and what you’ll do with them. This is another great use for “help text” when building your form.
Data protection and privacy laws can feel daunting and complex. To play it safe, include a link to your privacy policy with any form that requests PII so people can learn more about how you handle their information.
The last thing you want is to create a form and then receive a ton of bot submissions. A CAPTCHA (that stands for the mouthful Completely Automated Public Turing test to tell Computers and Humans Apart) is effective at reducing those.
But these little pop quizzes can also be annoying for real people who don’t want to have to “select all images with bicycles” to get their form to go through. In fact, one small study saw a 3.2% decline in conversions when using CAPTCHAs.
Paperform supports the use of “invisible” CAPTCHAs, which are a happy middleground. They don’t require everybody to prove they aren’t robots and instead monitor audience behavior to only ask people exhibiting suspicious behavior to confirm they’re human.
Start your 14-day free Paperform trial now. No credit card needed.
Form design might sound like the process of putting on some inconsequential, finishing touches. But in reality, design plays a major role in every important aspect of your form—its visual appeal, functionality, and conversion rate.
Needless to say, designing your form is a lot more than picking the perfect color or font. Get it right and you’ll end up with a form that looks great, works great, and makes the best first (or second…or third…) impression for your brand.
Looking for help?
Elevate your form's design by connecting with one of our Paperform Certified Experts. They'll transform your ideas into visually stunning, custom forms that enhance your brand identity — no heavy-lifting required.
Get 50% off all Paperform and Papersign annual plans + save big with these BFCM B2B SaaS deals in 20...
Everything we've shipped for Paperform, Papersign, and Dubble from July to September 2024. Get acros...
Looking for the best teacher software for your classroom? From making worksheets or quizzes to gamif...
Learn To Be has leveraged Paperform to overcome volunteer challenges, streamline their operations, s...