(click to expand/hide)
Avoid adding any unnecessary fields or questions. Include only the required information in your form.
(click to expand/hide)
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.
(click to expand/hide)
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.
(click to expand/hide)
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.
(click to expand/hide)
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.
(click to expand/hide)
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.
(click to expand/hide)
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.
(click to expand/hide)
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.
(click to expand/hide)
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.
(click to expand/hide)
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.
(click to expand/hide)
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.
(click to expand/hide)
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.
(click to expand/hide)
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.
(click to expand/hide)
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.