Online forms are about as old as the Internet. Whether you’re creating a profile on Facebook, booking an appointment at a salon, ordering a pair of pants from ASOS, or signing up for a Netflix subscription, you’re likely to encounter a form or two in the process. Online forms have become so synchronous with our presence on the internet, that we simply accept them as the status quo; rarely questioning or even noticing their existence.
And it’s not hard to see why. After all, the actions listed above all have one thing in common: they require the collection of data that is crucial to the completion of the activity itself. Just as a Facebook profile would be rendered useless without first asking for the name of its owner, an ASOS purchase could not be finalised without the customers’ credit card details. A universal need to collect information has made online forms more vital than ever - without us even realising it.
Forms sound simple enough in concept, but the science behind them is anything but. Truth is, form design has a larger impact on our online activity than we give it credit for - and as a result, it has a direct impact on everything from sales and conversions to retention, trust, and loyalty for businesses.
Forms are the foundation of the ecommerce industry. We use forms to search for products, submit our orders, and to pay for goods.
When it comes to ecommerce, online forms can define the entire customer experience, thereby influencing whether customers will complete a purchase and return for another.
At the heart of every business’s success is capturing information, making sense of it, and putting it to use. From client onboarding forms to feedback surveys, forms are a method of communication with your audience.
Without forms, smooth operations for teams are almost impossible. Taking a vacation? Your manager would ask you to fill out a leave form. Applying for a job? You’d likely be asked to attach your CV to an application form. Using a task-manager app? If you think about it, the very function of such apps requires you to complete a bunch of form fields in order to create a task.
Here at Paperform, online forms are an irreplaceable part of running our business. Here’s a duplicate of the real form we use for reporting expense claims:
Getting people organised is no mean feat. Whether you’re planning a conference, coordinating a class, or booking an appointment or delivery, you need to gauge interest and capture the who, what, and when of your attendees.
But registration forms, booking forms, and event forms are also a two-way street; they need to provide rich details about what an attendee is in for, as well as automatically send off that all-important confirmation email. And to top it off, these forms will often need to collect a one-off or recurring payment upon submission. There are a lot of moving parts here, and if they are brought together properly, you’ll not only be able to avoid hiccups in planning, but also raise your attendance rates.
Questionnaires, surveys, and polls are all excellent ways to gather both quantitative and qualitative data, and ultimately make sense of the world. Whatever that burning question is - Who are my users? What are their pain-points? What personality type are you? Do you prefer cake or pie? How many children do you have? - asking well will help you get quality information and invaluable insights.
All social networks start with one form — the sign-up form. The sign-up page is arguably the most important web page that Facebook or Twitter have ever designed as it has a direct impact on the number of people who decide to join the platform. By looking at how the sign-up pages of the largest platforms out there have changed over time, we can trace the history of the web and the evolution of web design as a whole.
Since you’re reading this ebook, you are most likely among the people who are shaping the web. At some point you must have built a web page or an online form, and if you haven’t, you most likely will have to at some point. Our mission here is to help you create forms that perform better for you and your business.
A large part of this ebook is about designing forms that people will enjoy interacting with. We’ll dive into the psychology that motivates people to complete forms, and the factors that could be preventing you from achieving the conversion rates you desire. Above all, we’ll help you create forms that provide the best possible experience for your respondents.
An aspect of online forms that is often overlooked is the management of data itself - which is ironic considering data collection is the primary goal of any form. You can create the most beautiful form in the world, but if it fails to provide you with the data you need in exactly the place where you need it, it won’t help you achieve the goals you set for it in the first place.
Designing a form is about more than creating something visually appealing. The internal architecture of your form, specifically the automation of your data collection, storage and usage processes, plays a big role in its success. We’ll dive into the strategies that will help you manage your collected data in a more efficient, scalable, and affordable way.
As more businesses invest in their online presence, design has to do more than simply enhance a form’s experience, it has to represent brand. At Paperform we’ve seen a significant number of traditional businesses bringing their existing presence (and with it their forms) into the digital realm; that number is growing rapidly. We’ve realised that it’s not enough to primarily facilitate tech businesses, we’ve also got to better facilitate this transition. It’s not enough to empower companies to create engaging online lead forms, quizzes, and surveys, we must also champion the re-creation of registration forms, client intake forms, mortgage calculators, design scopes, bookings forms, and more, all with brand presence in mind.
In 2008, Jared Spool wrote a famous foreword in which he described how the redesign of a single form led to a 45% increase in purchases and $300 million dollar boost in revenue for the company in question.
Spool added that the original form placed on the ecommerce platform had two buttons (“Login” and “Register”), prompting the shoppers to sign up in order to complete the purchase. Once the registration was made optional, with the “Register” button replaced by “Continue” — the number of successful purchases increased dramatically.
When it comes to forms, things can just as easily go south.
During the 2000 U.S. elections, the voting ballots in Palm Beach, Florida were so confusing that thousands of people ended up voting for the wrong candidate purely by mistake. In addition to that, more than 29,000 ballots were thrown out because they included the names of more than one candidate or had no holes punched at all — again, due to a fault in the design of the form itself.
Check out a copy of that notorious ballot for yourself:
"This “User Interface” web app paints a clear picture of what happens when forms are designed poorly. Within a few minutes, it’ll make you suffer through the worst possible scenarios of filling out a form online: misleading or missing labels, impossible to close pop-up windows, confusing password rules and more."
Just as a poor form can break your business, a good form can help it reach new heights of growth, sales and leads. In this ebook, we’re going to help you discern the good from the bad and ultimately create forms that even the most impatient of users would be happy to complete.
In the past, most traditional businesses literally built their brand with physical stores or offices - visitors would see your offering and brand through window displays or neon signs before stepping in, engaging, and offering up their information or making a purchase. As these businesses move their presence online, that process is switched on its head. There’s no guarantee someone will land on your website homepage and fully engage with your brand before they encounter your form.
This means that forms can’t be purely administrational - they must be placed within a context; and not just the immediate context of the form’s purpose, but also a brand’s general context. If you want people to trust you enough to engage, to give up information, to believe in the quality of your product and buy it, you have to let your brand shine through. When you create forms that are part of your wider narrative and that are compelling, you’ll see results.
While getting a form up and running could be an easy 2-minute job, creating a form that actually motivates your respondents to share the right information with you is a whole other ball game. Truth is, filling out a form is almost always an investment for the respondent - an investment of time and sometimes even money. With our attention span as humans getting shorter with every passing year, creating forms that drive quality responses is harder than it seems. The extent to which you’re able to successfully draw out information from your respondents depends largely on the quality of the form itself. You’ve got to understand how people behave generally, who your particular audience is, and then craft a form that appeals to them and imbues trust.
In order to design better forms, you first need to get to know your audience. It’s impossible for you to establish that all-important trust unless you can understand the motivations, fears, goals, and perspectives of the people you’re hoping to reach.
Before creating your form, ask yourself the following questions:
There are some universal principles that guide how people react to online forms. While knowing these patterns is helpful regardless of who your audience is, it’s even more useful to consider how these behavioral principles are going to apply to your particular audience.
As mentioned, one important consideration in form creation is whether or not your respondents already know you or your brand. If they do, they are more likely to complete the form, do it faster, and even provide more detailed responses. According to PwC’s Global Consumer Insights Survey (2018) which surveyed over 22,000 people, 35% ranked “trust in the brand” as one of their top three factors in choosing to purchase from a retailer. It’s a valuable lesson for more than just purchase-decision-making; trust is vital in eliciting any kind of response from your audience.
Another important variable is how technically-savvy your respondents are. Generally speaking, if they’ve had less exposure to digital devices, they’re more careful when filling out forms. They take their time to read all the explanations, and if something is confusing, provided their incentive is not strong enough, they’re more likely to give up.
A study by The Baynard Institute found that 26% of users abandoned ecommerce transactions because the process was either too long or too complicated. Requiring shoppers to fill out too many fields resulted in them becoming frustrated or confused and abandoning the process altogether.
Can you predict which device your respondents might use to access your online forms? If they use mobile devices, even if the form is beautiful and responsive, their attention span might be shorter and thus they might either close the form or fill it out quickly, without much care.
Based on these factors, in their book Forms that Work: Designing Web Forms for Usability, Caroline Jarrett and Gerry Gaffney divided all the form-respondents into three groups: Readers, Rushers, and Refusers.
Let’s have a look at how different respondents would tackle the same form.
Readers read forms carefully. If your respondents are older and less tech-savvy, or if your forms are rather complex, they are likely to carefully read all the information and descriptions. Be aware of that when designing your forms — don’t overcomplicate things unnecessarily.
Rushers, as the name says, are going to fill out your form as fast as possible, spending little time to read the labels and descriptions. Rushers are usually the more tech-savvy respondents, who either don’t know your brand well, or alternatively, are very familiar with what you’re doing. Rushers love forms that are intuitive, broken into logical sections and don’t have too much text and media on them.
Some people don’t want to fill out your forms. They are either not the people that you’re looking for, or your forms just didn’t persuade them for some reason.
Your mission is to minimize the number of refusers. Here are some quick tips to do exactly that:
Understanding your respondents is vital, but it’s equally important to build accessible and intuitive forms. Some other rules of human psychology come in handy for that. In particular, you need to understand how people perceive forms visually, consume information, and why timing matters.
It’s important to pick the right time to ask questions. Think of your forms as a dialogue with your respondents.
If they’re not familiar with you or your brand, at the very beginning you should introduce yourself. Then, unless the form is meant to be anonymous, you’d probably want to know their names as well.
Next, think about what general information you might need to know about your respondents. Try asking for only those details that you definitely need — remember that you want to minimize the investment on your respondents’ side.
Finally, try to build up your narrative to collect the rest of the information as seamlessly as possible. Don’t jump ahead; ask questions in a logical order. Think of when you are buying a t-shirt in a store — the assistant would first ask you your size and what design you like most, and only later whether you’d like to pay with cash or credit card.
Not all questions are created equal. Oftentimes, your respondents would be fine answering some questions, while others might seem annoying or intrusive.
It’s important to balance your forms. Don’t ask too many hard or time-consuming questions in a row. Instead, try pairing them with quick and easy ones. It’s a good idea to use a progress bar to show your respondents that they’re moving through the form and how many sections or questions are left.
Both convention and data dictate that the shorter a form is, the more likely it is to have a high completion rate. Every additional field on a landing page creates more cognitive friction, which then decreases the odds that a person will complete the form.
We were shocked to discover that there weren’t any research-backed insights to share on the subject specific to form creation. So, we deep dove into the data available to us at Paperform. After painstakingly wading through a sample data set of four thousand forms, generally we found that the more fields you have, the lower the completion rates.
However, not every form is destined (or even qualified) to be short in nature. Take medical history forms for example. Their very function is to collect as much information about a patient’s medical history as possible. In such cases, there are a few psychological cues you can use to improve completion rates and provide a smoother experience:
However, you also shouldn’t make your forms longer just because you can. Each individual form has an optimal length, based on a variety of factors. In order to calculate the ideal length for your form, ask yourself the following questions:
One of the key factors in shaping the success of your forms is the level of trust you’re able to establish with your respondents. As it stands, building that trust is closely tied with a variety of psychological factors that impact the respondent’s propensity to respond in an open way.
If you’re able to understand the factors that motivate and deter respondents from openly providing you with the information you need, you’ll be able to create forms that attract higher response rates.
It’s easy to get carried away with creating a form as quickly as possible and ticking another task off your, no doubt, long to-do list. Creating a form that is going to not only see high engagement, but also gather meaningful responses takes forethought. Remember that your respondents don’t have your context - you have to know your audience and guide them through the form in a way that clearly shows them who you are and what you’re asking of them.
Taking the time to nail your target audience and appealing to them accordingly will do more than just get results; as you start to see people engage with your forms you’ll quickly gain better insights into how those forms can be better optimised. You’ll have more clarity on what’s getting a response, which questions people are avoiding, and refine your target audience further. Ultimately, you’ll be able to make good decisions based on reliable data, or improve that bottom-line.
When it comes to crafting smoother experiences for respondents, few things matter as much as the overall structure of your forms. In order to provide a great experience, your forms should be ordered in a manner that is not only logical to you, but also intuitive for your respondents to navigate through.
What do you stand to lose with a poorly structured form? A lot more than you think. The journey you create with your form can ultimately make or break its completion rate, especially if your audience is just getting to know you.
While we’ve established that having longer forms doesn’t necessarily guarantee poor completion rates, it can have that effect if accompanied by a confusing form structure. If your forms have more than four questions, it’s crucial to split your questions and elements into groups. These groups can then be used to divide your form into well-crafted pages or sections, making longer forms more approachable and reducing the cognitive load for your respondents.
It’s been proven that setting and accomplishing small goals can cause a spike in dopamine, encouraging the brain to keep repeating the associated behaviour to replicate the sense of achievement that comes with completing a task. By incorporating pages or sections into your forms, you can divide your questions into stages or steps, allowing your respondents to feel a sense of accomplishment with each completed step - and evoke a desire to keep completing more with every hit of cognitive closure.
Forms with multiple steps are often referred to as multi-step forms. These forms have been shown to outperform single-step forms when they contain more than four input fields through various case studies. One case study by Conversion Fanatics found that a streamlined multi-step form on a landing page saw an increase in conversions of 52.9% compared to the old version. HubSpot argues that registration and order forms in particular, which require a lot of information, “almost always” see improvement when split up into multiple steps.
Multi-step forms aren’t the same thing as multiple page forms. A step may be a page, or it could be a series of questions grouped together with other content in-between, or even chunks of content that appear on one page conditionally based on responses already given.
Breaking your form into bite-size pieces is a good step in improving response rates, but that doesn’t necessarily mean the more pages you create, the better a response you’ll see. Too many pages, and you risk fatiguing your respondents, leaving you back at square one when it comes to creating an approachable form.
Our research found that multiple page forms can actually produce successively higher drop-off rates as respondents progress through the form.
When analyzing 4040 forms, we found that adding a second page to a form caused the average completion rate to drop by more than 15%, from 82% to 66%, and that rates failed to rise above 65% for forms with more than two pages.
In case you’re wondering (as we did!) if this is because multi page forms tend to have more fields, we found this to only be the case for forms with just a couple of fields. Once the forms had more than a few fields, it actually made little difference. Forms with the same number of pages but with varying numbers of fields produced similar average completion rates. The takeaway here being that throwing in page breaks willy-nilly is not going to automatically improve your completion rates.
So which gets the best results, multiple or single page forms? ? There’s no blanket answer here - it simply depends on the type of form you’re creating. Context is key - the main question to ask is whether your questions, and by extension steps, benefit from being seen within the same immediate context. For example, ask practical questions, like whether your respondents will need to draw on previous answers or copy from earlier in the form that will be inaccessible if it’s 4 pages back from the question they are currently on.
Is your form from an industry that relies heavily on visuals for conversions, like fitness or photography? It’s probably best to then have multiple steps on one page that also displays vibrant and eye-catching visuals to entice your customers to hit submit. Are you creating a form that is highly conversational like a lead-gen survey? Pagination will better facilitate a conversational feel. Are you creating an eCommerce form? In that case, a “one thing per page” approach as outlined by Adam Silver in Smashing Magazine is tried and tested (it resulted in an additional 2 million orders per year!).
Do some research on what motivates your particular industry, and then keep that motivation in mind as you make decisions about delineating pages. If you’re looking to deep dive into whether pagination is right for your form, this detailed discussion lead by UXmatters gives excellent insights from eight experienced contributors into the subject.
5 Tips For Multi-Step Forms
When creating multi-step forms, remember that it’s about creating a smooth experience. Make sure none of the sections stand out as surprising or disjointed from the form’s context.
Aside from the order of your questions, it’s also important to consider the format in which they’re asked. It may not seem like a make or break factor, but choosing the right type of input field for each question has a huge impact on the quality of the information you collect. It’s also incredibly important for function; form creation tools will ask you to choose a question type for each field as it will dictate how that field behaves. For example, ensure when asking for an email address to use an email field type, as it will usually check to make sure the format entered is correct. Below are some of the most common types of form fields, and how best to use them.
Text fields allow your respondents to insert free-text as a response. This field is very universal and works well for collecting both short snippets and longer responses.
Email fields are text-fields specifically designed to collect emails. These fields are very useful as they help verify that the respondent has indeed provided an email address in the correct format.
URL fields collect links. Same as with emails, it’s useful to have them identified and classified as URLs automatically for reporting and analysis.
Yes/No fields are ideal for asking, you guessed it, yes or no questions.
Address fields are better off not being simple text fields, as they require the collection of a few separate data points like Street Name, Zip Code and/or City. The alternative (a simple text field) would produce a variety of answer types that might be missing crucial elements, difficult to mine for data, or incomprehensible.
Country fields allow respondents to choose a country from a dropdown list, allowing you to eliminate invalid choices.
Date fields usually have a pre-formatted field or calendar to enter a date into, like a date of birth. You can often set default dates which save your respondents time and effort.
Multiple Choice fields allow your audience to choose one or a few options from a selection of predefined options.
Dropdown fields ask your audience to choose a one (or sometimes more) options from a list of options, and are usually searchable.
Time fields are designed specifically to let your respondents select a particular time.
Scale fields display a range of answer options across a scale that can help respondents express their attitude towards something. Options across the scale can be both numerical or written statements. Scales can be effective visual fields when used correctly and are often easier to tackle than multiple choice from a cognitive standpoint.
According to web conventions, an asterisk placed next to a question usually indicates that it is imperative for the respondent to answer the question in order to submit the form. Alternatively, some questions might have the words “required” or “optional” placed next to them.
In a perfect world, all the forms would be as concise as possible, and your respondents would never want to skip any questions. But in practice, it’s useful to let your respondents know which fields are required and which are optional. This allows you to collect the information that’s pertinent while also collecting data that the respondents might be giving out voluntarily.
This is particularly important for personally identifiable information - like phone numbers, email addresses and physical addresses. People require a lot of trust to give away this kind of information, so if you don’t really need it, don’t mark it as required - as doing so could directly impact your completion rates. If you decide to mark a field as not required, then ask yourself whether you need the field at all.
The main goal of question titles is to help your respondents understand the exact information they’re required to provide. Keeping question titles as clear and succinct as possible will help remove any friction from the completion process, as questions that are worded confusingly can often stump respondents to the point of abandonment.
Not all questions require a full sentence. Sometimes, short titles like “First Name” or “Email” work best, as they require minimum cognitive effort and leave no room for confusion. This is great for admin forms, or professional surveys.
In other instances, a full question like “What is your name?” will be more appropriate - the form will feel more conversational and less confronting.
Some instructions or descriptions accompanying form fields are required for legal reasons, but most are written to provide clarifications that make the form easier to digest for respondents.
A common problem with instructions is that people tend to either write too many, or use confusing language. Forms like the one below are, sadly, still quite common around the web.
Try to cut any unnecessary instructions from your forms. Think of how to express the same sentiment in fewer words.
When writing titles and instructions, it’s also important to use the right words. Avoid words which may come across as negative, aggressive, or pushy. Check out the nearly-complete list of these words.
Instead, choose a tone and voice that will make your respondents feel safe and calm. Be friendly, encouraging, and express gratitude as much as possible.
At the end of the day, the way you ask questions will impact how respondents will view you, your brand, and the importance of completing the form itself, so it’s worth taking just as much time to consider how you ask questions as it is to consider what you’re looking to get out of it.
We hate to be superficial, though admittedly not quite as much as we hate unattractive web design. As it turns out, we’re not alone - 75% of consumers admit to making judgements about a company’s credibility based on the appearance of their website.
And while forms may seem like a minor element within the wider context of your webpage, they also happen to be the point at which you require the most from your customers, the point at which you expect them to respond.
As long as you stick to all the best practices of form design (clear messaging, the right questions, and a strong structure), your form’s experience will satisfy even the most demanding respondents. But reducing cognitive friction is only part of the solution for optimizing response rates; your forms must motivate your respondents to engage. That’s where your form’s appearance comes into play. Aesthetic appeal isn’t just a “nice to have” afterthought for forms, it’s a powerful motivator on two fronts: firstly, visuals communicate your brand and imbue trust, and secondly, aesthetics and visuals are strong players in eliciting an emotional response from an audience.
The biggest challenge, however, is that multiple variables need to be tested and perfected to create a visually successful form. In this chapter, we’ll dive into the pillars of form design aesthetics and show you exactly how to conquer them all - one by one.
Think of the title of your form as the subject line of an email. If respondents can’t immediately comprehend your form’s purpose, they’re unlikely to trust it and contribute their data to your cause (whatever it may be).
A general rule of thumb is to keep your form titles as simple as possible. For example, if you’re creating a registration form, make sure to include the word “registration”, “register” or “sign up” in the title. This will help your respondents understand exactly what you’re asking them to do as soon as they land on your form.
Do your forms look generic? Do they have the same background, layout, or typography as millions of forms out there? Do your forms feel truly yours? Such forms, even if they look great, are less likely to build trust, and in turn, convert. Most importantly, if they are not consistent with your unique branding, they fail to establish a meaningful connection with your respondents.
That’s why customization is so important. Theming your form is all about the little details that make your online pages look unique and authentic.
1. Know your brand
Before creating your forms, try to determine whether there’s a consistent style across your other web pages and materials. If not, you might want to introduce one. The elements of a digital style-guide might be the following:
2. Understand your form’s purpose within the context of brand
When it comes to creating your form, determine what you are trying to achieve with your web form as part of your brand’s narrative. What is your brand story, and how does this web form fit into that broader narrative? It’s this story that people are buying into when they decide to hand over their information or money.
3. Plan your form’s visual layout, copy, and questions to be a journey that culminates in action.
Use your visuals to create momentum - spur your users on with emotive visuals of your brand and product, all the while capturing data.
While this is particularly effective for those industries that rely heavily on visuals, like photographers, creatives, real estate, etc., it will have an impact for even the most data heavy of forms like educational surveys, job applications, or medical questionnaires.
Above all, be human and genuine in the narrative that you create. The Paperform platform provides a tool that creates easy, beautiful, super-customisable landing forms and product pages, but our story and brand is really about inspiring people from all walks of life to create what they thought they couldn’t on their own. It’s a story of independence and empowerment.
What’s your story? How is your form part of that story? Who are you telling the story to? What visuals will move people to buy-in? We’ll help you through these important questions and show you how to best theme your forms.
The theming of forms consists of general brand elements we’ve already mentioned, as well as certain web elements which are applicable solely to forms.
There’s a substantial amount of evidence that shows that our decisions are primarily driven by emotion. Even if you’ve set out to purchase something you need for very practical reasons, you’ll end up making your final decision based on how the product pitch makes you feel.
It’s such a powerful phenomenon that research by McCombs has shown that consumers will first purchase based on emotion and then manipulate their logic to justify their decision. In fact, Antonio Damasio’s research shows that not only are we driven to decisions by emotions, but that without it our ability to make decisions is stunted.
The takeaway is loud and clear here - if you want someone to complete a web form or purchase your product, you need to emotionally provoke your audience into action.
If all online content were only displayed as text, we’d all be living in a very boring world. After all, humans are visual creatures: it’s been proven that 65% of all people are visual learners and comprehend information better this way.
Even for those who aren’t visual learners, images and video have the potential to communicate certain information faster and with more clarity. MIT neuroscientists discovered that the brain can identify images seen for as little as 13 milliseconds, and that our brain instantly strives to make sense of those images. An infographic or short video has the potential to convey more meaning than a text-heavy explanation and in a fraction of the time.
And it’s not just in the moment either - an image can sit unconsciously in our mind and influence our decisions into the future. CrowdRiff calls this ‘visual decision making’, and its potential is incredibly powerful when harnessed. We mentioned earlier in this chapter that emotionally engaging is key in getting a response from your respondents; images and video are two of the most powerful media that can emotionally move your respondents to act.
Visuals also help to establish a trusting relationship with respondents, especially if they can relate to them somehow. That’s why many companies place logotypes in the forms they send out to their customers or users — it’s a fast way to connect.
Adding any old graph or photo won’t increase conversions. Selecting the right image for your form hinges on pinpointing the type of emotional response you’re after. A study by SMITH has shown there are eight distinctive emotions that drive purchase decisions: (in order of prevalence) Needs Validation, Decision Anxiety, I’m Special, Got to be First, Know-It-All, Buy And Be Done, Want Some Fun, and Avoid Remorse.
While the focus of the study is on eCommerce interactions, the motivations defined here can be applied to a wider subset of form use-cases. Visuals that cater to these emotions will get a response. Determine what types of emotion you want to tap into for your form, but avoid selecting more than three, as you’ll cloud your message. Certain emotions naturally group together, and certain products tend toward particular emotions. SMITH’s report can help you figure this out. When you have, select visuals and copy that appeal to these emotions.
Your brand plays a part here too. Take for example, Apple - their brand is about imagination, design and innovation, and their associated visuals are geared toward those who want to be seen as trend-setters, have fun, and feel special. They are king at creating and choosing visuals that tap into and magnify these emotions.
Adding relevant visuals to your multiple-choice questions is a very effective technique to increase conversion rates and make forms more fun and easy to fill out.
An important thing to remember when using multiple images across your forms is remembering to be consistent. Try making your images have the same size, opacity and style.
Selecting the right colours for your web forms is no magic — it's actually pure science. The colour-wheel theory goes back to the mid-1660s and Sir Isaac Newton, who discovered the visible spectrum of light and mapped it out.
It’s worth noting that there are two types of primary colours; additive and subtractive. The additive primary colours of red, green, and blue describe the mixing of light, and are used in fields like photography or for electronic displays. The subtractive primary colours of yellow, magenta, and cyan are what you likely have already come across at school, and describe the mixing of pigment. They are used in fields like painting or printing.
In modern web design, we mostly use the RGB colour-wheel (red, green and blue). By mixing these additive primary colours, we receive the secondary colours of cyan, magenta, and yellow.
There are also so-called tertiary colours, formed by combining a primary colour with the secondary colour. These are: azure, violet, rose, orange, chartreuse, and spring green.
Using an RGB colour wheel, it’s possible to come up with combinations of colours that would match well together - keep these in mind when selecting your palette:
Complementary are the colours located across from each other on the wheel. These colours would look very bright and contrasting. Whenever using the complementary colours for web forms, be quite careful, as they might look too aggressive or be distracting for your respondents.
Monochromatic colours, on the other hand, are easily balanced. These are the tones or shades of any single hue on the colour wheel. Using various tones, tints, or shades of a colour allows you to create both consistency and contrast simultaneously.
Analogous colours are the neighbors on the wheel. These colour-schemes are usually not contrasting and might be a good choice for the online forms. Be mindful of balancing the shades and tones of the colours however.
Triadic colour palettes are more versatile as they feature three colours evenly spaced on the colour wheel. Tetradic schemes follow the same principle, but with four colours. Depending on the complexity of your forms, these might be an overkill, as too many colours might confuse your audience.
Your web forms are essentially made up of sentences, words, and letters. But the same letters can look and feel different — and the difference is in the typography. Knowing the basics of how fonts impact design is extremely helpful for creating forms that convey the right meaning.
There are five basic classes of typefaces: serif, sans serif, script, monospaced, and display.
Serif typefaces have small lines on the strokes of the characters. Sans serif typefaces do not have these details. Both serif and sans serif fonts are widely used for headings and regular text.
Display and script typefaces are more specified in that regard — they are usually used specifically for headlines, as they’re practically illegible when used for large chunks of text. If you’re curious, try them out (see Staatliches or Playball fonts) on your forms and see what we mean here.
Monospaced fonts are named such because each of the characters occupies the same amount of horizontal width. Monospaced fonts are oftentimes used to display technical text like code or mathematical formulas.
Most modern form creators will allow you to customize the styles of each of the text tags used to construct forms:
Google Fonts provide a great catalogue of open-source fonts — it’s a great place to experiment and search for inspiration.
If your forms have multiple pages, you need to have clear and simple navigation for your respondents. Some people might want to review all the form’s content before proceeding, or come back to look up the data they’ve already filled in.
Today, there are three widely used navigation elements:
Definition: when it comes to form design, a call to action (CTA) is a button, or other element, that prompts an action — like submitting a form or completing a purchase.
As a rule of thumb, your form should have only one clear call to action. Ellie Mirman, VP of Marketing at Toast, found that for email campaigns, one powerful CTA alongside strong copy improved click rates by 371% and sales by a staggering 1617%.
For landing pages and websites, having one CTA may feel limiting to an audience who wants to explore your site, so having secondary or multiple CTAs can produce great results. However, an audience uses an online form for one purpose - your job is to steer them clearly towards that goal culminating in a final act of completion.
If your form has two or more different CTAs, it dilutes the strength of your CTAs, may confuse your respondents, and can cause decision paralysis.
The wording of your CTA should be punchy, powerful, and affirming. The traditional “Submit” seems somewhat dry, but to your respondents it represents a small triumph. If you’re creating an eCommerce form, something like “Buy Now!” brings about a sense of completion, or if you want to be quite clear about the next step, “Continue to Checkout” will alleviate any anxiety your customer may be experiencing during the process.
When designing the copy for your CTA, consider whether there are any legal requirements. For example, depending on geographic location and the nature of information being collected, you might need to change the text of your submit button to a different sentence like “I Agree And Submit”.
Don’t include so-called “destructive” CTAs, like “Clear Your Form” buttons. Many respondents find such buttons confusing, click on them accidentally, and lose any progress they’ve made.
A CTA is a powerful thing - think about your form’s goal, and take some time to get it right.
Definition: success pages are also referred to as “Thank You” pages. These are pages shown immediately after a form is submitted, and used to thank your respondents and/or provide additional information.
Finally, when your respondents have made it through your form and clicked on the CTA to submit, they land on a success page (if you created one for them). We could write a whole other eBook on success pages alone, but we’ll just mention the most important points on success pages for now.
Generally speaking, success pages should thank the respondent for their time, summarise any important information from the form they’ve just submitted, and set expectations of what is to come next, including providing additional information.
The real power of customization comes when you dynamically pipe the answer values (data) that your respondent has just provided into your success pages. This allows you to make your pages truly personal and engaging, as well as provide an accurate summary of any responses you want to double-check are correct.
Most importantly, a success page continues the flow of your respondent’s experience with your brand. Remember that while the form’s journey may be complete, your relationship with your respondents will be ongoing. You could even extend your flow to include a conditional redirect from your success page to a specific form or page based on a given respondent’s answers.
As with a lot of other aspects of your form creation, creating the right success page for your form will also depend on your use-case. Here are some rules of thumb for some specific use-cases that you should consider tailoring to your success page:
eCommerce: either include a summary of the order and purchase in the success page of your eCommerce form, or alternatively use the success page to clearly state where their order summary will be sent. For example: “Thanks for your order! We’ve sent a summary of your purchase to…”. You may also benefit from redirecting back to another form or page with similar products.
Registration: include a summary of the respondent’s selections for the event or program, and if the form includes payment, use the success page as an opportunity to clearly communicate where a summary of their registration can be found. You might also like to add some tantalising information about the event or program to get them excited, and spread the word.
Bookings: a success page is a great place to display a summary of an appointment or booking made on a form, especially as it provides an opportunity to catch any errors in timings. It’s also a good idea to add more detailed information about the appointment and requirements that you didn’t want to delve into on the form itself.
Surveys/Quizzes/Questionnaires: Questionnaires are usually about getting results. It’s not just about summarising what data, but making sense of that data. Success pages provide an opportunity to share unique results with your audience. You may like to provide a score total, or display content that is specific to any given respondent’s answers. Use logic to tailor meaningful answers and insights immediately to your audience.
Not for Profit: your success page here is a place to thank your donors, volunteers, and contributors, and to affirm the contribution they have made. Remind them of the impact they are making as an individual, and empower them to do more. You might benefit from using images or video in your success page to reinforce the message behind your cause.
As much as the appearance of your form matters, this shouldn’t come at the expense of accessibility. When accessibility is overlooked and your respondents’ experience is impacted, then other aspects of forms design cease to matter.
Outline the data you need from respondents. When it comes to designing checkout forms, less is truly more. The Baymard Institute found the design and flow of checkouts to be the sole cause for users abandoning their carts and accounted for abandonment rates of 69.57%, so keep your checkout forms as short as possible.
Keep question titles simple. As checkout forms use fairly standardised language across most businesses, it’s best to lean into your respondents’ instincts and expectations by maintaining simple question titles like “First Name” and “Last Name”, as opposed to more conversational titles like “What is your name?”. This will also help expedite the checkout process.
Divide questions into stages. There are 4 key stages to consider in checkout forms: contact information, shipping information, payment information and a summary containing all the products being bought and their total pricing.
Eliminate registration steps from the checkout process. Being forced to register for an account as part of the checkout process is another leading reason behind shopping cart abandonment. To combat this, it’s best to give your customers the option to register once they’ve completed the checkout process.
Include an auto-complete address field. Using geolocation or Google’s API, your form can auto-complete a customer’s address as they begin to type it. This has been proven to help users complete forms up to 30% faster.
Be transparent about fees. As we mentioned, over 60% of shoppers abandon their carts due to unexpected shipping costs in the final stage. It’s crucial to not surprise customers with shipping costs at the very last stage of checkout, so it’s best to include a cost summary on each page to ensure the total cost is clear to the customer. If you offer free shipping, it’s best to highlight this fact early.
Use a single-column design. Multi-column form layouts are prone to misinterpretation, as they can lead to users to puzzle over the order in which to proceed with completing it. On the other hand, single-column forms have a logical flow which has been proven to decrease completion time and help respondents focus on one question at a time.
Include trust seals on the payment page. In 2015, it was found that 15% of US shoppers abandon their shopping carts due to concerns about payment security. Trust seals and badges are symbols that you can place on your website to let visitors know that their data is being collected by secure third-party providers. According to this study, adding trust seals to your payment forms can boost conversions by up to 137%.
Choose the right colours for your checkout form. While the colours you choose largely depend on your brand’s theme and the emotions you’re aiming to evoke in your customers, there is one rule of thumb that generally works well - using high contrast colours between your background and your buttons and text. This not only makes the text and CTAs on your page stand out, but also helps make your page more accessible for colour-blind visitors.
Understand the goal of your registration form. All registration forms have one overarching, universal goal: to drive as many registrations as possible. So whether you’re designing a registration form for an event or a signup form for your sporting team, the registration process needs to be designed in a way that attracts the maximum number of form completions possible.
Only ask for what you need. In order to receive as many registrations as possible, it’s crucial to reduce the friction between someone starting and finishing your form. Write down all the information you absolutely need from your respondents and only ask for this information - any extra “nice-to-have” questions are bound to decrease the completion rate. Don’t believe us? Expedia lost $12 million per year by asking one additional question in their registration form.
Give your audience a reason to register. Showcasing the value of registering for your service or event can also expedite the form completion process. Take a look at Twitter’s registration form below. By displaying the benefits of becoming a Twitter user right next to the form fields, Twitter’s registration page provides a strong motivation for respondents to quickly complete the process and join their service.
Use the right input fields. This can save your respondents' time, as some input fields require them to have unnecessary interactions with your form. For example, using a dropdown field for ‘Gender’ questions is likely tedious for the respondent, as they would first have to click the field to see the options of the dropdown and then select their gender from the list. In fact, some designers argue that dropdown fields should always be a last resort. A smoother alternative would be to use radio buttons that display all gender options immediately, without any effort from the respondent.
Split long registration forms into stages. Take AirBnB’s registration experience for hosts as an example. Their registration form first draws in potential hosts with a simple, 1-question form that allows them to estimate the monetary value of renting out their space. After this, it leads them to a simple first page with questions about their contact details. Eventually, the 3-step registration process guides the user through crucial questions about their property, with questions getting progressively harder with each stage. The registration process is so extensive, that if it were all displayed on just one page, it would likely cause their completion rates to plummet.
Avoid using Captchas. Using Captcha boxes can cause a drop in signups by up to 30%. Using an automated spam detection service might be a better alternative, as it would remove a time-consuming element from your registration process.
Remember to A/B test colour schemes. While certain colours are known to elicit specific emotions in respondents, it’s best to keep testing your registration process with different colour schemes to ensure your form is optimized.
Place your brand front and centre. When it comes to registration, respondents need to know exactly which service they’re signing up for - and what that implies for their lives. It’s best to make your brand the hero of your registration process to incite trust and encourage recognition. Try to use colours consistently (as they increase brand recognition by 80%) and design a registration form that is representative of your existing brand - as for most new users, your registration form will likely be their first interaction with you.
Allow for social logins. If you offer user accounts as part of your service, it might be viable to allow your users to login via existing accounts on third party social networks - including but not limited to Facebook, Gmail or LinkedIn. This can not only help expedite the process of registration, but it also helps combat password fatigue. With 92% of internet users abandoning websites when they can’t remember their passwords, this is a crucial factor to consider. More importantly, a recent study found that 86% of users claim that registering for a new website bothers them, while 77% encourage the use of social logins.
Define the objective of your survey. The objective should encapsulate the purpose of your survey and reflect the information you are trying to capture with it.
Identify your target audience. Once you’ve established what you want to achieve with the data you obtain through your survey, you should determine exactly who you need to get that data from - in other words, your target audience.
Ask the right questions. A poorly designed survey can quickly turn eager participants into non-responders. The nature and structure of your questions plays a large role in the completion rate of your survey.
Be mindful of how you phrase your questions. It’s crucial for survey questions to be straightforward, uncomplicated and concise, as collecting data online makes it difficult to further explain your questions in the instance of confusion.
Choose the right question type: Beyond phrasing, the types of questions you use to extract data can also impact completion rates. There are two types of survey questions:
Open-ended questions: Free-form questions that allow the respondent to provide custom text-based responses.You can use these to gain useful qualitative insights from individuals.
Closed-ended questions: Questions that provide respondents with predefined options to answer with. You can use these to draw quantitative observations, categorise responses, uncover patterns and identify trends. Closed-ended questions include boolean style (yes or no) questions, multiple choice questions, dropdown questions, rating scales and likert scales.
Be mindful of the length of your survey. While numerous studies have been conducted on the topic of survey length, truth is, the ideal number of questions for your survey depends largely on how difficult your questions are to answer and how invested your target audience is in answering them. Take these factors into consideration when designing your questions, and use this survey length calculator to determine how long it would take a respondent to complete your survey. This will help you gauge whether your target audience will be committed enough to make it to the finish line.
Be aware of biases. When your survey responses are affected by bias, the data you receive is of a lower quality, often rendering the results of your survey useless. Here’s a breakdown of the different kinds of response bias and how you can design your survey to avoid them.
Map out your visual elements. Poor visual survey design yields low response rates and can even lead to biased responses, leaving you with ineffective data.
Choose the right colour scheme. Consistency across questions and pages is key when it comes to colour usage, as using different colours forces respondents to relearn their meaning every time they’re used.
Determine the right level of branding. In some cases, including strong visual branding elements like logos, brand colours and slogans can directly impact responses and as such, have the undesirable effect of evoking biased responses. In other cases (especially when surveying existing customers), branding can help reinforce reliability and increase response rates.
Prioritise legibility. Make sure to maximise the legibility of questions by increasing text size and using sans-serif fonts like Arial, Helvetica and Verdana. For any long passages of text, consider using serif fonts like Georgia and Garamond to make them easier to read. Above all, make sure that your text contrasts with your page background to ensure that it’s easy to read.
Optimize for mobile devices. Approximately 30-40% of all online surveys are taken on a mobile device, so make sure your survey has an equally smooth user experience on mobile.
Manage expectations and provide quick feedback. Using a welcome screen and error messages can also help combat low response rates.
Make your survey accessible. Your survey might be answered by individuals with a vast array of abilities, so it’s best to account for them all to ensure higher response rates. Don’t rely on colour alone to convey meaning by clearly labelling important elements and make sure all images have alternative text that explains what they contain for visually impaired respondents.
Do a test run! Once your survey is ready, make sure to do a test run before distributing it. This is crucial for catching any design or flow issues you might have missed.
Apart from Paperform's in house form experts, we reached out to the design community at large to gain insights into what makes a good form great. A special thank you to the following contributors and their companies, fand thanks to Robert-Jan van Beek for his work in designing and illustrating this eBook.