Exploiting sessionStorage API to design a user-friendly multi-step Lead Form
Tags: javascript, api, form, userexperience
Published: 2020-04-14 12:38:01

##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](http://cityvendinguae.com/) 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.

![image of a page section](https://dev-to-uploads.s3.amazonaws.com/i/p35ksqfnhh2gikf60bky.png)
<figcaption> Lead Generation Form displayed on the home page</figcaption> 





##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](https://developer.mozilla.org/en/docs/Web/API/Window/localStorage)**.

>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](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)

##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
![Image of form inputs](https://dev-to-uploads.s3.amazonaws.com/i/mxm2fu33rmcod9t7sqji.png)
<figcaption> These 4 inputs are to be captured using sessionStorage API</figcaption>


 



Add an event listener that listens for the page load and performs a function

```javascript
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

```javascript
function doFirst()
{
  var button = document.getElementById("button");
  button.addEventListener("click", saveForm, false);
}
```

![Form Filled](https://dev-to-uploads.s3.amazonaws.com/i/jtf2uju1ody59tavv4j1.png)
<figcaption> Form is filled randomly</figcaption> 

When the button click has listened, a **saveForm** function is activated which stores the form values using **sessionStorage API**.

```javascript
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.

```javascript
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');	
}
```
![sessionStorage in Action](https://dev-to-uploads.s3.amazonaws.com/i/fz6ef63ihslppksoh66j.png)
<figcaption> Session Storage in action inside Application Tab > Storage </figcaption> 

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](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) - MDN Docs