Website Form Design: 11 Best Practices & Examples<\/h2>\nUse a Single Column Design & Include Field Titles<\/h3>\n
When you start looking at different website form designs, including the ones pictured in this article, you’ll notice that some use a two-column design and others use a single-column design. While both options can work, we’d recommend using a\u00a0single column design<\/strong>\u00a0in most cases.\u00a0Here’s why:<\/p>\n English users read left-to-right and top-to-bottom. When you use a two-column design, users can get confused about the flow of your form – should they go left-to-right on every line, or fill out the first column and then the second column?<\/p>\n Using a single-column design makes it easy for users to figure out how to fill out the information you’re asking for in the most logical way.<\/p>\n Image: Jamf’s single-column website forms design offers a great user experience – it’s easy for prospects to figure out the flow and add information in a logical order. Source:\u00a0Jamf<\/a><\/p><\/blockquote>\n Another feature you’ll notice in the example pictured here is the\u00a0field titles<\/strong>\u00a0included with every form field. Field titles should be positioned above each of the input fields and aligned to the left – this helps ensure that users will understand which titles are for which fields and enter their information in the right location.<\/p>\n Another way you can optimize your website forms design and make life easier for users is by adding placeholder text. Also known as “hint text”, placeholder text is automatically placed into the form fields when a user loads your form, but it will be removed once the user begins typing their information into that field. Image: Dashlane uses placeholder text in every field of this form to guide customers through the process of starting a free trial of their Internet security products. Source:\u00a0Dashlane<\/a><\/p><\/blockquote>\n In the example pictured above,\u00a0Dashlane uses placeholder text instead of field titles<\/strong>\u00a0to guide users through the sign-up process.<\/p>\n One benefit of this design choice is that it reduces the total size of the form since the field titles would take up additional space between the form fields.<\/p>\n A drawback, however, is that the fields are no longer labeled once the user starts interacting with them.<\/p>\n In general,\u00a0we’d recommend using both field titles and placement text<\/strong>\u00a0to label form fields, unless there’s a compelling reason to use just one or the other.<\/p>\n In today’s consumer culture, your prospective customers expect a convenient sign-up experience that’s as painless as possible for them.<\/p>\n That’s what reducing friction is all about: making the process of engaging with your website lead forms as painless as possible for the customer – and one of the best ways you can do that is by\u00a0enabling the autofill feature for your website forms<\/strong>.<\/p>\n People got sick and tired of having to type out their personal information into every form, so Google created a Chrome Browser feature called Address Manager to help streamline the process.<\/p>\n Image: Access the address manager in chrome settings and you can customize your own contact information to use autofill any time you encounter an autofill-enabled form on the Internet<\/p><\/blockquote>\n Once users have saved their form data into the Google address manager, they can use it to automatically populate form fields with their information before signing up for a free trial.<\/p>\n In the following image, we’ve highlighted all form-fields that we were able to complete just by selecting the correct autofill option from the drop-down menu. Image: This Dashlane form has a total of 10 fields, but 7 of them can be populated automatically using autofill. This significantly reduces friction by cutting down on the time it takes for users to complete the form. Source:\u00a0Dashlane<\/a><\/p><\/blockquote>\n In just a couple of clicks, a user can fill in 70% of this form with data that’s already been saved in their browser. This friction-reducing feature ultimately makes users more likely to complete the form and register for a trial.<\/p>\n Another way to reduce friction when you design forms to generate leads on your website is to\u00a0avoid asking for excess information<\/strong>\u00a0– however, there is a need to strike a balance here.<\/p>\n On the one hand, collecting more information about prospects can help you understand more about your audience and develop new ways of marketing to them in the future. Collecting more information also helps with lead scoring and qualification.<\/p>\n On the other hand, asking for too much information can make prospects feel like their time is being wasted and result in reduced total lead volume.<\/p>\n It’s worthwhile to experiment with different lead forms and find the sweet spot where you’re effectively qualifying prospects without sacrificing too much lead volume. Image: Sophos does a great job of pushing this free trial with a simplified lead form that asks for just your first and last name and business email. Business email fields typically don’t accept email addresses from public providers like gmail and yahoo, so Sophos is already avoiding a lot of spam registrations and qualifying these leads by what company they work for. Source:\u00a0Sophos<\/a><\/p><\/blockquote>\n Multi-stepped forms can be off-putting for users if it’s unclear how long a registration or checkout process will take on your website. Not only is this poor UX design, but it will more than likely have a negative impact on your overall conversion rate. The best way to address this source of friction is to\u00a0include a progress bar<\/strong>\u00a0that guides your customers through the multi-step sign-up.<\/p>\n Image: Amazon is a world leader in technology and eCommerce, so we should probably take notes on how they’ve used this progress bar to guide customers through millions of annual transactions on the Amazon platform. This user-friendly progress bar shows customers exactly where they are in the checkout process and what steps are left to complete when placing an order. Source:\u00a0Amazon<\/a><\/p><\/blockquote>\n Multi-step forms are a natural fit for eCommerce checkouts, but they also work with multi-step free trial forms for SaaS companies.<\/p>\n Image: Pluralsight uses a progress bar and collapsible form containers to guide customers through a multi-stepped free trial registration process on a single, user-friendly page.\u00a0Source: Pluralsight<\/a><\/p><\/blockquote>\n When it comes to indicating required fields and optimizing error messages, there are several different ways you can implement.<\/p>\n Most website forms simply place an asterisk at the end of the field title (often in red) to\u00a0indicate required fields<\/strong>. Others, like the Pluralsight form pictured below, add text to field titles to indicate which fields are optional.<\/p>\n We generally prefer the asterisk method, as it’s more familiar to users. Image: When a user tries to submit an incomplete form, this Pluralsight form indicates exactly which fields need to be updated to rectify the issue.\u00a0Source: Pluralsight<\/a><\/p><\/blockquote>\n It’s also important to think about what happens when users fill out a form incorrectly. Ideally, there should be\u00a0individualized error messages<\/strong>\u00a0for every form field, indicating whether data was missing, invalid, or incorrectly formatted. In the image above, Pluralsight uses individualized error messages for each form field that was missed.<\/p>\n Real-time input validation<\/strong>\u00a0is a great way to provide incremental feedback and encouragement to users, especially when they’re filling out a longer form with more fields. That little green check-mark gives users a feeling of accomplishment and validates that they’ve input the proper information in the correct format, every step of the way.<\/p>\n Image: In this clipping of an Airship free trial registration form, you’ll notice that work email inputs are validated automatically. This is common for forms that required a work e-mail, but input validation can be implemented for all types of fields, including email addresses, phone numbers, and birthdays. \u00a0Source:\u00a0Airship<\/a><\/p><\/blockquote>\n Assisting text<\/strong>\u00a0sits at the top of your form and tells users exactly why you’re asking for their information and what they can expect to get in return.<\/p>\n You don’t have to include a huge amount of detail with your assisted text – just a line or three is enough to help keep users focused on why they’re bothering to fill out your form in the first place.<\/p>\n Image: WorkBoard uses assisted text and a customized call to action button, both examples of effective UX design for website forms. Source: \u00a0WorkBoard<\/a><\/p><\/blockquote>\n It’s also worth experimenting with your call to action text to optimize for conversion rate<\/a>.<\/p>\n![\"single](\"https:\/\/directiveconsulting.com\/ca\/wp-content\/uploads\/sites\/11\/2020\/05\/image-0-29.png\")
<\/p>\nGuide Customers with Placeholder Text<\/h3>\n
\n![\"placeholder](\"https:\/\/directiveconsulting.com\/ca\/wp-content\/uploads\/sites\/11\/2020\/05\/image-1-29-1024x810.png\")
<\/p>\nEnable Autofill to Reduce Friction<\/h3>\n
![\"autofill](\"https:\/\/directiveconsulting.com\/ca\/wp-content\/uploads\/sites\/11\/2020\/05\/image-2-25.png\")
<\/p>\n
\n![\"auto](\"https:\/\/directiveconsulting.com\/ca\/wp-content\/uploads\/sites\/11\/2020\/05\/image-3-24.png\")
<\/p>\nAvoid Asking for Excess Information<\/h3>\n
\n![\"form](\"https:\/\/directiveconsulting.com\/ca\/wp-content\/uploads\/sites\/11\/2020\/05\/image-4-21.png\")
<\/p>\nUse a Progress Bar for Multi-Step Forms<\/h3>\n
![\"amazon](\"https:\/\/directiveconsulting.com\/ca\/wp-content\/uploads\/sites\/11\/2020\/05\/image-5-16.png\")
<\/p>\n![\"multi](\"https:\/\/directiveconsulting.com\/ca\/wp-content\/uploads\/sites\/11\/2020\/05\/image-6-12.png\")
<\/p>\nIndicate Required Fields & Optimize Error Messages<\/h3>\n
\n![\"form](\"https:\/\/directiveconsulting.com\/ca\/wp-content\/uploads\/sites\/11\/2020\/05\/image-7-10.png\")
<\/p>\nValidate Input in Real-Time<\/h3>\n
![\"form](\"https:\/\/directiveconsulting.com\/ca\/wp-content\/uploads\/sites\/11\/2020\/05\/image-8-5.png\")
<\/p>\nAdd Assisting Text & Write a Clever Call to Action<\/h3>\n
![\"form](\"https:\/\/directiveconsulting.com\/ca\/wp-content\/uploads\/sites\/11\/2020\/05\/image-9-4.png\")
<\/p>\n