{"id":1809,"date":"2024-12-03T09:00:00","date_gmt":"2024-12-03T10:00:00","guid":{"rendered":"https:\/\/fdswebdesign.com\/?p=1809"},"modified":"2024-12-03T23:43:20","modified_gmt":"2024-12-03T23:43:20","slug":"creating-an-effective-multistep-form-for-better-user-experience","status":"publish","type":"post","link":"https:\/\/fdswebdesign.com\/index.php\/2024\/12\/03\/creating-an-effective-multistep-form-for-better-user-experience\/","title":{"rendered":"Creating An Effective Multistep Form For Better User Experience"},"content":{"rendered":"
Creating An Effective Multistep Form For Better User Experience<\/title><\/p>\n<article>\n<header>\n<h1>Creating An Effective Multistep Form For Better User Experience<\/h1>\n<address>Amejimaobari Ollornwi<\/address>\n<p> 2024-12-03T10:00:00+00:00<br \/>\n 2024-12-03T23:35:19+00:00<br \/>\n <\/header>\n<p>For a multistep form, planning involves structuring questions logically across steps, grouping similar questions, and minimizing the number of steps and the amount of required information for each step. Whatever makes each step focused and manageable is what should be aimed for.<\/p>\n<p>In this tutorial, we will create a multistep form for a job application. Here are the details we are going to be requesting from the applicant at each step:<\/p>\n<ul>\n<li><strong>Personal Information<\/strong><br \/>\nCollects applicant\u2019s name, email, and phone number.<\/li>\n<li><strong>Work Experience<\/strong><br \/>\nCollects the applicant\u2019s most recent company, job title, and years of experience.<\/li>\n<li><strong>Skills & Qualifications<\/strong><br \/>\nThe applicant lists their skills and selects their highest degree.<\/li>\n<li><strong>Review & Submit<\/strong><br \/>\nThis step is not going to collect any information. Instead, it provides an opportunity for the applicant to go back and review the information entered in the previous steps of the form before submitting it.<\/li>\n<\/ul>\n<p>You can think of structuring these questions as a digital way of getting to know somebody. You can\u2019t meet someone for the first time and ask them about their work experience without first asking for their name.<\/p>\n<p>Based on the steps we have above, this is what the body of our HTML with our form should look like. First, the main <code><form><\/code> element:<\/p>\n<pre><code class=\"language-html\"><form id=\"jobApplicationForm\">\n <!-- Step 1: Personal Information -->\n <!-- Step 2: Work Experience -->\n <!-- Step 3: Skills & Qualifications -->\n <!-- Step 4: Review & Submit -->\n<\/form>\n<\/code><\/pre>\n<p><strong>Step 1<\/strong> is for filling in personal information, like the applicant\u2019s name, email address, and phone number:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\"><form id=\"jobApplicationForm\">\n <!-- Step 1: Personal Information -->\n <fieldset class=\"step\" id=\"step-1\">\n <legend id=\"step1Label\">Step 1: Personal Information<\/legend>\n <label for=\"name\">Full Name<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" required \/>\n <label for=\"email\">Email Address<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" required \/>\n <label for=\"phone\">Phone Number<\/label>\n <input type=\"tel\" id=\"phone\" name=\"phone\" required \/>\n <\/fieldset>\n\n <!-- Step 2: Work Experience -->\n <!-- Step 3: Skills & Qualifications -->\n <!-- Step 4: Review & Submit -->\n<\/form>\n<\/code><\/pre>\n<\/div>\n<p>Once the applicant completes the first step, we\u2019ll navigate them to <strong>Step 2<\/strong>, focusing on their work experience so that we can collect information like their most recent company, job title, and years of experience. We\u2019ll tack on a new <code><fieldset><\/code> with those inputs:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\"><form id=\"jobApplicationForm\">\n <!-- Step 1: Personal Information -->\n\n <!-- Step 2: Work Experience -->\n <fieldset class=\"step\" id=\"step-2\" hidden>\n <legend id=\"step2Label\">Step 2: Work Experience<\/legend>\n <label for=\"company\">Most Recent Company<\/label>\n <input type=\"text\" id=\"company\" name=\"company\" required \/>\n <label for=\"jobTitle\">Job Title<\/label>\n <input type=\"text\" id=\"jobTitle\" name=\"jobTitle\" required \/>\n <label for=\"yearsExperience\">Years of Experience<\/label>\n <input\n type=\"number\"\n id=\"yearsExperience\"\n name=\"yearsExperience\"\n min=\"0\"\n required\n \/>\n <\/fieldset>\n\n <!-- Step 3: Skills & Qualifications -->\n <!-- Step 4: Review & Submit -->\n<\/form>\n<\/code><\/pre>\n<\/div>\n<p><strong>Step 3<\/strong> is all about the applicant listing their skills and qualifications for the job they\u2019re applying for:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\"><form id=\"jobApplicationForm\">\n <!-- Step 1: Personal Information -->\n <!-- Step 2: Work Experience -->\n\n <!-- Step 3: Skills & Qualifications -->\n <fieldset class=\"step\" id=\"step-3\" hidden>\n <legend id=\"step3Label\">Step 3: Skills & Qualifications<\/legend>\n <label for=\"skills\">Skill(s)<\/label>\n <textarea id=\"skills\" name=\"skills\" rows=\"4\" required><\/textarea>\n <label for=\"highestDegree\">Degree Obtained (Highest)<\/label>\n <select id=\"highestDegree\" name=\"highestDegree\" required>\n <option value=\"\">Select Degree<\/option>\n <option value=\"highschool\">High School Diploma<\/option>\n <option value=\"bachelor\">Bachelor's Degree<\/option>\n <option value=\"master\">Master's Degree<\/option>\n <option value=\"phd\">Ph.D.<\/option>\n <\/select>\n <\/fieldset>\n <!-- Step 4: Review & Submit -->\n <fieldset class=\"step\" id=\"step-4\" hidden>\n <legend id=\"step4Label\">Step 4: Review & Submit<\/legend>\n <p>Review your information before submitting the application.<\/p>\n <button type=\"submit\">Submit Application<\/button>\n <\/fieldset>\n<\/form>\n<\/code><\/pre>\n<\/div>\n<p>And, finally, we\u2019ll allow the applicant to review their information before submitting it:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\"><form id=\"jobApplicationForm\">\n <!-- Step 1: Personal Information -->\n <!-- Step 2: Work Experience -->\n <!-- Step 3: Skills & Qualifications -->\n\n <!-- Step 4: Review & Submit -->\n <fieldset class=\"step\" id=\"step-4\" hidden>\n <legend id=\"step4Label\">Step 4: Review & Submit<\/legend>\n <p>Review your information before submitting the application.<\/p>\n <button type=\"submit\">Submit Application<\/button>\n <\/fieldset>\n<\/form>\n<\/code><\/pre>\n<\/div>\n<p><strong>Notice<\/strong>: We\u2019ve added a <code>hidden<\/code> attribute to every <code>fieldset<\/code> element but the first one. This ensures that the user sees only the first step. Once they are done with the first step, they can proceed to fill out their work experience on the second step by clicking a navigational button. We\u2019ll add this button later on.<\/p>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"https:\/\/www.smashingconf.com\/online-workshops\/\">Smashing Workshops<\/a><\/strong> on <strong>front-end, design & UX<\/strong>, with practical takeaways, live sessions, <strong>video recordings<\/strong> and a friendly Q&A. With Brad Frost, St\u00e9ph Walter and <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\">so many others<\/a>.<\/p>\n<p><a data-instant href=\"smashing-workshops\" class=\"btn btn--green btn--large\">Jump to the workshops \u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"smashing-workshops\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img decoding=\"async\" loading=\"lazy\" class=\"feature-panel-image-img lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Feature Panel\" width=\"257\" height=\"355\" data-src=\"\/images\/smashing-cat\/cat-scubadiving-panel.svg\"><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"adding-styles\">Adding Styles<\/h2>\n<p>To keep things focused, we\u2019re not going to be emphasizing the styles in this tutorial. What we\u2019ll do to keep things simple is leverage the <a href=\"https:\/\/simplecss.org\">Simple.css style framework<\/a> to get the form in good shape for the rest of the tutorial.<\/p>\n<p>If you\u2019re following along, we can include Simple\u2019s styles in the document <code><head><\/code>:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\"><link rel=\"stylesheet\" href=\"https:\/\/cdn.simplecss.org\/simple.min.css\" \/>\n<\/code><\/pre>\n<\/div>\n<p>And from there, go ahead and create a <code>style.css<\/code> file with the following styles that I\u2019ve folded up.<\/p>\n<pre><code class=\"language-css\"><details>\n <summary>View CSS<\/summary>\n body {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n main {\n padding: 0 30px;\n }\n h1 {\n font-size: 1.8rem;\n text-align: center;\n }\n .stepper {\n display: flex;\n justify-content: flex-end;\n padding-right: 10px;\n }\n form {\n box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);\n padding: 12px;\n }\n input,\n textarea,\n select {\n outline: none;\n }\n input:valid,\n textarea:valid,\n select:valid,\n input:focus:valid,\n textarea:focus:valid,\n select:focus:valid {\n border-color: green;\n }\n input:focus:invalid,\n textarea:focus:invalid,\n select:focus:invalid {\n border: 1px solid red;\n }\n<\/details>\n<\/code><\/pre>\n<h2 id=\"form-navigation-and-validation\">Form Navigation And Validation<\/h2>\n<p>An easy way to ruin the user experience for a multi-step form is to wait until the user gets to the last step in the form before letting them know of any error they made along the way. Each step of the form should be validated for errors before moving on to the next step, and descriptive error messages should be displayed to enable users to understand what is wrong and how to fix it.<\/p>\n<p>Now, the only part of our form that is visible is the first step. To complete the form, users need to be able to navigate to the other steps. We are going to use several buttons to pull this off. The first step is going to have a <kbd>Next<\/kbd> button. The second and third steps are going to have both a <kbd>Previous<\/kbd> and a <kbd>Next<\/kbd> button, and the fourth step is going to have a <kbd>Previous<\/kbd> and a <kbd>Submit<\/kbd> button.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-html\"><form id=\"jobApplicationForm\">\n <!-- Step 1: Personal Information -->\n <fieldset>\n <!-- ... -->\n <button type=\"button\" class=\"next\" onclick=\"nextStep()\">Next<\/button>\n <\/fieldset>\n\n <!-- Step 2: Work Experience -->\n <fieldset>\n <!-- ... -->\n <button type=\"button\" class=\"previous\" onclick=\"previousStep()\">Previous<\/button>\n <button type=\"button\" class=\"next\" onclick=\"nextStep()\">Next<\/button>\n <\/fieldset>\n\n <!-- Step 3: Skills & Qualifications -->\n <fieldset>\n <!-- ... -->\n <button type=\"button\" class=\"previous\" onclick=\"previousStep()\">Previous<\/button>\n <button type=\"button\" class=\"next\" onclick=\"nextStep()\">Next<\/button>\n <\/fieldset>\n\n <!-- Step 4: Review & Submit -->\n <fieldset>\n <!-- ... -->\n <button type=\"button\" class=\"previous\" onclick=\"previousStep()\">Previous<\/button>\n <button type=\"submit\">Submit Application<\/button>\n <\/fieldset>\n<\/form>\n<\/code><\/pre>\n<\/div>\n<p><strong>Notice<\/strong>: We\u2019ve added <code>onclick<\/code> attributes to the <kbd>Previous<\/kbd> and <kbd>Next<\/kbd> buttons to link them to their respective JavaScript functions: <code>previousStep()<\/code> and <code>nextStep()<\/code>.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h3 id=\"the-next-button\">The \u201cNext\u201d Button<\/h3>\n<p>The <code>nextStep()<\/code> function is linked to the Next button. Whenever the user clicks the Next button, the <code>nextStep()<\/code> function will first check to ensure that all the fields for whatever step the user is on have been filled out correctly before moving on to the next step. If the fields haven\u2019t been filled correctly, it displays some error messages, letting the user know that they\u2019ve done something wrong and informing them what to do to make the errors go away.<\/p>\n<p>Before we go into the implementation of the <code>nextStep<\/code> function, there are certain variables we need to define because they will be needed in the function. First, we need the input fields from the DOM so we can run checks on them to make sure they are valid.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\">\/\/ Step 1 fields\nconst name = document.getElementById(\"name\");\nconst email = document.getElementById(\"email\");\nconst phone = document.getElementById(\"phone\");\n\n\/\/ Step 2 fields\nconst company = document.getElementById(\"company\");\nconst jobTitle = document.getElementById(\"jobTitle\");\nconst yearsExperience = document.getElementById(\"yearsExperience\");\n\n\/\/ Step 3 fields\nconst skills = document.getElementById(\"skills\");\nconst highestDegree = document.getElementById(\"highestDegree\");\n<\/code><\/pre>\n<\/div>\n<p>Then, we\u2019re going to need an array to store our error messages.<\/p>\n<pre><code class=\"language-javascript\">let errorMsgs = [];\n<\/code><\/pre>\n<p>Also, we would need an element in the DOM where we can insert those error messages after they\u2019ve been generated. This element should be placed in the HTML just below the last <code>fieldset<\/code> closing tag:<\/p>\n<pre><code class=\"language-html\"><div id=\"errorMessages\" style=\"color: rgb(253, 67, 67)\"><\/div>\n<\/code><\/pre>\n<p>Add the above <code>div<\/code> to the JavaScript code using the following line:<\/p>\n<pre><code class=\"language-javascript\">const errorMessagesDiv = document.getElementById(\"errorMessages\");\n<\/code><\/pre>\n<p>And finally, we need a variable to keep track of the current step.<\/p>\n<p><code class=\"language-javascript\">let currentStep = 1;<br \/>\n<\/code><\/p>\n<p>Now that we have all our variables in place, here\u2019s the implementation of the <code>nextstep()<\/code> function:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\">function nextStep() {\n errorMsgs = [];\n errorMessagesDiv.innerText = \"\";\n\n switch (currentStep) {\n case 1:\n addValidationErrors(name, email, phone);\n validateStep(errorMsgs);\n break;\n\n case 2:\n addValidationErrors(company, jobTitle, yearsExperience);\n validateStep(errorMsgs);\n break;\n\n case 3:\n addValidationErrors(skills, highestDegree);\n validateStep(errorMsgs);\n break;\n }\n}\n<\/code><\/pre>\n<\/div>\n<p>The moment the <kbd>Next<\/kbd> button is pressed, our code first checks which step the user is currently on, and based on this information, it validates the data for that specific step by calling the <code>addValidationErrors()<\/code> function. If there are errors, we display them. Then, the form calls the <code>validateStep()<\/code> function to verify that there are no errors before moving on to the next step. If there are errors, it prevents the user from going on to the next step.<\/p>\n<p>Whenever the <code>nextStep()<\/code> function runs, the error messages are cleared first to avoid appending errors from a different step to existing errors or re-adding existing error messages when the <code>addValidationErrors<\/code> function runs. The <code>addValidationErrors<\/code> function is called for each step using the fields for that step as arguments.<\/p>\n<p>Here\u2019s how the <code>addValidationErrors<\/code> function is implemented:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\">function addValidationErrors(fieldOne, fieldTwo, fieldThree = undefined) {\n if (!fieldOne.checkValidity()) {\n const label = document.querySelector(`label[for=\"${fieldOne.id}\"]`);\n errorMsgs.push(`Please Enter A Valid ${label.textContent}`);\n }\n\n if (!fieldTwo.checkValidity()) {\n const label = document.querySelector(`label[for=\"${fieldTwo.id}\"]`);\n errorMsgs.push(`Please Enter A Valid ${label.textContent}`);\n }\n\n if (fieldThree && !fieldThree.checkValidity()) {\n const label = document.querySelector(`label[for=\"${fieldThree.id}\"]`);\n errorMsgs.push(`Please Enter A Valid ${label.textContent}`);\n }\n\n if (errorMsgs.length > 0) {\n errorMessagesDiv.innerText = errorMsgs.join(\"n\");\n }\n}\n<\/code><\/pre>\n<\/div>\n<p>This is how the <code>validateStep()<\/code> function is defined:<\/p>\n<pre><code class=\"language-javascript\">function validateStep(errorMsgs) {\n if (errorMsgs.length === 0) {\n showStep(currentStep + 1);\n }\n}\n<\/code><\/pre>\n<p>The <code>validateStep()<\/code> function checks for errors. If there are none, it proceeds to the next step with the help of the <code>showStep()<\/code> function.<\/p>\n<pre><code class=\"language-javascript\">function showStep(step) {\n steps.forEach((el, index) => {\n el.hidden = index + 1 !== step;\n });\n currentStep = step;\n}\n<\/code><\/pre>\n<p>The <code>showStep()<\/code> function requires the four fieldsets in the DOM. Add the following line to the top of the JavaScript code to make the fieldsets available:<\/p>\n<pre><code class=\"language-javascript\">const steps = document.querySelectorAll(\".step\");\n<\/code><\/pre>\n<p>What the <code>showStep()<\/code> function does is to go through all the <code>fieldsets<\/code> in our form and hide whatever <code>fieldset<\/code> is not equal to the one we\u2019re navigating to. Then, it updates the <code>currentStep<\/code> variable to be equal to the step we\u2019re navigating to.<\/p>\n<h3 id=\"the-previous-button\">The \u201cPrevious\u201d Button<\/h3>\n<p>The <code>previousStep()<\/code> function is linked to the <kbd>Previous<\/kbd> button. Whenever the previous button is clicked, similarly to the <code>nextStep<\/code> function, the error messages are also cleared from the page, and navigation is also handled by the <code>showStep<\/code> function.<\/p>\n<pre><code class=\"language-javascript\">function previousStep() {\n errorMessagesDiv.innerText = \"\";\n showStep(currentStep - 1);\n}\n<\/code><\/pre>\n<p>Whenever the <code>showStep()<\/code> function is called with \u201c<code>currentStep - 1<\/code>\u201d as an argument (as in this case), we go back to the previous step, while moving to the next step happens by calling the <code>showStep()<\/code> function with \u201c<code>currentStep + 1<\/code>” as an argument (as in the case of the <code>validateStep()<\/code> function).<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"improving-user-experience-with-visual-cues\">Improving User Experience With Visual Cues<\/h2>\n<p>One other way of improving the user experience for a multi-step form, is by integrating visual cues, things that will give users feedback on the process they are on. These things can include a progress indicator or a stepper to help the user know the exact step they are on.<\/p>\n<h3 id=\"integrating-a-stepper\">Integrating A Stepper<\/h3>\n<p>To integrate a stepper into our form (sort of like <a href=\"https:\/\/m1.material.io\/components\/steppers.html#\">this one<\/a> from Material Design), the first thing we need to do is add it to the HTML just below the opening <code><form><\/code> tag.<\/p>\n<pre><code class=\"language-html\"><form id=\"jobApplicationForm\">\n <div class=\"stepper\">\n <span><span class=\"currentStep\">1<\/span>\/4<\/span>\n <\/div>\n <!-- ... -->\n<\/form>\n<\/code><\/pre>\n<p>Next, we need to query the part of the stepper that will represent the current step. This is the span tag with the class name of <code>currentStep<\/code>.<\/p>\n<pre><code class=\"language-javascript\">const currentStepDiv = document.querySelector(\".currentStep\");\n<\/code><\/pre>\n<p>Now, we need to update the stepper value whenever the previous or next buttons are clicked. To do this, we need to update the <code>showStep()<\/code> function by appending the following line to it:<\/p>\n<pre><code class=\"language-javascript\">currentStepDiv.innerText = currentStep;\n<\/code><\/pre>\n<p>This line is added to the <code>showStep()<\/code> function because the <code>showStep()<\/code> function is responsible for navigating between steps and updating the <code>currentStep<\/code> variable. So, whenever the <code>currentStep<\/code> variable is updated, the currentStepDiv should also be updated to reflect that change.<\/p>\n<h3 id=\"storing-and-retrieving-user-data\">Storing And Retrieving User Data<\/h3>\n<p>One major way we can improve the form\u2019s user experience is by storing user data in the browser. Multistep forms are usually long and require users to enter a lot of information about themselves. Imagine a user filling out 95% of a form, then accidentally hitting the <kbd>F5<\/kbd> button on their keyboard and losing all their progress. That would be a really bad experience for the user.<\/p>\n<p>Using <code>localStorage<\/code>, we can store user information as soon as it is entered and retrieve it as soon as the DOM content is loaded, so users can always continue filling out their forms from wherever they left off. To add this feature to our forms, we can begin by saving the user\u2019s information as soon as it is typed. This can be achieved using the <code>input<\/code> event.<\/p>\n<p>Before adding the <code>input<\/code> event listener, get the form element from the DOM:<\/p>\n<pre><code class=\"language-javascript\">const form = document.getElementById(\"jobApplicationForm\");\n<\/code><\/pre>\n<p>Now we can add the <code>input<\/code> event listener:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\">\/\/ Save data on each input event\nform.addEventListener(\"input\", () => {\n const formData = {\n name: document.getElementById(\"name\").value,\n email: document.getElementById(\"email\").value,\n phone: document.getElementById(\"phone\").value,\n company: document.getElementById(\"company\").value,\n jobTitle: document.getElementById(\"jobTitle\").value,\n yearsExperience: document.getElementById(\"yearsExperience\").value,\n skills: document.getElementById(\"skills\").value,\n highestDegree: document.getElementById(\"highestDegree\").value,\n };\n localStorage.setItem(\"formData\", JSON.stringify(formData));\n});\n<\/code><\/pre>\n<\/div>\n<p>Next, we need to add some code to help us retrieve the user data once the DOM content is loaded.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-javascript\">window.addEventListener(\"DOMContentLoaded\", () => {\n const savedData = JSON.parse(localStorage.getItem(\"formData\"));\n if (savedData) {\n document.getElementById(\"name\").value = savedData.name || \"\";\n document.getElementById(\"email\").value = savedData.email || \"\";\n document.getElementById(\"phone\").value = savedData.phone || \"\";\n document.getElementById(\"company\").value = savedData.company || \"\";\n document.getElementById(\"jobTitle\").value = savedData.jobTitle || \"\";\n document.getElementById(\"yearsExperience\").value = savedData.yearsExperience || \"\";\n document.getElementById(\"skills\").value = savedData.skills || \"\";\n document.getElementById(\"highestDegree\").value = savedData.highestDegree || \"\";\n }\n});\n<\/code><\/pre>\n<\/div>\n<p>Lastly, it is good practice to remove data from <code>localStorage<\/code> as soon as it is no longer needed:<\/p>\n<pre><code class=\"language-javascript\">\/\/ Clear data on form submit\nform.addEventListener('submit', () => {\n \/\/ Clear localStorage once the form is submitted\n localStorage.removeItem('formData');\n}); \n<\/code><\/pre>\n<h3 id=\"adding-the-current-step-value-to-localstorage\">Adding The Current Step Value To <code>localStorage<\/code><\/h3>\n<p>If the user accidentally closes their browser, they should be able to return to wherever they left off. This means that the current step value also has to be saved in <code>localStorage<\/code>.<\/p>\n<p>To save this value, append the following line to the <code>showStep()<\/code> function:<\/p>\n<pre><code class=\"language-javascript\">localStorage.setItem(\"storedStep\", currentStep);\n<\/code><\/pre>\n<p>Now we can retrieve the current step value and return users to wherever they left off whenever the DOM content loads. Add the following code to the <code>DOMContentLoaded<\/code> handler to do so:<\/p>\n<pre><code class=\"language-javascript\">const storedStep = localStorage.getItem(\"storedStep\");\n\nif (storedStep) {\n const storedStepInt = parseInt(storedStep);\n steps.forEach((el, index) => {\n el.hidden = index + 1 !== storedStepInt;\n });\n currentStep = storedStepInt;\n currentStepDiv.innerText = currentStep;\n }\n<\/code><\/pre>\n<p>Also, do not forget to clear the current step value from <code>localStorage<\/code> when the form is submitted.<\/p>\n<pre><code class=\"language-javascript\">localStorage.removeItem(\"storedStep\");\n<\/code><\/pre>\n<p>The above line should be added to the submit handler.<\/p>\n<h2 id=\"wrapping-up\">Wrapping Up<\/h2>\n<p>Creating multi-step forms can help improve user experience for complex data entry. By carefully planning out steps, implementing form validation at each step, and temporarily storing user data in the browser, you make it easier for users to complete long forms.<\/p>\n<p>For the full implementation of this multi-step form, you can access the complete code on <a href=\"https:\/\/github.com\/jimavictor\/multistep-form\">GitHub<\/a>.<\/p>\n<div class=\"signature\">\n <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\"><br \/>\n <span>(gg, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Creating An Effective Multistep Form For Better User Experience Creating An Effective Multistep Form For Better User Experience Amejimaobari Ollornwi 2024-12-03T10:00:00+00:00 2024-12-03T23:35:19+00:00 For a multistep form, planning involves structuring questions logically across steps, grouping similar questions, and minimizing the number of steps and the amount of required information for each step. Whatever makes each step…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-1809","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/1809","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/comments?post=1809"}],"version-history":[{"count":1,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/1809\/revisions"}],"predecessor-version":[{"id":1810,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/1809\/revisions\/1810"}],"wp:attachment":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/media?parent=1809"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/categories?post=1809"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/tags?post=1809"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}