Categories
Guides

Form fields: How to make them better?

Introduction to form fields

Have you ever filled in form fields on a website and experienced severe boredom and frustration at the same time? It’s no secret that filling forms is an essential but boring step to ordering products online or signing up for services. Some forms are worse than others but there are a lot of opportunities for optimization.

This article will contain everything you need to know about form fields. It will contain the basics of form fields and how to collect behavioral data. Then we will analyze this data to collects issues and insights for writing testing hypotheses.

Basics of form fields

What are form fields?

Form fields wireframe
Photo by Hal Gatewood on Unsplash

Form fields are individual inputs that the users need to interact with in order to complete the form on a website. Usually ending with a submit button to send the data towards the other party.

Most websites will have forms on their website for letting people subscribe to their newsletter. Another example is in the checkout because you will need users to fill in their personal information for a transaction. Users will need to register and login on your website and those are also forms.

Form fields can have a lot of different types of fields that the user can interact with:

  • Text fields
  • Radio
  • Range
  • Checkbox
  • Color
  • Date
  • Email
  • File
  • Image
  • Password
  • Button
  • Datetime-local
  • Hidden
  • Month
  • Number
  • Reset
  • Search
  • Submit
  • Tel
  • Text
  • Time
  • URL
  • Week

By using these types you will let the computer know what kinds of data types it can expect, making it less likely that errors occur while transferring the data to a server. The main goal of a form is to transfer information towards another party.

Why is it important to improve your form fields?

Laptop with simple text
Photo by Ben Kolde on Unsplash

Imagine having to fill in every single of the above form types for finishing a single transaction. It’s boring and a lot of people will leave your website because of it. People are used to everything being fast and easy and you can consider a form a sticky residue on the road that makes your car go from 100 km/hour to 20. Nobody wants to be slowed down in that kind of way.

This is even more true with the younger generation of people on the internet and it’s almost impossible to make it an enjoyable experience. But there is one thing you can do, you can make it as easy as possible so the user doesn’t get slow to 20 km/hour but to 50. This way a lot fewer people will leave your website while filling in a form and resulting in more transactions for your website.

Another reason is data collection about users because forms are the best way of getting to know your customers for birthday e-mails for example. If your forms are easy to use you will have a lot more information that you can use in the long run for all sorts of different marketing activities. 

It’s very important to find the balance between collecting profile data and making the form easy to use because they kind of work against each other because the user will have to complete more steps to submit a form. Data collection will make you lose users but if the data is used for marketing activities in the future it will make up for the loss and increase your customer retention through personalization.

What are the most important form fields on your website?

Product page form fields
Photo by Charles Deluvio on Unsplash

To determine the most important forms on your website you will need to think about important goals for your website.

If you are a blogger or a news outlet you might prioritize getting people to sign-up for your newsletter because that’s the biggest source of income. By growing the number of people in your e-mail list you will be able to increase customer retention. So all the forms that lead up to that sign-up are very important. Here are some examples:

  • Sign-up page form
  • Footer form
  • Exit-intent form
  • Notification form
  • Navigation form

An e-commerce store’s most important goal is selling products. Every form that leads up to the sale of a product will probably be very important. Some e-commerce stores will also have a newsletter so then the above list applies here two. For people to buy a product they will always come in contact with three forms:

  • Checkout form
  • Login form
  • Registration form

If you are a SaaS company you will have similar forms as e-commerce and blog. But usually, there are two more forms that come to mind:

  • Pricing form
  • Quotation form

A pricing page will contain a range slider to let the user choose the traffic his or her website has to determine a price suitable for them. And the quotation page will contain the information needed to give a customer a manual price indication that fits their organization because a lot of time the software has to be adjusted for every customer.

The main idea here is to have your goals in mind and figure out what forms are in between these goals!

Why collect data on your form fields?

Data in graphs
Photo by Luke Chesser on Unsplash

If you want to optimize the forms on your website you will need to collect data on how they are used. You can analyze this data to collect insights and issues about your forms. This will give you a higher chance of creating a successful test that will lead to more conversions.

To able to collect data on your form fields you need to have a great tool. Outgrow is the answer!

