TL;DR
This article breaks down the tiresome task of filling a multi-step form using sessionStorage API. Result? Better UX
Use Case
One of the websites I developed for a coffee vending machine business has a multi-step quote request form page. I had created a number of links on the home page and other main pages to the multi-step form page. But didn't have enough leads coming to that page.
So what?
I added a little more style to those link buttons and micro-interaction to the links on the home page. I wasn't satisfied.
So I thought of displaying a part of the multi-step form in the home page hero and filling the form redirects to the page where the user can fill the rest of the form.
Choosing the tool
With the design done already, I was searching for the code blocks that will help me implement it. The first thing came to my mind was using localStorage API.
The read-only localStorage property allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.
~ MDN
But I want the data to be cleared when the user quits or when the session ends. So this wasn't the perfect one for me although it partially fulfills my idea.
The next line of localStorage Docs on MDN gave me the glimpse of the tool I might use instead
localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session ends — that is when the page is closed.
~ MDN
Implementing sessionStorage API
The great thing about sessionStorage is that it survives page reloads and restarts and only gets deleted while the session ends or quitting the browser.
A default session time is 30 minutes
Add an event listener that listens for the page load and performs a function
window.addEventListener("load", doFirst, false);
So, while the page is loaded, doFirst function is activated which in turn listens for button click on the form
function doFirst()
{
var button = document.getElementById("button");
button.addEventListener("click", saveForm, false);
}
When the button click has listened, a saveForm function is activated which stores the form values using sessionStorage API.
function saveForm()
{
let name = document.getElementById("name").value;
// Save data to sessionStorage
sessionStorage.setItem("name", name);
sessionStorage.setItem("email", email);
sessionStorage.setItem("phone", phone);
sessionStorage.setItem("company", company);
document.getElementById("name").value = '';
document.getElementById("email").value = '';
document.getElementById("phone").value = '';
document.getElementById("company").value = '';
}
Clicking on the button takes to the multi-step form. On loading, this page, an on.load event is fired which activates the function that gets our form input and sets into the input field.
document.onload = display();
function display()
{
// Get saved data from sessionStorage
document.getElementById("name2").value = sessionStorage.getItem('name');
document.getElementById("email2").value = sessionStorage.getItem('email');
document.getElementById("phone2").value = sessionStorage.getItem('phone');
document.getElementById("company2").value = sessionStorage.getItem('company');
}
So that's how I did it!
Takeaways
The key benefit of such an approach is it makes the task of filling a multi-step form easier, which is often regarded as a tiresome task. Though it doesn't cut any cost in effect, it contributes to better form-experience.
Let me know your thoughts! I would be happy to hear your feedback/critics on this approach and what would you have done instead. Also, feel free to leave your tips on designing a better form experience.
Links
sessionStorage - MDN Docs
Top comments (0)