Hotjar lets you see how users are interacting with forms on your site so you can better visualize what's working or what might be a sticking point. You can track forms in two ways:
- Visualize how users navigate forms using Heatmaps and Recordings
- Track specific interactions with form fields using custom Events
- Use the Entered Text Filter to focus on sessions where certain fields weren't skipped
Visualize how users navigate forms using Heatmaps and Recordings
Heatmaps
Using the different map types in a heatmap that's targeting a page containing a form can help you understand how users are interacting with that form.
Use the click map to see which fields get the most interaction.
This can help you identify fields not getting much attention and may need to be moved or deleted.
Use the scroll map to see how far users scroll down the page.
If most users didn’t scroll down to the submit button, it could be a sign something is stopping them from filling out the entire form.
Use the engagement zones map to view click, move, and scroll interactions in one view.
Engagement zones let you see which parts of your form users engage with most. You can use this to see if a field lower down in the form is getting a relatively low interaction but would likely perform better if it was moved higher up.
Use the rage-clicks map to see if users are getting frustrated.
Rage-clicks are when users repeatedly click in a certain area or on a specific element of your page over a short period of time. They can help identify things in the form, like a broken Submit button or fields that aren't working correctly.
Learn more about our different types of heatmaps and how to create your first heatmap.
Recordings
Recordings can help confirm these findings and add an extra layer of context by letting you watch users in action filling out forms.
You can look for things like whether users:
- Are filling specific fields more than once.
- Get frustrated when they're unable to figure out what they should be doing and leave.
- Click in areas you wouldn't expect.
You can help answer these questions by analyzing recordings and using session filters like Rage clicks and U-turns. For more tips on this, check out our Recordings Playlist Guide.
Track specific interactions with form fields using custom Events
It is also possible to set up custom Events to track interactions with your form fields. Setting these up will let you:
- Filter recordings and heatmaps by Events.
- Target sessions and surveys by Events.
- View Events associated with surveys and recordings in exported CSV/XLSX data.
For example, if you want to know how many users didn't complete the form, you could:
Create an Event to track users who viewed the form but didn't submit it.
Filter your heatmap or recordings to focus only on those sessions containing that Event.
Use the same Event to create a survey and target users.
You can use this survey to ask these users directly for feedback on why they may have abandoned the form.
Learn more about setting up Events.
When you implement Events, you’ll likely find a few sets of filter/Event combinations that you’ll want to revisit. You can save these so they are only a click away:
Learn more about how to save heatmaps and recording segments.
Use the Entered Text Filter to focus on sessions where fields were filled and skipped
The Entered text filter helps you identify sessions where users entered or changed the text in an input field like a form. You can refine this filter by specifying conditions such as the CSS selector to focus only on sessions where form fields were interacted with:
Click the Add filter dropdown menu and select Entered text.
Add conditions to focus on certain URLs or specific fields.
You can refine the Entered text filter by applying multiple conditions based on:
- Whether the action occurred or did not occur.
- The page URL - See our How to Use Conditions in URL Filtering article for help using URLs as the filter condition, including using regex.
- The CSS selector (example: the "payment" field)
Click Apply to confirm and filter your session data.
Learn more about How to Use the Entered Text Filter