Automatically saves and restores form data on a page. Written for Webflow.com custom code integration.

restore-form.js

<script>
(() => {
  const debounce = (fn) => {
      let timeout;
      let arg;
      const later = () => {
        timeout = null;
        fn(arg);
        arg = null;
      };
      return (_arg) => {
        arg = _arg;
        clearTimeout(timeout);
        timeout = setTimeout(later, 300);
      };
  };

  const save = debounce((event) => {
    const form = event.target.form;

    localStorage.setItem(
      `form-${form.name}`,
      JSON.stringify([...new FormData(form)])
    );
  });

  const clear = (event) => {
    localStorage.removeItem(`form-${event.target.name}`);
  };

  const restore = () => {
    [...document.querySelectorAll('form')].forEach(form => {
      const formStorage = localStorage.getItem(`form-${form.name}`)
      if (!formStorage) {
        return;
      }
      try {
        const data = JSON.parse(formStorage);
        data.forEach(([key, val]) => {
          if (val) {
            form.querySelector(`[name="${key}"]`).value = val;
          }
        });
      } catch(err) {
        console.error(err);
      }
    });
  };

  document.addEventListener('change', save);
  document.addEventListener('submit', clear);
  document.addEventListener('DOMContentLoaded', restore);
})();
</script>

Hey!
Can we add this to our Webflow sites?

Yup! Feel free to copy-paste it in. It should be pretty safe, but as with all custom code, no guarantees provided :D

oh, I’m using some ES6 features that require modern-ish browsers so if you support a bunch of versions of IE, for example, you’ll need to make some minor modifications.

Thanks mate. This worked flawlessly🥳 Though I have to change the checkbox from custom to default.