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 service-based 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 fulfils 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 timeout 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); } Now form is filled with random inputs 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. Links sessionStorage - MDN Docs 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 service-based 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. websites So what? 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 Lead Generation Form displayed on the home page Lead Generation Form displayed on the home page Lead Generation Form displayed on the home page Choosing the tool 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 . localStorage API 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 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 fulfils 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 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 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 timeout is 30 minutes A default session timeout is 30 minutes Say, these are the inputs I need to store in sessionStorage These 4 inputs are to be captured using sessionStorage API 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); window.addEventListener("load", doFirst, false); window .addEventListener( "load" , doFirst, false ); 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 doFirst function doFirst() { var button = document.getElementById("button"); button.addEventListener("click", saveForm, false); } function doFirst() { var button = document.getElementById("button"); button.addEventListener("click", saveForm, false); } function doFirst ( ) { var button = document .getElementById( "button" ); button.addEventListener( "click" , saveForm, false ); } function doFirst ( ) { var button = document .getElementById( "button" ); button.addEventListener( "click" , saveForm, false ); Now form is filled with random inputs Now form is filled with random inputs When the button click has listened, a saveForm function is activated which stores the form values using sessionStorage API . saveForm 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 = ''; } 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 = ''; } 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 = '' ; } 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'); } 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'); } 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' ); } 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 Session Storage in action inside Application Tab > Storage So that's how I did it! Takeaways 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 Links sessionStorage - MDN Docs sessionStorage
