Web Form Design that Converts
By: Amsterdam Standard
Tags: Forms, User Experience, UX Design, Web Forms, Web Design

Web design

We all are engaging with online forms frequently. When we buy something online, becoming a member of the community, applying for a job, or doing the survey. To create a positive user experience on your website or other digital product it’s important to design web forms according to the main principles and latest trends.

Each form has its purpose, and we expect the user to fill in the form to get the value we expect from it. So let’s see how to create forms that users will actually fill in. But first, a small preview about what is the web form and why it’s crucial to design it correctly.

What is the Web Form?

A Web Form is a form that users fill in online. They leave their contact information to proceed with a particular intent. For example, users can provide their name and email address to sign up for a newsletter or fill in their credit card details to pay an online order. Web forms are crucial tools for businesses to obtain the information they need from their potential customers.

There is a large variety of different formats of web forms. There is no one form for all cases. It’s size, shape, color scheme, design solutions, and messaging depends on the company issuing it and its purpose.

Image credit Dribbble

Web Form Purposes

Engagement Access (membership) Commerce

The importance of Design for Web Forms

It is quite apparent that Webform design plays an important role. First, it’s a part of the overall user experience with your website or other digital product. Your design should be consistent and smooth. Second, Web Forms have an essential role in converting users. The conversion as a final result can be different (online purchase, email letter sign-up, online job application, or submitting the survey), but the conventional act to do it is to fill in the form. Mistakes in the form’s creation might discourage users.

Most of the users’ actions (especially with shopping) are made on the emotional background. Don’t miss this moment. If the form is too complicated or isn’t working in the way it is supposed to be, the feeling of buying can go away. When the form submission process is clear, easy, and without distractions, people can focus on the task to fill in the form.

Web Form Design Best Practices

Make forms as short as possible

This one is the most important practice. Users aim to fill in forms the fastest way possible. Facilitate them to do so by creating your form short and easy to process. You can shorten the form in three ways.

Include only the necessary fields. Request the information without which you can’t proceed with the required action. For example, for the online purchase, you need information as an email to send the confirmation of the order, all the payment details, and the address for delivery. For the newsletter sign-up, just one field with an email address can be enough. Don’t overwhelm users with optional fields such as “home phone number,” which almost nobody uses anymore or at least make those fields optional.

Image credit Dribbble

Use fewer words in titles. Avoid all unnecessary or complicated words.

Combine multiple fields in one easy-to-fill field. This will make your form feel less loaded, especially when you’re requesting a lot of information. Displaying only a few fields at a given time is a common practice.

2. Mark necessary fields

As we said before, users would like to spend as little time possible on filling out the form. Marking the necessary fields with a star (*) or with the text (required) or not mandatory fields with (optional) enables users to proceed faster with the form.

Image credit Dribbble

3. Make forms easy to scan and digest

Your form design should look clean and appealing. It should be simple and resemble the previous users’ experience. It means you don’t need to recreate a wheel, but you need to make sure the wheel fits your bicycle. Use the existing form practices with your personal touch and with the fields that suit your form’s purpose. Group related information into logical blocks or sets. The flow from one set of questions to the next will better resemble a conversation. Grouping together related fields will also help users make sense of the information they must fill in.

Image credit Dribbble

Also, Don’t neglect the usage of white space between the lines.

4. Use Labels and Subtext correctly

A label is a title of a line. It should be short and precise. In most cases, the title is enough to understand the expected information. The subtext is the underlined or inlined label (placeholder text), which helps users to understand what is expected from them to fill in a particular line and in which format. Subtext shouldn’t attract much attention but to help users in directions. For example, text can be “Date of birth” and the subtext “dd-mm-yyyy.”

Image credit Dribbble

If you use labels as a placeholder text, consider using it as a floating label. Labels or sample text inside a form field makes it difficult for people to remember what information belongs in that field once they start data entry.

By using a floating label, the visibility of the title is shown by default in the placeholder field. But once the data there is entered, the placeholder text fades out, and a top-aligned label animates in.

GIF credit Dribbble

5. Use Input masks

