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
Source: https://wickydesign.com/javascript-trick-to-save-form-data/
JavaScript Session Storage Code:
<script>
// 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));
});
</script>
JavaScript Go Back Code:
<button onclick="goBack()">Go Back</button>
<script>
function goBack() {
window.history.back();
}
</script>
