Companies use forms on their websites to allow visitors to sign up to create an account, buy a product, pay for an item and more. That is why online form design is so important. You may not be able to entice your visitors to take the time to provide you with all their personal information if you don’t have a simple, user-friendly, visually or aesthetically pleasing form.
What exactly is form design?
Form design is about creating a web form where your site visitors can enter and submit information while keeping the layout, format, user experience (UX), appearance and other factors in mind. A well-designed form improves the user experience and increases conversions, which means that you turn users into customers.
The design of your form influences your website’s overall UX, affecting the number of happy visitors and conversions. A well-designed form demonstrates to users that your company is helpful, thoughtful, professional, technologically savvy and enjoyable to work with.
On the other hand, a poorly designed form may result in page and website abandonment or a frustrated user, resulting in a drop in conversions and sales. Expedia, for example, discovered that one extraneous form field box alone was costing them $12 million in profits per year! In this reading, you’ll learn about some of the best practices and guidelines of form design.
Form design best practices and guidelines
Keep forms simple and straightforward
Avoid adding any unnecessary fields or questions. Include only the required information in your form.
Use one column
When possible, use a single-column web form layout — this is especially important when creating long multi-step forms. Single-column layouts are more straightforward for visitors to follow, understand, complete and submit than forms with multiple columns.
Clearly label your form
Give your form a title that lets your visitors know what will happen once they submit it. For example, a simple form title like ‘create an account’ clearly states that once a visitor submits their information, they will have created an account.
Sort your form fields from the simplest to the most difficult
Begin your form with the most straightforward field questions (such as name and email) before moving on to the more time-consuming questions, for example, billing and shipping information. When visitors start filling out your form and think, ‘OK, I can quickly add my name and email,’ they are far less likely to leave the page since they have already decided to commit.
Make use of inline form field validation
Inline form validation is a procedure that checks a visitor’s information in real-time as they fill out the form. Suppose your visitors enter incorrect information into a field, such as an incorrect credit card number or email. An error message will show below or inside the form field, alerting the visitor to their mistake and allowing them to quickly correct it and move on to the next question.
The text should be aligned to the left
Align all your text — including queries and labels — to the left side of the form so that it is easy for your visitors to read and complete. Researchers at the University of Basel observed that aligning text on the left side, above the form field box, decreases the time required to fill out the form. This alignment reduces the time a user’s eyes have to move around, making the form easier to read.
Do not request phone numbers
Unless collecting your visitors’ phone numbers is critical, for example, a quote request or product demo, don’t include it in your form. Asking for your visitors’ phone numbers can create a feeling of suspicion unless they know a legitimate reason for the request. When possible, request an email address instead and use that to contact your visitors with their permission. Alternatively, make the phone number field in your form voluntary.
Use browser auto-fill
Completing specific form fields is now quicker than ever, thanks to autofill features in browsers that draw from prior data entered from a visitor’s device, like their first and last name. To help your visitors speed up the completion process, it’s best practice to title each field with a word that browsers will recognize.
Create mobile-friendly forms
Many people browse, purchase products and complete forms on their mobile devices, which is why mobile-friendly form design is critical. This helps visitors to your website to easily view a site on any mobile device and ensures that all the form information fits the screen size.
Error messages should be positive
Make sure to sound positive when creating web form error messages. This is a great way to ensure that only correct information is submitted. Never blame the user; instead, use clear and concise language and include information that guides the visitor to the error. This way, they know precisely where it is and how it needs to be corrected.
Include smart defaults
Enabling smart defaults is another excellent way to help speed up the form completion process while maintaining accuracy. Smart defaults use information like your user’s current location to instantly enter details like city or town, saving them time.
For long forms, add progress bars
Have you ever filled out a long form or survey and thought, “How many other questions are there?” Progress bars show how many questions your visitors must answer. They will give them a clue of how long it will take them to finish the task and may act as a form of motivation to finish the task at hand. These are especially helpful on long, multi-step forms.
Use reCAPTCHAs rather than CAPTCHAs
Have you ever been asked to look at a relatively challenging image with numbers and letters and then to type those numbers and letters into a form field to confirm you’re “not a robot” after completing a form? CAPTCHAs are used to identify SPAM and bots. They can, however, be time-consuming and frustrating to finish. They are still helpful; you may want to include this additional security measure in your forms. If this is the case, you should use reCAPTCHAs in your forms instead. reCAPTCHAs identify fake accounts and bots not only successfully but also require that a visitor checks only a box before submitting a form. A CAPTCHA uses lettering for security whereas a ReCAPTCHA asks the user to identify elements of images.
Allow users to navigate to the following form field by tab
There’s no reason your form shouldn’t support keyboard shortcuts, as there are many available. A good practice is to allow visitors to use the tab key on their keyboard to move to the following form field on your forms without having to take their hands off their keyboards.
Final thoughts
Chances are there is at least one type of web form on your website. Implementing these UX UI form design best practices will give your visitors a positive experience. So, consider the forms you need to include on your site and start implementing design tips and takeaways most applicable to your needs and goals.
