The user experience (UX) of a website includes everything a visitor interacts with, from the layout and design of the pages down to the color of the buttons. When a website provides an intuitive and engaging experience for visitors, they’ll be more likely to stay on the site longer, and thus more likely to turn into leads.
Your forms make up a crucial part of your website’s UX. Forms are how you learn about your visitors, provide them with valuable offers, and start a relationship which will hopefully result in a new customer. Form user experience is the process of focusing on how your website visitors interact with every aspect of your forms.
A form with a good UX will be easy to complete, simple to understand, and visually appealing. When it has these, your website visitors will be more likely to finish filling out your forms and submit them, helping boost your conversion rates.
In order to accomplish these three objectives, there are a few things to keep in mind when designing your forms.
1. Only collect the data you need
When designing your forms, the first thing you should consider is, What data do I want to collect? It can be tempting to add in every form field in your CRM to gather as much insight into your users as possible, but avoid this temptation. Your form should only collect the information that’s most essential, and nothing more. Otherwise, you’re creating a poor user experience and people are less likely to actually complete your form.
The number of fields on your form should also correspond with the value of the offer you’re providing. For example, a form to download an eBook shouldn’t ask users to give their home address. That information is much more valuable to a user than what they’re getting in return for it.
2. Use a one-column layout
Use a one-column layout to make your forms more intuitive. This way, users can easily see which fields they need to fill out and can tab from one field to the next. This also helps your forms appear better on tablets and mobile devices.
3. Make it mobile-friendly
Speaking of mobile devices, make sure your forms are mobile-friendly. Today, consumers can do everything on their phones, so you need to keep the mobile user experience top of mind when designing your forms.
Always preview your form on a mobile device before publishing it. You can use the device simulator previews in HubSpot, or go one step further and pull out your actual phone.
Another way to make your forms mobile-friendly is by using smart content. With smart content, you can dynamically display an entirely different form to users based on the type of device they’re viewing your page on.
Make the experience of filling out your form on mobile as easy as possible by swapping text input fields for radio select or checkbox, or entirely removing fields that are difficult to fill out on phones. To learn more about how to use smart content in HubSpot, check out this lesson from HubSpot Academy.
4. Include a clear and obvious button
Make it easy for your user to submit the form by including a clear and obvious button at the end. This button should use an eye-catching color that contrasts with the background color of the page to make it pop. Use the styling options in the HubSpot forms editor under the “Style & preview” tab to change the colors and fonts quickly and easily.
Also, ensure that the text you use for your submit button clearly states what will happen when the user clicks it. Use action-oriented words like “Submit comment” or “Click here to sign up” that makes it obvious what the user is meant to do.
5. Personalize the form experience
Improve the user experience form by personalizing your form to the person who’s filling it out. You can use progressive fields and dependent fields in HubSpot to tailor your forms to the individual and make filling out your form a more delightful experience.
For example, you don’t want to ask users to fill out a form with their state and zip code if they’re located outside the U.S. This creates confusion, which creates a poor user experience. Instead, use a dependent form field to only ask users who identify their home country as “United States” to give their state and zip code.
Use queued progressive fields to replace form fields that your contacts have already submitted with something new. For example, if you’ve already collected a contact’s name, asking for their name again creates extra work for them. Instead, replace the “Name” form field with a different field, such as their job title or areas of interest.
6. Include help text and labels
Improve the usability and accessibility of your forms by adding help text and clear labels to your form fields. In the forms editor in HubSpot, you can easily add these in — just make sure you’re descriptive and keep the user in mind.
You can also add placeholder text in HubSpot to show users an example of what type of information you’re looking for. However, avoid using this by itself with no other indicator of what that form field is asking. Since placeholder text disappears once a user starts typing, if they forget what you were asking for, they’ll need to delete everything they’ve typed to see the placeholder again. This creates a poor user experience, so make sure you have a secondary form label if you’re going to use this option.
7. Mark required vs. optional fields
Finally, make sure users know exactly which fields they need to fill out and which ones are optional by clearly marking your required fields. HubSpot does this automatically for you when you select the option to make a field required on your form.
Ready to learn more about how to create an excellent user experience on your website? Head over to HubSpot Academy and check out the lesson “Designing the User Experience in HubSpot.”
Want to connect with others on HubSpot tips, tricks, and updates? Head over to the HubSpot Community to join a conversation or start one of your own.
