Saving forms | adactio

A very clever (and well explained) method for helping users complete forms. Particularly with modern pop-up forms, I'd say at least once a month I'm part way through typing something and accidentally shift my mouse somewhere that causes the form to close, losing everything I had written 😡 Jeremy's trick of storing the current form (well, textarea, but it should be easy to expand) content in localStorage is a great enhancement that would solve those frustrations. Here's the gist (see what I need 😄):

  1. Use an eventListener to track when a user starts typing into a form/textarea;
  2. When that fires, set off a new eventListener to track the browser's unload event using beforeUnload (Jeremy explains why that method well);
  3. If that second listener fires, save the content of the form into localStorage against a key for the page URL/slug (you can use JSON to store multiple values in one key/value pair);
  4. If the form is submitted without issue or firing the eventListener, clear the localStorage key;
  5. Now, with that setup, you can add some initial logic that checks localStorage on page load for a key that matches the current URL and, if found, parse the JSON and populate the form.

Et voila! Neat 👍

Explore Other Notes

⬅ Newer

Practical Jamstack: intro to 11ty

I "missed" the meetup (it was 2am local time 😂) but glad to catch up, a really nice introduction to 11ty/Eleventy as a build tool. The more I hear about the flexibility that 11ty gives you in […]

Older âž¡

We like what we choose

We like what we choose. Not the other way around. [...] If you had grown up somewhere else or some time else, there’s little doubt that you’d prefer something else. The things we […]
  • A very clever (and well explained) method for helping users complete forms. Particularly with modern pop-up forms, I'd say at least once a month I'm part way through typing something and […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.