Form design: 10 tips on how to design a form that brings in conversions

Web forms are a key part of most websites, helping users and businesses connect and get things done. They make it easy to:

• Sign up for online communities

• Complete purchases

• Share info and communicate through data submissions

But despite how important they are, many forms are still poorly designed—missing out on potential conversions. Here are some key tips to follow to make sure your forms work smoothly and effectively.

Form elements

First off, let’s explore what elements make up a form.

Labels

Labels literally label your input fields and tell users what information they need to provide in each.

The labels in this form, such as “Work Email” and “Job Title,” provide users with clear guidance on what to enter in each field

Follow these best practices when creating labels for your form:

• Top-aligned labels are generally a safe bet and make it easier for different-sized labels and localized versions to fit easier within the UI

• Left-aligned labels are best when the form is short and ask very similar questions such as date ranges

• Labels are not help texts. Use succinct, short, and descriptive labels so users can quickly scan your form.

• Labels are also not placeholder text. Unless you have real estate constraints try to avoid inline labels. If you think they are your best option however, consider these types of css3 / javascript adaptations.

• Inline labels are best used for very short forms (between 1 to 4 fields), such as search or logins. In longer forms, they tend to hinder the form's usability.

• HTML placeholders are good to type in examples for the users to see

Input fields

Input fields are what allows your users to fill in the form. Depending on what information you ask, there are various types you can use—text fields, password fields, drop-downs, check boxes, radio buttons, date-pickers, and others.

Some tips to keep in mind when creating input fields:

• Avoid drop-down menus with fewer than 4 options. Use radio buttons instead.

• Visually group related details, such as first name and last name (even better: combine them into one field ‘Full name’)

• Date of birth can be a single date-picker, not 3 separate dropdown menus

• Try to avoid optional form fields. If you cannot, a simple '(optional)' in the label is enough to differentiate it from the other fields.

Action buttons

When clicked, these buttons trigger an action such as submitting the form.

Here are some action button best practices:

• Avoid generic instructions such as ‘Click here.’ Instead, state what actions the buttons do when clicked, such as ‘Create my FREE account’ or ‘Send me weekly offers’.

• Avoid multiple action buttons since they might distract users from the goal at hand, in this case, submitting the form

• Reset buttons are generally more frustrating than useful to have, so avoid them if possible

• Make sure action buttons look like buttons. Style them in a way that makes them ‘pop’ on the page.

• Align action buttons to the input fields 

• Clearly indicate that the form is being processed after the user has submitted it (and disable the submit button at that point). This provides feedback to the user whilst also avoiding double posts.

Buttons come in different shapes, sizes, and colors. Choose the styling that best suits your site and remember to label your buttons according to what action they do so users can understand the form’s purpose.

Help

‘Help text’ provides assistance on how to fill out any input fields when the field labels alone are not enough.

Here are some useful tips:

• Input fields that require help should be kept to a minimum, especially on mobile device

• A clean way of integrating help is to show it on the right-hand side of the field when the user focuses on it so that it is always in context

• If space is an issue, tooltips are a nice solution. If a lot of information needs to be provided either reveal a hidden area underneath the label or popup a new window.

• Try to avoid help icons with a hover or click action. Instead use descriptive texts such as ‘What is this?’ or ‘Why is this information needed?’

Always provide more information on fields which absolutely need it

Feedback/Form validation

Your online form should provide clear feedback. If users can't submit it and don’t know why, it becomes more frustrating than helpful.

Keep these considerations in mind:

• Users should always be allowed to click on the submit button. Disabling buttons because the form is invalid leads to a poor user experience.

• Real-time inline validation is a good practice, especially when different input fields relate to one another

• When form submission fails, a top-level error message should appear with a double visual emphasis (typically red in color with a warning icon) above the form and indicate why it failed

• The erroneous fields (if any) should be highlighted and visually associated to the top-level error

• Validation text should be provided next to the erroneous fields giving an easy-to-understand solution on how to correct them

