May 11, 2023

Save Form Values while navigating between Pages with Elementor

Play Video

What is the tutorial about?

In this tutorial, brought to you by Wicky Design, you will learn how to save form values while navigating between different pages using Elementor Pro. This solution ensures that users won’t lose their submitted form data in case they made a spelling mistake or needed to go back and update that data. By leveraging JavaScript and session storage, you can enhance your users’ experience on your WordPress site.

Use Cases for this Tutorial

  • Registration forms where users might want to go back and change their input
  • Multi-step forms that require users to review their entries before submitting
  • Online surveys where users may want to revise their answers
  • E-commerce checkout forms to enable customers to review or update their details

Required Code


JavaScript Session Storage Code:


  // Retrieve form data from sessionStorage if it exists

  if (sessionStorage.getItem('formData')) {

    const formData = JSON.parse(sessionStorage.getItem('formData'));

    document.getElementById('form-field-firstname').value = formData.firstname;

    document.getElementById('form-field-lastname').value = formData.lastname;


  // Save form data to sessionStorage when user navigates away from the page

  window.addEventListener('beforeunload', () => {

    const formData = {

      firstname: document.getElementById('form-field-firstname').value,

      lastname: document.getElementById('form-field-lastname').value,


    sessionStorage.setItem('formData', JSON.stringify(formData));




JavaScript Go Back Code:

<button onclick="goBack()">Go Back</button>


function goBack() {




Required Resources

Elementor Logo
Free Options
Credit to Wicky Design
Immerse yourself in the world of web design with Barbara and Mark, a talented husband and wife duo based in Philadelphia, PA. Their channel focuses on everything from web design and Elementor to WordPress and growing an online business. With their unique blend of experience and expertise, they offer invaluable tips, tutorials, and insights for both beginners and experts.
Save Form Values while navigating between Pages with Elementor
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.