The Ultimate Guide to Form Design

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 creating web design, because online forms increase conversions.

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.

{{WEB_BANNER="/dev/components"}}

How to design web forms: 13 essential rules

No matter where you place your form or what you use it for, you should always follow a few form design best practices.

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. 

Let’s go over them one by one and explain how they improve form 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, unnecessarily long forms always perform badly. Expedia, a famous travel booking website, increased revenue by a staggering $12 million simply by removing a redundant form field. Imagescape got 120% more conversions, by removing 7 form fields.Still think form design is unimportant?

Less is always more in web form design, 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 with 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 on the right (we use them as lead magnets) works perfectly with the top-to-bottom layout.

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 address, etc.) and move on to the types of info a user might have to think about or look up (number of company employees, zip code, 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 conversion 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.

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.

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. It’s also the most user-friendly way of presenting multiple choice questions.

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

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.

Provide feedback

A progress bar is just one example of keeping users in the loop while they’re filling the form. However, the key to a good UX form design means users should always know what’s going on.

For example, you should include clear error messages, whether it’s for a password requirement, or wrong email address. 

Next, each submit button should also include a warning in case it’s not possible to reverse the step. Lastly, if your form has multiple steps for users to fill, you should ensure they’re always aware what result the next action will have. 

Add placeholder text for more clarity

If you haven’t gotten the idea yet - web forms should be stupidly simple. Another nifty hack to ensure they are, is to use placeholder text.

This can be handy for date fields to indicate what format is required (MM/DD/YYYY or DD/MM/YYYY). It can also be important for registration forms, to distinguish between a registration email and user name, if applicable.

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.

Enforce security

When it comes to payment, a recent study suggests that 17% of users abandon the form due to security concerns.

But whether you ask for their credit card details, or any other type of sensitive information, users should rest assured that their data is safe. Use CAPTCHAs or reCAPTCHAs to protect your forms from cyber attacks. 

You should also use HTTPS encryption to safeguard data transmission, ensuring sensitive information is encrypted during submission.

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, which can be a great strategy for a lead generation page.

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.

Aluxion

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

Their submission 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 r CTA.

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.  

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 conversion rates. 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.

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.

However, thanks to a clear split-screen layout and totally different design, the two CTA buttons (“Sign In” and “Explore Guides”) don’t lose potency. It’s also a smart design choice to make the registration form simple, while the lead generation is more intricate and appealing for people that are at the top of the marketing funnel.

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.

LinkedIn

Visuals are important, even with the simplest website form design. 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.

Final remarks

We hope our form design best practices and inspiring examples help you design a form that will boost conversion. There are plenty of great web design software you can use to create your own forms, as well as simple online form builders like Google Forms, Survey Monkey and Typeform.

However, although it may seem simple, form design has a significant impact on conversion rates. So, you should be prepared to dedicate considerable time and effort for this task. If that’s not something you want to do, there’s a better solution.

A ManyPixels unlimited design subscription means getting all your designs at a flat monthly price. As many forms and web design projects as you like at a flat monthly rate starting at just $549. 

But that’s not all! 

With a single monthly subscription, you can also get all the graphics you need for your business, be it digital ads, email banners, social media graphics, and more! 

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