Make use of input masks to minimize the chance of the mistake. Especially useful for the fields which can be filled in many different ways (dates, zip codes, bank account details).

6. Set Default Values

Smart defaults are selections put in place that provide answers to questions for users based on the saved or inputted data. This allows people to complete forms faster. For example, the Name and Email input fields are defaulted for you making the process of signing up for the site much quicker. Also a quite common practice to check-mark the fields as signing up for a newsletter, choosing a standard delivery option, and more.

Image credit Dribbble

7. Use Inline validations

Users are faster, more successful, less error-prone, and more satisfied when they use the forms with inline validation. The confirmation of this state you can read in Inline Validation in Web Forms article. In addition to color identification, use icons, and supportive text to show which fields are invalid. This will help colorblind people fix the problems.

8. Make design recognizable

Use the usual structure of the form and frequently-used objects. People should easily recognize what they are looking at. When you make people think you can lose potential applicants, subscribers, or buyers.

9. Label and Line placement

Label and Line placement play an essential role in optimizing web forms. Labels can be placed on top, right-aligned, or left-aligned. All of them being sufficient in their way. We’ll discuss these options below.

Top Aligned labels

Top aligned labels are vital for rapid processing and efficient scanning of the forms and input fields. Also, it greatly reduces the time to complete a form. The negative effects are that if you don’t have enough space, it will probably not work as the vertical space is increased. See the example below.

Image source

Right-aligned labels

Right-aligned labels have a clear association between label and field and require less vertical space. Being right-aligned, it’s not as easily digestible as left or top-aligned, but they do have the fastest completion times.

Image source

Left-aligned labels

Left-aligned labels are used for easy label scanning and also require less vertical space (same as right-aligned). The downside is that the excessive distances between the labels and the input fields are taking the user more time to complete.

Image source

Best practice for the options mentioned above

For reduced completion times and rapid processing, use top-aligned labels. When vertical space is a constraint, use right-aligned labels. And last but not least, left-aligned labels are the most useful when using unfamiliar or advanced data entries.

10. Use process indicators

For multi-step forms, it’s crucial to use process indicators. A progress indicator displays the total number of steps in a form. It is a powerful tool to help your customers complete their form-filling journey. Besides, the progress bar adds clarity and openness to your UX. It goes some way to set expectations about the journey ahead and prepares users for the information they may need to enter.

11. Use multichoice

Don’t let people write too much. If it is possible, let them choose from multiple options. It is faster and reduces the risk of making a mistake. Try to avoid dropdown menus, especially on mobile devices, when there are only 2 or 3 options, display them as radio buttons (which require only a single click or tap).

Image credit Dribbble

12. Responsive and mobile-friendly

Think about the mobile version of your form, not just regarding dropdown menus. Make your web form design responsive or create a separate mobile version.

Image credit Dribbble

13. Clear and unconventional call to action

When you use specific verbs, respondents can tell immediately what the submit button does. And better verbs encourage people to take action because the words paint a clear picture of what they’ll get or accomplish. While most buttons on contact forms say “Send” or “Submit,” you can think about many other options to use instead. The verbs that are more specific and more helpful for your audience could be: Donate, Register Now, Send a Message, Download a Whitepaper, Schedule a Meeting.

Image credit Dribbble

14. Provide highly visible and specific error messages.

Errors should be indicated through a variety of signs, not just through color or a mark. The better option will be to outline the field, use the specific mark for an error, use red text, and maybe even use a heavier font to ensure users don’t overlook this critical information. It is the time when you need to be definite.

Image credit Dribbble

Let’s sum up

Your website visitors or the users of your digital product value their time and often react by emotional impulses to proceed with specific actions. Their form submission is essential to us, so we need to ensure our web form design encourages them to fill it in and finish their conversion action. Good design brings more sales, sign-ups, applications, and community members. By providing a good user experience, you increase the chances of visitors and users to return to your product, service, or company.

For the design of your web forms and overall user experience design, contact Amsterdam Standard. We are a professional team of UX & UI designers who are ready to help you with your project or digital product.