Learn How to Create Form Design for Optimal Performance

Mmm... cookies!

By continuing to use our website, you consent to our cookie policy.

Privacy Policy
Form Design 101: Tips, Best Practices & Examples

The Ultimate Guide to Form Design

Web design
December 12, 2022
10 minutes

0%

It’s a rather simple piece of graphic design that significantly impacts your marketing strategy. Do you think that form design ends with a colored rectangle and a couple of empty fields? Think again. Learn how to design web forms that convert visitors into leads or customers!

Why is knowing how to design a form important? In most cases, a web form stands between a website visitor and an action that will move them down a business’s marketing funnel. They’re one of the most vital elements of web design, because online forms increase conversions.

Learn how to create a high-performing landing page with templates from the web

Download our landing page guide

You might not be designing a form yourself. However, it’s quite useful to understand some form design best practices to assess whether it will perform well once it’s live.

So, without further ado, let’s get right into it and explain how to design a form that will help your business grow.

How to design web forms: 10 essential rules

No matter where you place your form or what you use it for, you should always follow a few rules from design best practices. Let’s go over them one by one and explain how they improve form design.

We’ll mostly focus on form UI form design, but we also need to mention a couple of rules that fall under the umbrella of UX design.

Use the minimal number of fields

Web forms are a way to gather information about potential leads or customers. If you know anything about market research, you’ll know that each piece of information can be valuable.

Nevertheless, asking for too many pieces of information can harm the performance of your web forms. Expedia, a famous travel booking website, increased revenue by a staggering $12 million simply by removing a redundant form field. Still think form design is unimportant?

Less is always more in this case, so stick to the vital information only.

Include a title

In the case of payment forms it’s usually clear what the form is about. Still, you should always include a clear heading to avoid confusion and entice users to complete the form.

Especially in the case of lead magnets, a catchy and engaging title can quickly convey the value proposition and become critical in achieving your lead generation goals.

Place fields in one column

Most website visitors are used to reading from left to right or from up to down. When it comes to form design, you should always stick to one of these and not combine them.

A simple form like the one below (we use them as lead magnets) works perfectly with the left-to-right layout.

See some of ManyPixels’ best design works

Get the ManyPixels Design Library 2022

However, it’s pretty simple, and many web forms require more than two fields. Some form designers combine the two approaches in that case, which can lead to a negative user experience. A survey by CXL Institute showed that single-column forms were completed over 15 seconds faster than multi-column versions.

Even if you think it looks lengthier that way, it’s much better to stick to a single-column layout.

Sort information from simplest to most complex

If you want to learn how to design web forms that perform well, there’s one simple rule to follow: make it as easy as possible for users to navigate through.

We’ve already explained that a single-column layout works best. However, you should also consider information architecture, or how information is organized and presented. Always start with the simplest information (name, email, etc.) and move on to the types of info a user might have to think about or look up (number of company employees, credit card numbers, etc.).

Enable autocomplete

Time-saving is one of the most critical form design best practices.

Are you confused about the difference between autofill and autocomplete? Auto-fill is a feature that users can enable or disable in their selected browser. In contrast, autocomplete is the feature of predictive text that needs to be coded into the form.

This is usually done for you if you’re using online form makers. However, if you’re working with a web designer and developer on creating something from scratch, be sure to request the autocomplete feature.

Be consistent in marking optional/required fields

It’s a nuance, yet an incredibly important one. If you want to get more detailed information from users without harming your click-through rates, then optional fields are the way to go.

Say people are signing up for your newsletter. Those who are about to become avid readers will probably provide additional information to receive the most relevant updates. People who are signing up for another reason (e.g., to get a coupon code) won’t appreciate or bother to complete a particularly lengthy form.

Make a clear distinction between option and required fields by using one of these two methods:

  • an asterisk (*) to mark required field;
  • the word (Optional) to designate the rest.

Asterisks are generally preferred as they make the form design less cluttered. You can still opt for the second option, but be sure not to use both or alternate between them, as this can easily frustrate the user. Close to a third of people (29%) abandon online forms due to security concerns so they must be aware of the option not to share certain data.

Learn how design can help you crush goals in SaaS business

Download our SaaS Design Guidebook

Use color contrasts for buttons

It’s time to move on to some actionable tips for creating the best form UI. Even someone who doesn’t have a first clue about how to design a form probably knows that buttons must stand out. Here are a few simple rules.

  • Use blue, green, and yellow buttons for affirmative actions.
  • Use red or gray for a negative action.
  • Use neutrals, such as black, white, and gray, for a neutral action.

Of course, even with these quick rules, a button should always match the overall design of the form and, ideally, your brand identity. Using contrasting colors (cold and warm, for example) helps users distinguish between two actions and, yet again, prompts them to take affirmative action. That’s why you’ll often see the affirmative button in a brighter color, while the negative or neutral button (cancel, back, etc.) is often neutral or a darker shade.

button colors.png By Bunin Dmitriy

Use radio buttons, not drop-down menus

Get ready for yet another form design tip that seems unimportant, but is hugely significant. Always use radio buttons (the little boxes you can tick) instead of drop-down menus, as they make forms quicker to complete.

