How To Design Forms That Convert
What is Form UX? Why Does Form UX Matter?
User Experience (UX) should be one of the main focus points of a product because UX covers all the interactions between the users and the product/service. When the company provides a beneficial and meaningful UX to the users, the result is satisfied users that convert. In other words, the users become paying and committed customers.
UX deals with the interactions between the users and the company from all aspects, including design, usability, and function. In this writing, we will focus on one of the most crucial interactions between the users and the product: forms.
Forms are the tools for gathering information from the users. The users are asked to fill out the forms in many cases, such as when they subscribe, pay for a product/service. Therefore, users contact your company through the forms in many touchpoints. In addition, users generally contact your company for the first time when they register via the forms. To create an excellent first impression, it is important to present an excellent form to the users. Having a well-designed form will consequently influence conversion rates.
A Good Form and Conversion Rate
Conversion rate is the result of the users’ actions as a response to a call-to-action (CTA). There are many types of behaviors that indicate conversion. Those can be downloading an application, signing up, or buying a product/service. Therefore, a good form is a key to boost the conversion rates because when the users are ready to convert, most likely they will have to fill out a form as a first step. So as a result, you should present a good impression through the forms.
Best Form Design Practices to Convert More
We have stated that the importance of having a good form UX comes from the form’s effect on conversion rates. After explaining that point clearly, now it is time to explain how to design good forms that result in high conversion rates.
The Golden Rule: Easy to Read and Understand
Before going into details of a form, it would be more appropriate to start from the most fundamental rule: the form must be easy to read and understand.
This rule applies to both the overall structure of the form and its components, which are explained further in the following points.
Even when the users scan the form, they should be able to conceive the form’s easiness and understandability. It is critical because the users get their first impressions about the form by scanning it. Based on the first impressions, the users decide whether to stay and fill out the form or leave the page without bothering to fill it.
Therefore, when the users glance at the form, they should not feel intimidated by some crowded copy because they will feel this form demands a lot of effort from them. Considering the value of time nowadays, nobody wants to spend their precious time heavily on a form.
As a result, a well-designed form should seem easy and understandable at first sight. The users should have a clear idea of what the form is demanding from them.
While you are designing every piece of the form, you must keep this golden rule in mind because all the other details about the form are based on the idea that the form must be easy to read and understand.
Further Points on Designing Good Forms
Now, it is time to consider several details to create a good form. Those details will help you to boost the conversion rate more.
Vertical format, single column
Filling out a form designed in a single and vertical column is easier to read than a multiple-column format. The reason is that the vertical format demands less cognitive effort than the multiple columns.
While arranging the form in a vertical format, you should also order the elements in a logical pattern. If you ask first name, last name and gender, you should follow that order.
Reducing friction
Frictions, which are obstacles between the users and their ideal user journey, might cause lower conversion rates. For instance, friction in a form is due to unclear instructions, requiring too much information. Conducting A/B testing is helpful to find the roots of frictions. After seeing the causes of frictions, you will be able to manage those frictions and amend the form based on the test results.
Choosing multi-step forms over single-step forms
It would be best if you asked only for the necessary information because less is more. However, if you have to ask for a bulk of information, you might consider a multi-step format instead of a single-step format. You can divide the form into multiple sections and put a progress bar. While giving the impression of simplicity, you might encourage the users to answer the questions with a clear progress bar at the top of the page.
Adding auto-format
You might help the users while providing auto-fill for some of the questions. From the stored information, you might provide, for instance, the location of the user beforehand.
Allowing copy & paste
Preventing the users from copying and pasting information does not lead to high conversion rates. The users might want to use the copy& paste function for many reasons, such as speediness, so you should allow them to copy and paste.
Paying attention to CTA buttons
Generally, the forms contain two main “call to action” (CTA) buttons: one is for proceeding, another one is for canceling or going back. Considering the primary motive of the form, you should design a CTA button for proceeding, which can be clearly seen. Using high-contrast colors might help achieve a distinct CTA button for proceeding, and you might create a less prominent CTA button for the cancel section.
To decide which CTA buttons will bring more conversions, you might conduct an A/B test and take action according to the result.
Asterisks (*) matter
Asterisks (*), which are put next to the input field, are the most common signs indicating required information. When the users see an asterisk, they can know what information is required and what is optional.
Saying no to the “reset” button
The “reset” button lets the users erase the information they write in the form. The users might click the “reset” button by mistake. They will probably be dissatisfied because of losing all the information they have just provided. Besides, providing a “reset” button might continuously remind the users of leaving. Therefore, this might create confusion. Not using a “reset” button helps boost the conversion rate.
Providing contact information or chat section
The user might have some questions or problems with the forms. When the users see a section to contact, they have a better UX because you implicitly tell the user that: “Your questions matter to me, and I am here to listen to you.” Therefore, before providing a solution to the users’ problems, the form and your company create a good impression on users.
In addition, this is a great tool for receiving feedback about the form or something else. Feedbacks are great ways to take action and make an amendment to the products.
Creating meaningful input fields
There are many types of input fields: text fields, password fields, checkboxes, etc. These sections are important because the users provide the information you ask for through input fields. When the users feel good about themselves as they fill out the input fields, their probability of converting will be high. Several points can be regarded while designing a form.
- Forms can be set to do autofocus for input fields. Autofocusing a field grabs the users’ attention and encourages the users to fill the related fields. The color choice can be critical at this point because the autofocus should present a clear distinction from the rest of the input fields.
- Putting input constraints for the input fields is important. Those constraints can be minimum and maximum character length, numeric/alphabetic/symbols, and format. Putting constraints on the input fields also leads to fewer errors. For example, you might place a numeric constraint for the telephone number input field. Or, for birthdate, you might present one of those formats you want beforehand like the following: DD/MM/YYYY, MM/DD/YYYY, YYYY/MM/DD
Arranging field labels
Field labels explain what the input fields are about. Therefore, the field labels should be parsimonious. In other words, each field label should directly point out what the input field asks for.
Also, the alignment of labels is important, and every label alignment has its pros and cons. If you want to create a scannable form, top-aligned labels and right-aligned labels are more suitable. However, if the form demands more careful reading, you might want to use left-aligned labels because of the visual distance it creates between the input fields and field labels.
Sometimes, the forms contain inline labels (placeholder text) instead of the fixed field labels. However, it is important to remember that inline labels are not functional for a form that contains many fields because the user might easily forget what they have started to write. Using a floating label is a good choice if you insist on using placeholder text to tackle this issue. As the placeholder text vanishes, the floating label emerges as a field label.
Keyboard-friendly forms
The users take the forms from different types of devices. Therefore, a good form should be designed based on all possible devices that the users use. You might create a form that does not demand any mouse clicking from beginning to end for desktop users. For mobile devices, adapting the keyboard type to the input field type is a smart move.
Colors matter
Colors have important effects on human perception. The colors of the form should not create eye discomfort or look unattractive. It might be a clever idea to use not more than two main colors. Also, contrasting colors might be a good choice to create an aesthetic form.
Not forgetting about mobile devices
Mobile devices place an important place in our lives. We carry them wherever we go. Therefore, there are probably many users that fill out the form via their mobile devices. Therefore, optimizing the form for them is crucial. Presenting a single-column designed form is useful for mobile users. You might also use larger fonts for CTAs. In addition, reducing the number of necessary taps is crucial because the users always want to spend minimum effort while filling out the forms.
Great UX Form Design Examples
1) Amazon
Amazon’s form achieves being a great UX form design because of several reasons:
- It achieves simplicity and easy-to-scan principles.
- It is designed in a single, vertical column format.
- The color choices are suitable.
- It only asks for the necessary information.
- While putting a constraint on the password field, it is explained under the input field. Therefore, the form is being clear to the users so that the users do not make errors.
2) Apple
Apple groups the relevant input fields together while creating small pieces for each grouping. This gives the impression of easy-to-fill about the form.
3) Netflix
Netflix requires a bulk of information when signing up first. Among its many successful form elements, the most important point to be mentioned is that the form consists of multi-stages. Instead of requiring all of the information in a single form, Netflix creates a better UX with a multi-stage form.
4) Google
Google presents another successful form to the users. The important point worth mentioning here about this successful form is its CTA buttons design. Google makes the primary button, which is for proceeding, more salient.