Boost Your Marketing with Interactive Content

  • Use Outgrow’s simple, no-code tools to acquire qualified leads.
  • Calculators
  • Quizzes
  • Assessments
  • Recommendations
  • Polls
  • Chatbots
  • Giveaways
  • Forms & Surveys

GrowthPenguin is reader-supported. When you buy through links on our site, we may earn an affiliate commission.

Collecting behavioral data from your form fields

What kind of research can you use for form optimization?

You can use a lot of different types of UX research methods to analyze your forms. Using multiple research methods will help you find more insights than running these individually. This is because you have quantitative and qualitative research. Quantitative research focuses on why users do something and quantitative focuses on what users do on the website. 

Check out my other article about 8 UX research methods to find insights for A/B testing if you want to learn about the different research methods and their differences.

I like to use three main research methods using Hotjar:

  • Form analytics
  • User recordings
  • Heatmaps

Form analytics

Form analytics collects data on the actions of users at a form field level. This means you will be able to see different metrics per field and see what form fields need to be improved. You are able to see the time it takes to fill in fields and the drop-off rate on the page and fields. Another thing you will be able to see is the number of users that re-fill the form field and which fields users leave blank. All this information will already tell you a lot about your forms and how to improve them.

Form field analytics in Hotjar
Image by Hotjar

How to setup form analytics?

You can setup form analytics using different platforms. I personally like using Hotjar or Zuko for my form research. Here a list of some of the starter guides with different companies that offer form analytics:

Heatmaps

Heatmaps are a visual representation of customer behavior with colors indicating different rates of interactivity. You can use these on your pages with forms on them to learn more about how there are used within that page. It can be a strong method to strengthen your other form of research because you have another perspective to analyze your forms from.

Heatmap in Hotjar

Image by Hotjar

How to set up heat maps for form analysis?

I actually made a guide to set up a heatmap for your website with Hotjar so feel free to check it out and set up your first heatmap right away. Alternatives to Hotjar are:

User recordings

User recordings are actually what the name describes they are. Recordings of a user’s screen while they are on your website. You can see them click, scroll, and move their mouse while navigating through your website. Collecting these kinds of recordings when they are on your forms will give you a first look into a user’s behavior while filling it in. You will be able to easily signal issues and insights that work well to strengthen your other research methods.

Form fields in user recording
Image by Hotjar

How to setup user recordings for form analysis?

If you want setup user recordings I recommend using Hotjar because you will be able to run all of the research methods within the same software. This will save you time costs. Here is a guide from Hotjar to set up your first user recording.

You can also follow this Hotjar course on Udemy.

Udemy logo

Hotjar Hero Masterclass

  • Use and leverage the entire Hotjar software suit. No tool is left uncovered!
  • Increase your understanding of your website visitors and customers.
  • Grow your business by removing roadblocks in your websites design and interface.
  • Understand best practices for researching and profiling users as they interact with your website.
  • Expand your online business with increased conversions and sales,

GrowthPenguin is reader-supported. When you buy through links on our site, we may earn an affiliate commission.

Alternatives to Hotjar would be:

Collecting issues and insights of your form fields

Data has a better idea
Photo by Franki Chamaki on Unsplash

How can I collect issues and insights from form analytics?

Form field metrics
Image by Hotjar

If you want to analyze your form analytics you can use the different metrics to get insights & issues. I divided this section into explaining the different metrics and what they represent. 

What does a form field with high time on the field mean?

An orange or red average interaction time means the time on the field is fairly high. This means that the users spend a lot of time on this field compared to the others on the page. This could mean that users are unsure about what they need to put in the field or that they need to look up the information to supply it. Another reason could be that it’s a longer answer that users need to fill in with a text area for example. Consider changing or removing this input field if it’s unnecessary.

What does a  form field with a high re-fill rate mean?

When you see a form field with a high re-fill rate there are users that re-click, tap, or change the content of a text field frequently. This could mean the didn’t understand the field initially but realize later on what they needed to fill in. Try changing the label of the field so it’s immediately clear what the users need to fill in. 

What does a  form field with a high left blank rate mean?

