There are many ways in which a web form is made to auto-save and manually save; I'm wondering what would be the best practices to do so.

Form is a web application form, and I want to save user values for the purpose of tracking progress and not losing their work if they take a break or want to resume working on it later. I want them to also be able to click the save button manually. I want them to be able to click a "submit" button to mark it as submitted and asynchronously send it to the database, once all the saves have validated that the form is completed successfully.

Here are some of my concerns (some are technical and others are not):

  • How often should I auto-save the form? 30 seconds? A minute? More? Less? What determines the best interval to save?
  • Should I save onBlur of every form element, or should I do it onFocusOut at the form?
  • How do I save while user is still filling out a textArea without leaving the focus, yet? How do Gmail and StackExchange do it?
  • I've read that I could save the form locally, but when should I asynchronously submit it to the database as opposed to keep it local? What if the user leaves the locally saved form and it still hasn't been submitted to the database? What's the best failsafe for crashing?
  • When should I notify the user that the form is saved like when Gmail does it?
  • Is it bad practice to also include a save button in addition to having a auto-save feature?
  • Should anything change when filling out the form on mobile as opposed to desktop?
  • Is it possible to make the form 100% capable of not losing progress, or is the user bound to lose some data at some point?

Anything else I should be aware of, keep into consideration, or try to implement in order to make the experience more convenient for the user?

If there are any good sources other than Goodbye, Ctrl-S and What's the rationale behind Google's “no save” approach? for me to read on, please let me know.



Browse other questions tagged or ask your own question.