Test your forms
Learn how to test and analyze your forms.
In previous modules, you learned how to build a form, help users avoid re-entering data, and how to validate form data. How can you now make sure the form is usable? You can test and analyze your form to answer this question.
Does your form work on other devices? #
You begin by confirming that your form is working on your own device. However, there are many types of devices your users may use. How can you test if your form works with other devices?
First, test your form on a desktop device. Then try only using your keyboard. Next, test it on a phone. You have now tested your form with different input methods (keyboard, touch, and mouse), different screen sizes, different browsers and different operating systems.
Do you have more devices you can test on? Test your form on all of them. The more different devices, browsers, browser versions, and operating systems you can test on, the better!
You can also use a test service to test your form on lots of different browsers, different browser versions, different devices, and different operating systems. BrowserStack offers free test accounts for open source projects, to enable testing on different browsers, devices and operating systems.
How can you test if your form works for others? #
Your first form is ready. You spend a lot of time making sure it works well. How can you confirm that your form is usable for everybody else? As a first step, you can ask your friends and colleagues to fill out your form.
Sit next to each other or share a screen. This way, you can see how they interact with your form. Watch them fill out the form. Ask them to say out loud what they're doing and if they're experiencing any problems. After they complete the task, ask them questions. Was it clear what they should fill out? Did they have any issues filling out the form? Was anything unclear? These questions help you build even better forms.
How can you measure how your form performs? #
You confirmed that your form is usable for other people. As a next step, you should measure how your form performs. There are free tools available for this. Let's have a look at some of them.
PageSpeed Insights (PSI) #
PSI measures the performance of your site and gives you hints on how to improve it.
Try it out: PageSpeed provides a performance report using lab and field data. A fast site is the first sign that your form is usable. Your site isn't fast yet? PSI shows you recommendations on how to improve performance.
Look again at the report of your site you tested before with PSI. See the information about Core Web Vitals (CWV)? This is a summary if your site fulfills the CWV criteria. CWV helps you understand how users experience a web page.
Lighthouse helps you identify performance, search engine optimization (SEO), best practice, and accessibility issues.
The performance metrics from PSI are displayed. In addition, Lighthouse checks your site against SEO, best practice, and accessibility issues. Forgot to connect a label to a form control? Lighthouse warns you and provides you with a guide to correct the issue.
Tools to identify common issues #
There are many tools to identify common issues.
One way is to use the
Form troubleshooter extension.
It warns you about missing
non-standard attributes, missing or empty labels, and more.
You can also use an accessibility evaluation tool like WAVE or axe. These tools notify you about missing labels, missing connections between labels and form controls, insufficient color contrasts, and many more accessibility issues.
How can you monitor form experience? #
Monitoring real user experience of your forms helps you identify new issues quickly. Let's see how you can monitor your form.
PSI includes data from the Chrome User Experience Report (CrUX) dataset, if available for the given URL. This way, you can also see field data directly in the report.
Lighthouse can be used as a command line tool, as a Node module, or with the Lighthouse CI tools. Performance monitoring with the Lighthouse CI explains adding Lighthouse to a continuous integration system, such as GitHub Actions.
There are many more tools available to measure and monitor your site. Some are available as web tools, some let you run the audit on your command line, and some offer an API to integrate them into your tools.
How to analyze your form #
You tested your form with real users, and learned how to measure and monitor it. How can you collect statistics about your users and how they interact with your form? You can use an analytics tool. Let's have a look at one and how this works.
How many people visit the page with your form on it? How many fill out the form and move to the next page? You get answers to these questions by using analytics tools.
You can also set up more advanced analytics reports. Want to track how many users click the Submit button? You can define and integrate events to analyze this.
A wide range of analytics tools is available. Some are minimalistic, some offer a lot of options for individualization. Try out a range of tools to find the best for your needs.
What is field data?Data collected on a field. Data from real users. Data from real conditions. Data collected in a lab.
RUM collects metrics from:real users pre-selected users pre-defined browsers browsers from end users