7 Mistakes to Avoid When Designing Web Forms

Web forms are often one of the last things considered in a website’s design, but it’s one of the most important ways someone will interact with your site. Whether it’s a checkout form, registration signup or a simple contact form, the following mistakes can hurt your chances of attracting leads.

1. Asking Too Much Information

Everyone’s time is valuable so don’t waste it by asking for unnecessary information. If you only need minimal contact information, don’t add fields for secondary phone or alternate email addresses. Keep it brief. Try progressive profiling, which will ask additional questions after a user has visited a form multiple times.

Ask for the most important information first so people feel they aren’t just giving you contact information for marketing purposes. If you are filling out a request on a quote form, ask for challenge, budget and timeline before asking for first and last name or email address.

2. Confusing Label Placement

Most mobile devices zoom to input fields, so make sure to put labels above inputs on mobile.

Ensure that your form field labels are placed correctly so users aren’t confused on what information they are being asked. Having labels left-aligned to their fields may confuse users after they begin filling out a form. Most mobile devices will zoom to a form field once a user begins filling it out, which hides all left-aligned labels.

This forces a user to zoom out and check fields every time they move to another input. A better solution is to use responsive queries to make labels top-aligned on mobile yet right-aligned on desktop. Try to make all labels bold so they are more prominent than other form text.

3. Using Only Placeholders Instead of Labels

Shopify does a great job of combining placeholders and labels for a great user experience.

A new addition to input fields with HTML5 is the added “placeholder” text. The placeholder attribute provides a short hint at the expected value of the input field. The placeholder text is displayed in the input field before the user enters a value. Then, it disappears when the user begins typing. Many designers have done away with form labels and use only placeholder text to describe input fields.

This may lead to a cleaner design, but it does so while sacrificing the user’s experience. This becomes problematic in situations where a user may begin typing in a field but may become unsure of their answer or the format needed. Once a user begins typing and all the placeholder text is removed, it can’t be restored without refreshing the page.

One compromise is to include labels hidden through the CSS and show them after an input field becomes active. Shopify provides a great solution that hides labels and then positions the labels above the input fields when a user begins typing.

4. Poor Spacing and Layout

Create a good flow for users by providing ample spacing around fields and sections. Group similar fields like first and last name with phone number and email under a heading of “Contact Information.” This gives more context to the requested fields. Try using small dotted or solid lines to separate groups and headings for better organization.  

5. Confusing Validation and Error Messages

One item that can hurt conversions and frustrate users is when they encounter errors filling out forms. This may be due to a missing required field or an invalid format in a response field, such as email addresses or phone numbers.

To avoid this issue, make sure to display error messages at the top and bottom of your form so users don’t miss that something is wrong with their submission. Highlight all incorrect fields with a special border and text color. Also explain why their submission is incorrect in a particular field.

6. Hard to Enter Captchas

Form spam can be extremely frustrating and can cause errors in lead generation reporting. Most people combat this with a captcha, which is used to determine if the form is being answered by a computer or human. Captchas can be confusing and difficult for users to decipher.

First, only use them if you find you are receiving a large amount of form spam. Second, make sure to provide users with the ability to refresh or play an audio file of the words for accessibility. Another solution to combat form spam is to use a “honeypot” or hidden field that only spambots would fill, preventing them from actually completing the form.

7. Not Giving Users Confirmation or Success Messages

Once a user has taken time to enter a form on your site, give them instant feedback to let them know that their efforts were successful. Display messages immediately letting the user know their submission was successful.

We also recommend sending a confirmation email with a user’s submission information. Take care to also set expectations on how long it will take someone to respond so the user isn’t left wondering when someone will contact them.

Check These Out: