Webflow form: Save progress – Continue later

Design help Custom code
1

Hey Webflow community!

I have a question:

I have a project in the pipeline that has a page with a very long form (the users will need to write more than 1000 characters…).
Now I want to make sure that if they leave the site or close the tab before submitting the form, it will save all the inputs they have entered in the form so far.
When they go back to the form, the inputs should reappear in the form.

Any suggestions on how to solve this? Thanks very much!

2

You can save the whole state of the form inside sessionStorage on the beforeunload event, and reset the data back when page is freshly loaded

3

Hey @pietrofalco thanks for your reply!

I got it to work!! :partying_face:

How I did it:
I took your idea and changed it a little bit. Instead of using the beforeunload event, I used onkeyup, so that it saves the value every time you press a button on your keyboard when you’re typing inside an input field.

Working prototype:
https://btc-spielwiese.webflow.io/form-save-input-test
And here’s the code you have to enter before the </body> tag:

<script>

// WHAT DOES THE CODE DO?: Get value from localStorage and put it in the input field
// HOW TO EDIT CODE: 
//  1. duplicate one of the code-lines below and change the ID and the parameter of "getSavedValue"
//  2. Use the same name for the element's ID and the parameter of "getSavedValue"
$('#name')[0].value = getSavedValue("name");
$('#email')[0].value = getSavedValue("email");
$('#long-text')[0].value = getSavedValue("long-text");

// WHAT DOES THE CODE DO?: Save ID and value of inut field to localStorage
// HOW TO EDIT CODE: 
//  1. Copy the ID you added in the code above and paste it in the ID-array below
$('#name, #email, #long-text').change(function(n) {
let val = n.currentTarget.value;
let id = n.currentTarget.id;
localStorage.setItem(id, val);
});


// WHAT DOES THE CODE DO?: Get saved ID and value from localStorage
// NOTHING TO EDIT HERE..
function getSavedValue  (v){
if (!localStorage.getItem(v)) {
    return "";// You can change this to your defualt value. 
}
return localStorage.getItem(v);
}

</script>

EDIT: I changed .keyup() to .change() so that the value also gets stored when you copy/paste text with the mouse.

1 Like
4

Cool! but is better if you use the “input” event instead of the keyup, keyup doesn’t get trigger when you copy and paste values with only the mouse! And also input will trigger less times as well, better for slower cpus!

5

@pietrofalco Thanks for the tip. You’re totally right!

Instead of .input I used .change() since I wrote the script with jQuery.
I hope this is the right equivalent to .input…

Long story short, I changed .keyup() to .change() and it seems to work just fine :blush:

6

No idea, I don’t use jQuery, but from their doc, you can use .on(‘input’, callback) to do the same thing, change also gets fired for example on each keystroke on text inputs, the input event instead will get fired when the input loses the focus, so directly with the full data

7

I tested it in chrome and when using .change() it doesn’t fire on each keystroke… only after losing focus. So I guess it’s doing quite the same as .on(‘input’, …)

1 Like
8

My bad, it was the opposite: “The input event is fired every time the value of the element changes. This is unlike the change event, which only fires when the value is committed”
Better change than!

1 Like