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: 

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.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Snippet

<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>
Made in Webflow