Exploiting sessionStorage API to design a user-friendly multi-step Lead Form

Mohammed Zeeshan — Tue, 14 Apr 2020 12:38:01 +0000

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.

Lead Generation Form displayed on the home page

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

Say, these are the inputs I need to store in sessionStorage

These 4 inputs are to be captured using sessionStorage API

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);
}

Form is filled randomly

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');    
}

Session Storage in action inside Application Tab > Storage

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.