Generally, every website has got one or more web forms. The three main forms used by a typical website are: 

• Newsletter sign up form
• Lead generation form
• Checkout form

Since a user generally fills out a form before completing a conversion (sales, leads, newsletter signups, etc) on a website, optimizing forms for conversion can easily lead to higher conversion rates and sales in a short span of time.

Newsletter sign up form

When it comes to the newsletter sign up forms, you generally need to ask only two pieces of information from your users:

• Name (remove this field if you don’t really need it)
• Email Address

Any other information you ask is most likely to create friction and negatively impact your newsletter sign up rate. 

Lead generation form

When it comes to the lead generation forms, you generally need to ask only four pieces of information from your prospect:

• Name
• Email Address
• Phone number (remove this field if you don’t really need it)
• Message (i.e. inquiry)

Any other information you ask is most likely to create friction and could negatively impact your form conversion rate.

The best practice for form design is to minimize the number of form fields. It is only when you are getting tons of leads, you should consider adding more form fields in order to improve the lead quality. 

The main objective of a lead form is to capture the contact details. Once you have the contact details you can always ask other questions over the phone or via follow up emails.

Checkout/payment forms

Optimizing checkout forms is a bit tricky. There is no straightforward, set in stone guidelines to optimize checkout forms for sales. 

For some websites, single-page checkout forms work well. While for other website multi-page checkouts forms works well. You would need to test, what works well for your website.

 

The following are web form design best practices:

#1 Minimize the number of form fields 

Ask for bare minimum information from your prospect. The information which is sufficient enough to process an order/lead. Every field you ask users to fill out, create friction and can take your prospect one step away from completing the purchase or submitting the lead.

#2 If you are using a multi-page form then capture the contact details of your prospect on the very first page/step 

Because 70 to 80% of your prospects are going to abandon the checkout. And if you have the contact details available then you can easily retarget them.

#3 Keep you form design simple

Your form design is complex if:

• You are asking too much information in one go.
• There is not plenty of space between form fields.
• Input fields are tiny (not enough space to type & read what you typed).
• Your questions are not straightforward and easy to understand. 
• The overall design of the form looks unappealing. The more cluttered your form looks the less likely people will complete it.

#4 The purpose of your form must be clear to your users

The user must know what the form is all about. Why he should fill it and what he should expect next after filling out the form.

#5 Use the right form field for the task

If you are giving only 2 or 3 choices to your users, use the radio button. If there are more than 4 choices than use the drop-down list. 

If you are expecting a short answer from your user then use a single-line text box. If you are expecting a long answer from your user then use a multi-line text box. 

Where webmasters go wrong is when they are expecting a long answer from their users but provide a single-line text box or they are expecting a short answer from their users but provide a multi-line text box.

#6 There should be enough room to type in the form fields

Many websites ask a lot of information from their users but do not give them big enough input fields where they can easily type their answers and read what they typed. 

The physical size of your input field should match the length of the expected entry.

All of such minor inconvenience creates friction and can take your prospect one step away from completing the purchase or submitting the lead.

#7 Do not ask questions on the form which can be easily asked later over the phone or via follow up emails.

Every field you ask users to fill out creates friction and can take your prospect one step away from completing the purchase or submitting a lead. So the best practice for form design is to minimize the number of form fields.

#8 Do not hide your checkout form behind another form (like sign up or login form)

Many websites force users to sign up before they can checkout. You need to question the presence of such force signups. Is the website sign up so valuable for your business that it is worth denying users to check-out if they do not choose to sign up or log in first?

Once a user checked out, you can always automatically create his account on your website. His submitted email address would become his username and you can email him the auto-generated password. 

#9 Do not ask for useless information on your form.

Following are some examples of useless information (the one which does not really help in processing an order or lead) which you may be asking from your prospects via your forms:

• Salutation (Do you really need to know this?)
• Middle name (seriously?)
• Last name (In most cases you just need to know the first name)
• Phone number (ask for phone no, only when absolutely required)
• Username (there is no need to ask for username. Use the prospect’s email address as username)
• Password (there is no need to ask for a password. Send an auto-generated password via email to the user on sign up. If the user wants to rest the password, he can do it later.)
• Asking for the password twice (there is no need to ask for password let alone ask twice)
• Country (auto-detect users’ country via IP address. Don’t ask him to type it or select it from the drop-down menu).
• Optional fields (if you think they are optional then you don’t need them)

#10 Your web form should clarify to the users why a particular piece of information is required

If you are asking sensitive personal information (like phone number, credit card number, date of birth, etc) on your form then your users would like to know why that particular piece of information is required. 

When you give clarification, it helps reduce the fear in your users and improve the form completion rate. If you do not clarify why you are asking for say ‘Phone number’ then your users may not feel comfortable in moving forward with form completion.

#11 Your form fields’ names should be descriptive enough so that users do not question what is expected in that field

