Webflow Form Kit
Snippets to give your forms superpowers. Or, just mild enhancements. 🍋
With love from @forresto. 💙
Form Saver
Saves form data to localStorage on unload (refreshing, or closing the tab or window). Fills out the form when loading the page again.
Caveats:
- If you're have the form open in multiple windows or tabs, the last one closed will win.
- Don't ask for personal info when folks might be using a shared computer. Adding a "Reset" button might be good:
<input type="reset" class="w-button">
Add the snippet, and the values will be saved according to the "Form Settings > Form Name" ... make those unique, if you have more than one form in the page.
<script id="form-kit-form-saver">
// Form Kit's "Form Saver" snippet
// https://form-kit.webflow.io/
// Code by @forresto and friends
Webflow = window.Webflow || [];
Webflow.push(function () {
function makeFormSaver(formSelector) {
var $form = $(formSelector);
var localStorageKey = "FORM_KIT_SAVER_" + formSelector;
// Save form on leaving page
$(window).on("unload", function () {
var data = $form.serializeArray();
window.localStorage[localStorageKey] = JSON.stringify(data);
});
// Load saved form
if (localStorage[localStorageKey]) {
try {
var data = JSON.parse(localStorage[localStorageKey]);
} catch (e) {
console.warn('Parsing "form kit saver" data failed.');
return;
}
data.forEach(function (item) {
var name = item.name;
var value = item.value;
var $input = $(formSelector + ' [name="' + name + '"]');
if ($input.length === 0) {
return;
}
var type = $input.attr("type");
switch (type) {
case "checkbox": {
if (value === "on") {
$input.attr("checked", true);
}
break;
}
case "radio": {
if (value) {
$input.filter('[value="' + value + '"]').attr("checked", true);
}
break;
}
default: {
$input.val(value);
}
}
});
}
}
$("form[data-name]").each(function (i, el) {
var $form = $(el);
var selector = 'form[data-name="' + $form.attr("data-name") + '"]';
makeFormSaver(selector);
});
});
</script>