These are the fields that are left blank when submitting the form. If these are required form fields you will notice a big drop-off at these form fields. These forms need to be adjusted or deleted for getting a better form conversion rate. If the form fields are not required you can ask yourself if it should be placed in the form. It will only distract your users.

What does a form field with a high drop-off-rate mean?

If a field triggers a high drop-off rate you need to investigate why this is. Check your other research methods and compare these to your form field metrics. An example would be a high drop-off rate at a business name field. Most consumers won’t have a business so they might leave it blank or leave the form all together because of relevance. This metric is where you find your biggest wins!

What does a form with a high bounce rate mean?

The bounce rate will be high if your users are faced with 15 form fields when visiting your form page. Try minimizing the number of form fields to a minimum amount with clearly identifiable labels to reduce a user’s pain. If you already have data on this person because he or she has an account you can use that to fill in the data that already exists so your users only have to check it the form for mistakes.

How can I collect issues and insights from user recordings of form fields?

User recordings back-end
Image by Hotjar

When you are watching user recordings in Hotjar you need to have a process of collecting insights and issues because watching hours of footage without it is a waste of time.

The first thing you need to do if you haven’t done this already in the setup is filtering out the sessions where the user visits the page where your form field is located. This saves you the time of looking at a lot of irrelevant recordings.

Set Hotjar up to skip pauses so you skip the part where people are just doing nothing on the screen. Watching this is just a waste of time.

Another time-saver is setting your user recordings to autoplay so you can sit back and take notes of the most important events. It’s important you make these notes in the program so you can quickly collect all of your insights and issues in the end.

Another time-saver is setting your recordings to x2 if you want to go through it faster. Just pause the recording when you writing notes.

Block out an hour or more of your time as a watching session so you won’t be disturbed in the process. A good way of collecting more insights and issues is by watching them together with your colleagues!

Things to watch out for:

  • Form fields that are refilled repeatedly
  • Form fields that take a long time to be filled
  • Form fields that are left blank
  • Technical issues
  • Users repeatedly scrolling back up
  • Rage clicks
  • Exits after form fields
  • Anything that is not intended behavior

If you are using user recordings for other purposes then forms you can also check out Hotjar’s own guide to user recordings: What Are Session Recordings (Session Replays) + How to Use Them.

How can I collect issues and insights from heatmaps of form fields?

Form fields heatmap
Image by Hotjar

You really want to use heatmaps compare results of your other research methods. You can use it to strengthen your testing hypothesis. The bounce-rate for example. You might notice on your heat maps that users are being distracted by certain images on the page that stray them away from completing the form.

You can look at these factors for finding out insights and issues:

Scroll maps

  • Average fold
  • Fake bottom
  • Users interests
  • Hypothesis prioritization

Click maps

  • Dead zones
  • Key elements

Move maps

  • Distractions
  • Key elements

If you need a more detailed explanation of the factors you can check out my extensive guide for setting up and analyzing your heatmaps to find insights and issues here:

Heat map testing with Hotjar: How to set it up?

From issue and insight to a testing hypothesis

How to write a hypothesis?

Writing a hypothesis
Photo by Scott Graham on Unsplash

The way I write the hypothesis is taken from my frequently visited resource CXL. This article is described how Craig Sullivan uses this template for writing a strong hypothesis:

“We believe that doing [A] for people [B] will make outcome [C] happen. We’ll know this when we see data [D] and feedback [E].”

Examples of testing hypotheses

Imagine finding the issue that there is a big drop-off rate at the gender input field and that users repeatedly change the gender to female. A testing hypothesis in the above form would then be written like this: 

We believe that changing the standard gender input field from male to unfilled for all users will increase form completion rates. We’ll know this when we see a 5% increase in form completion rates and a lower drop-off rate at this particular form field.

Conclusion

Increased revenue because of better form fields
Photo by Austin Distel on Unsplash

I hope this article has gotten you well on your way with optimizing your forms on the website and notice a big increase in the amounts of conversions on your website.

Good luck with your future form optimizing endeavors! If you have any questions or comments you can leave them down below or send me a mail at jeroen.wiersma@outlook.com.

Leave a Reply

Your email address will not be published. Required fields are marked *