A library to backup unsubmitted web forms powered by GUN

Usage no npm install needed!

<script type="module">
  import smixqseFormsaver from 'https://cdn.skypack.dev/@smixqse/formsaver';



A GUN-based library to enable backups of your users' unsubmitted forms.

FormSaver will enable your users to restore their current progress on any device by sharing a code (or a link).


Script tag method

Just add this script tag into your HTML:

<script src="https://cdn.jsdelivr.net/npm/@smixqse/formsaver/dist/formSaver.min.js"></script>

The main class will then be available at window.FormSaver.

NPM method

Install formsaver as a dependency:

npm install --save @smixqse/formsaver

Import it in your JS file:

import FormSaver from '@smixqse/formsaver';


Create a form, naming it and its inputs, in your HTML:

<form action="/" method="post" name="myForm">
        <label for="name">Type your name</label><br>
        <input type="text" name="name" id="name"><br>
        <label for="feeling">Are you feeling well?</label><br>
        <input type="radio" name="feeling" id="well" value="well">
        <label for="well">Yes</label><br>
        <input type="radio" name="feeling" id="not-well" value="not-well">
        <label for="not-well">No</label><br>
        <input type="submit" value="Submit">

Initialize FormSaver:

const fs = new FormSaver();

Every time the user changes input, call <FormSaver>.setBackup(), using the form's name or element as argument:

document.querySelectorAll(`form[name=myForm] input`).forEach(function (elem) {
    elem.addEventListener("input", async function (e) {
        var backupKey = await fs.setBackup("myForm");
        // or
        var backupKey = await fs.setBackup(document.querySelector(`form[name=myForm]`));
        // save the backupKey somewhere to access the saved form later

A backup key will be generated and can be accessed as the promise result.

When the user comes back later, request the backup key and submit it:

await fs.submitBackup(backupKey);

Then you can retrieve the saved data and apply it into the form:

await fs.getBackup(formElementOrName);

Saving data will continue to work. When the user has finished and submitted the form, discard the saved data:


Currently it works with:

  • text inputs
  • number inputs
  • radio inputs
  • select inputs
  • checkbox inputs
  • date and time inputs
  • email and phone inputs
  • color inputs

If you want to use it with other input types or you want to have more control, you can save and get raw data, then apply it into the form manually:

const rawData = await fs.getRawBackup();
const backupKey = await fs.setRawBackup(objectToSave);

Click here to see full docs - See NPM Package