CXL ran an experiment and found that the form with radio buttons had a staggering 95% faster completion time!

drop down vs radio buttons.png CXL

Include a progress bar

Nobody likes to complete forms, no matter how amazing the design is. If you’ve done everything to minimize the number of steps and required information, then there’s one more hack left to appease the impatient user.

A progress bar is a great way to indicate how much longer it takes until they’ve completed the form, especially if it has several steps (i.e., consists of multiple web forms). There are many fun ways to do it, as you’ll see with some of the best examples of form design we’ve selected below.

Make it mobile-optimized

Over half of the world’s internet traffic comes from mobile and 46% of emails are opened on mobile devices. Although a convincing majority of people prefer to complete forms on desktops, **they’re first encounter with a form is often on mobile devices. **

So, be sure you’re delivering a strong first impression with a form that’s optimized for mobile use.

Real-life form examples to get inspired by

Now that you know how to design a form, let’s look at some creative real-life examples of stunning form designs.

Yummygum

Regarding online form design, this Dutch design studio couldn’t have made it simpler. And yet, this form deserves a mention because of one distinct feature: an open-form question. It works very well because the number of questions is minimal, so users are likely to complete all of them.

Most forms you’ll see on this list consist of simple questions about the information or choosing one of the options provided. This form allows more space for people to specify their interests. What’s more, it can also weed out the less committed potential clients.

yummygum form.png

Snappet

Snappet is an innovative program for assisting teachers and students in K-5 math. That’s why the company’s visual identity is playful and colorful (nobody needs math to be scarier than it is already).

The designer created a beautiful online form design for a satisfaction survey, with a different screen for each question. The design is perfectly on-brand and user-friendly. Notice how well color contrast is used - the options that haven’t been selected are a neutral gray. In contrast, the selected option is a pop of vibrant color. This way, users will never have to double-check if they’ve chosen the right option.

snappet form.png By Ricardo de Zoete

Aluxion

This product design agency has an amazing website that perfectly pairs a minimalist color palette and stunning motion graphics.

Their contact form matches the elegant style perfectly, and the most striking design element of this one is the gorgeous typography. You also shouldn’t overlook the fantastic layout implemented here. The form itself is single-column and very prominent. Still, they’ve included a heading and a brief description to provide clarification and a stronger CTA.

aluxion form.png

Woorise

A newsletter sign-up form can only do so much. People will either be interested in reading your stuff or they won’t.

So, since you’re already shooting a long shot, avoid being overly promotional or “salesy.” Instead, a great newsletter sign-up form should convey the main value proposition. Woorise wins bonus points with the added information about email frequency. Since 59 % of users unsubscribe because they think emails are too frequent.

woorise form.png

Chanceupon

Chanceupon is an innovative hiring/freelancing platform that connects businesses with specialists on demand.

Their contact form is a true masterclass in how to design web forms that increase conversions. Although you’ll find it under the website’s contact section, it’s so much more than that. This form already allows users to say what type of services they’re after, how many people, what their budget is, etc.

A lengthy form like this would never have worked so well without creative design. It uses color perfectly (the pop of yellow helps viewers focus on the important things), and a combination of questions (checkboxes, text response, rating scale) makes the form more engaging and fun to complete.

chanceupon form.png

Hotjar

We’ve talked a lot about how a form needs to be unambiguous. Still, here’s a terrific online form design example that successfully breaks that rule.

This form is essentially a combination of two forms and two distinct calls to action: register/log in and download the guide.

hotjar form.png

Proagenda

Any form that includes a calendar can easily become messy and confusing. Propaganda’s simple demo booking form is a great example of how that can be avoided.

The lovely color scheme helps us process information easily, as the form is divided into two clear sections: the day you want the demo to be on and the time.

proagenda form.png

LinkedIn

Visuals are important, even with the simplest forms. LinkedIn’s login form is clear and straightforward. The ability to log in with one click using Google credentials is an added bonus.

However, the accompanying image sets the tone for this simple web form. It’s fun but professional, which is what this professional networking platform is all about. Don’t ignore the context of your web forms - if you place them in an engaging environment, the chances of people completing the form are much higher.

linkedin form.png

Final remarks

We hope our form design best practices and inspiring examples help you design a form that will boost conversion.

However, if you think that form design is something you don’t really have the time or patience to take on yourself, there’s a better solution. A ManyPixels unlimited design subscription means getting all your designs at a flat monthly price. As many forms as you like as well as projects such as landing pages, social media posts, and display ads.

Want to learn more about it? Schedule a 1:1 call for an opportunity to ask us any questions!

Wait... there's more!

Enjoyed the read? Subscribe to our mailing list for all the latest tips, how-tos and news on graphic design and marketing.

Danica.png

Danica Popovic

December 12, 2022

Having lived and studied in London and Berlin, I'm back in native Serbia, working remotely and writing short stories and plays in my free time. With previous experience in the nonprofit sector, I'm currently writing about the universal language of good graphic design. I make mix CDs and my playlists are almost exclusively 1960s.