• To avoid confusion, reserve the red color and warning icons for error messages and destructive actions only

Be descriptive in your error messages so users know what they need to fix

How to optimize and improve your forms

Now that we went through some guidelines for form elements, let's explore how you can optimize and improve the form as a whole.

#1 Only ask what's indispensable

Every single field you add to a form will affect its conversion rate, so make sure you only ask what you really need. 

Do you really need to know their phone number if you will only contact them if they need support? Do you really need to know their 'title' or whether they are male or female? 

Always question why and how the information you ask of your users is being used.

#2 Know when to ask for the appropriate information

Have you ever entered a clothing store where the associate asked you to provide your credit card number before you tried something on? Probably not. 

If your form is about allowing your users to access a 30-day free trial, don’t ask for their home address (unless the trial requires you to mail something).

Asking for irrelevant information will give users pause and cause them to wonder why you need the information you’re asking for. In turn, they might feel skeptical and abandon the form.

#3 Include trust factors

Trust is the amalgamation of beliefs and expectations users have of your company and is a key component in conversion. 

However, earning that trust takes time. That’s why incorporating third-party trust signals can help reinforce credibility.

These trust factors, like links to your privacy policy can give users confidence that your company meets established standards.

Contentsquare’s form links to 2 pages to build trust with users

#4 Make it easy for your users to scan the form

The form title should relate to the goal it allows users to complete. Avoid using generic titles such as ‘Please fill in this form to continue’ and instead opt for a more descriptive one such as ‘Register for your free trial’ or ‘Join our community’.

All the different elements within the form should be visually distinctive from one another and should have enough white space so users don’t feel overwhelmed looking at your form.

Users need to be able to scan the form and immediately understand which is the submit button, which are the labels and which input fields they need to enter, and estimate how long completion time will take.

#5 Order the form logically

Details should be asked logically from a user’s perspective, not the database. Typically, it's unusual to ask for someone’s address before their name. 

For long forms, structure multiple fields by visually grouping them together in sub-sections such as account details, contact information, payment details, etc.

#6 Use smart defaults

Smart defaults are a great way to speed up form completion by automatically filling in fields for most users. For example, a language dropdown can default to the user’s browser language, and the country field can be pre-filled based on their IP address using geolocation.

#7 Break complex forms in a multi-step process

For longer forms that cannot be shortened, your best option is to split the process into various bite-size steps. 

The multi-step form process can increase success rates and overall make your form less intimidating from a first impression. 

Make sure you split the requested information logically and that users are shown their progress within the process. This can be achieved by indicating the step they are on (example: Step 2 of 3) and by providing a visual cue such as a progress bar or a percentage, which is how survey forms typically handle it.

#8 Usability testing

Usability testing is indispensable in such a crucial part of your website or application. Very often, carrying out just 2 tests or simply asking a colleague or friend to go through a prototype of the form can give you ample insights in how usable the form is and what’s not immediately obvious by observing how they fill it out.

#9 Carry out A/B tests

Although forms on different sites have a lot in common, it doesn't mean that copying someone else’s sign up form will work for your website as well. 

A/B tests allow you to do tiny alterations to your form that gradually improve its conversion rate. 

Tests include altering the action button in text, size, and color, making trust factors more prominent, adjusting field positions, removing optional fields, finding unnecessary non-related fields, and many others.

💡 Pro tip: you can use tools like Heatmaps and Session Replay to see how visitors interact with your forms—which can help you make decisions about how to improve the design of your forms based on real user behavior.

Contentsquare Heatmaps gives you valuable insight into what prevents user from filling out forms so you know which changes will get more users across the finish line

#10 Conform to standards

Ensure users can navigate through fields using the ‘Tab’ key in a logical sequence. Additionally, follow web standards, such as enclosing forms within proper HTML <form> tags, to maintain accessibility and functionality.

These simple tips create a far better user experience for your users, resulting in a higher completion rate for your form.