#12 Your form should provide strong visual cues to indicate errors

#13 Your form should provide informative error messages to the users

#14 Your form should provide inline validation

Inline validation is a feature that helps users correct their information as they move from one form field to the next. 

The objective here is to stop users from submitting the form with incorrect information and/or stop forcing the users to submit the form over and over again. 

The more failed attempts a user makes to submit the form, the more likely they are to give up and abandon form completion.

#15 There should not be too many restrictions on the format in which a user is allowed to enter information

The more restrictions you put on the users regarding how the information can be entered, the more difficult you make it for him to complete form submission. 

#16 Do not ask users to re-enter the entire information on form submit if they made an error while filling out the form

The more failed attempts a user makes to submit the form, the more likely they are to give up and abandon form completion. 

Retain users’ information on form submit even if they made an error while filling out the form. Don’t let them re-enter the entire information from scratch.

#17 Your form should be able to auto-fill certain/all fields

Every field you ask users to fill out, create friction and can take your prospect one step away from completing the purchase or submitting a lead. So wherever you can, use autofill/autocomplete fields. 

The autocomplete attribute tells a web browser (like Google Chrome) how to fill out a form based on a user’s Autofill profile and that too with close to 100% accuracy.

#18 Do not use captcha on your web form

A CAPTCHA (short for ‘for Completely Automated Public Turing Test To Tell Computers and Humans Apart‘) is a program that protects websites against form submissions by bots:

There are numerous studies conducted on the impact of captcha on form completion. And the general consensus is that captchas hurt form completion rate. They negatively impact conversion rates and are bad for sales. So avoid using captcha.

#19 Your form should use smart defaults

Smart defaults are intelligent guesses as to what the user will probably select. 

When you install software on your computer you often come across default settings (so that you don’t need to select them). These are examples of smart defaults

In the context of forms, smart defaults could be something like, if most of your users come from the US, it might be a good idea to default the country to ‘United States’.  Similarly, if most of your users subscribe to a particular payment plan, it might be a good idea to use that plan as the default payment plan.

Using smart defaults is just one of the small but important ways to make your user’s life a bit easy and reduce friction while filling out a form.

#20 Use trust seals when asking for credit card information on your web form

The “concerns about payment security” is one of the main reasons why people abandon checkout. 

The objective of using trust seals/badges is to convince prospects that your website is secure for carrying out ecommerce transactions and/or you are a legitimate business and not some fly by night operator.

Many trust seals are associated with SSL (secure sockets layer) which tell users that your website is safe for submitting credit card information. Then they are other trust seals like BBB which does not indicate enhanced security features enabled for your website but does indicate that your business has been examined to be trustworthy. 

#21 Use a big and bold call to action button on your web form

Form optimization best practices state that a big and bold call to action button is more noticeable and clickable to users. 

A call to action is the most important part of your form. A small button can make users feel uncertain about using it. 

#22 Your form submit button should say what is going to happen next

Submitting a form without knowing exactly what is going to happen next creates uncertainty and uncertainty creates friction. 

Instead of using a button caption like ‘submit’, make the form submit button say what it is going to happen next.

#23 Your form should prominently show confirmation message on form submit.

Your prospects want to know whether they have successfully submitted the form. Otherwise, they may re-submit the form over and over again or just give up doing business with you.

#24 Your form should tell users what to expect next instead of just plain ‘thank you’ message after form submission

Your prospects don’t like to be left hanging. They want to know when they can expect to hear back from you or what to expect next. 

#25 Your form should be mobile friendly

Test your web forms on different mobile devices & browsers and see how it works. 

Filling out the form on a mobile device should be just as easy as filling out the form on a desktop device. 

In the case of mobile, it becomes even more important to reduce data entry by reducing the number of form fields because of limited space. 

Advanced Web Form Analytics

There are many tools available in the market which provides advanced web form analytics. 

Through such tools, you can easily track each and every user interaction with your form. You can see exactly what fields users abandoned, where they are dropping off, how much time they spent on each field, etc. 

All these micro-form interactions can help you in identifying the form elements which are causing the most friction.  One such advanced form analytics tools is Zucko: https://www.zuko.io/

If you are on a budget then a cheaper alternative is to use the form analytics provided by advanced in-page analytics tools like Hotjar: 

You can also watch the sessions’ recordings of the users who visited your form pages. Hotjar provides sessions recording.

Related Articles

1. Schwartz five stages of awareness in marketing
2. Product detail page design best practices
3. Product images best practices for ecommerce websites
4. Product pricing strategies for ecommerce websites
5. Writing product descriptions that convert
6. 12 ecommerce best practices for your category pages
7. 25 web form design best practices – Optimizing forms for conversions
8. Shopping cart design best practices
9. Website navigation best practices
10. Brand reputation audit to find conversion issues