Display form data in the site builder

 

Add these scripts in a custom code block under the form on page 1.

Technically, you don't need all 3, but you can see in the code, the first one is adding the firstName, the second is adding the lastName and the third one is adding email to local storage.

<script> 
document.addEventListener("keyup", function(e){   
  const target = e.target
    if(target){
      var firstNameValue = document.querySelector('input[name ="data[firstName]"').value
      localStorage.setItem("firstName", firstNameValue);
    }
  }                           
);
</script>

<script> 
document.addEventListener("keyup", function(e){
    const target = e.target
    if(target){
      var lastNameValue = document.querySelector('input[name ="data[lastName]"').value
      localStorage.setItem("lastName", lastNameValue);
    }
  }
);
</script>

<script> 
document.addEventListener("keyup", function(e){
    const target = e.target
    if(target){      var emailValue = document.querySelector('input[type ="email"').value
      localStorage.setItem("email", emailValue);
    }
  }
);
</script>

 

Then add this script to Page 2: 

<script>   
// Retrieve the firstName from local storage   
var firstName = localStorage.getItem("firstName");   
var lastName = localStorage.getItem("lastName");   
var email = localStorage.getItem("email");   

// Check if firstName exists in local storage   
if (firstName) {
      // Load the firstName value into the element with ID "i5q9"
      document.getElementById("i5q9").innerHTML = 'Hi ' + firstName + ' ' + lastName + "<br><br>Thank You For Providing Your Email<br>" + email ;
    } else {
      // Display a message if there is no data in local storage
      document.getElementById("i5q9").innerHTML = "No data in local storage.";
    }
</script>

 

I want to focus specifically on the  "innerHTML" part of this code.

Just before innerHTML, you will see an id of a text element, you will need to make sure you grab the correct element id and change it out for the one you're using on your site.

 

Secondly, you will need to structure the "innerHTML ="

You need to use ' to wrap plain text, then you need to use " + " between plain text and merge fields.

E.g. 'Hello' + firstName + 'welcome to this test'; = HelloBobwelcome to this test

E.g. 'Hello ' + firstName + ', welcome to this test'; = Hello Bob, welcome to this test

See how either side of "firstName", I added a space to the plain text.

E.g. 'Hello ' instead of 'Hello' as we need a space between that plain text and the merge field which in this example is firstName.