Refillable-vanilla NPM

Take a Snapshot of a form, for better UX.

Introduction

A client filling up the form on your site, Left that window/tab for xyz reasons. When client re-opens that page, Seeing their half filled form is fully empty now. This workflow is normal but we can optimize this. To make better UX!

So, actually instead of client re-enters the past filled information, What if we,

Store that past half-filled form for specific user and store it!
Next time user came back to same page, we reteieve that stored form and suggest to accept his/her past filled field values.

Looks interesting? Let's move to the workflow.

Workflow

So the idea is to take a snapshot of form whenever user fill it, No matter if its fully filled or not. Its looks like we are having track of their changes just like google form. but google form uses cloud storage option. However, Not all of the application use that approach.

Google Form doesn't store progress if user is offline

To make this functionality available in offline mode, we are previously using localStorage API to store the form. But now in newer versions (>2.0.0) we are using IndexedDB API as it can also supports Blob storage which is perfect for image/file uploads storage.

Implementation

There are currently two packages for this implementation.

VanillaJS version (pure/native support)
ReactJS Specific

If your site is based on plain (html + css + js) templates, this is the package for you. However if you are using react for your platform, you can move to this alternative

With VanillaJS, its very easy to set up.

Include script with src.
pass form instance to its main Class, with configurations.

Enough talking, now code part!!

Live CodePen Demo
Usage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Refillable-Vanilla Demo</title>
</head>

<body>



    <form>
        <input type="text" name="username" id="username" placeholder="Username">
        <hr/>
        <input type="email" name="email" id="email" placeholder="Email">
        <hr/>

        <input type="file" name="profile_pic" id="profile_pic">
        <hr/>

        <span>Choose Your fav. OTT platform</span>
        <input type="radio" name="ott" value="Netflix" id="ott">
        <label for="ott">Netflix</label>
        <input type="radio" name="ott" value="Amazon Prime" id="ott2">
        <label for="ott2">Amazon Prime</label>

        <input type="radio" name="ott" value="Hotstar" id="ott3">
        <label for="ott3">Hotstar</label>

        <hr/>

        <p>select mobile brand</p>
        <select name="mobile_brand" id="mobile_brand" value="one_plus">
            <option value="apple">Apple</option>
            <option value="one_plus">One Plus</option>
        </select>
        <hr/>

        <input type="checkbox" name="agree_tnc" id="agree_tnc" ><label for="agree_tnc">Agree Terms & Conditions</label>
        <hr/>

        <input type="password" name="password" id="password" placeholder="Password">
        <hr/>
    </form>
    
    <button style="display: none;" id="acceptDraft">Accept</button>
    <button style="display: none;" id="discardDraft">Discard</button>

    <script src="https://cdn.jsdelivr.net/npm/refillable-vanilla@1.1.0/index.js"></script>
    <script>

        const acceptDraftButton = document.getElementById('acceptDraft');
        const discardDraftButton = document.getElementById('discardDraft');

        const my_refillable_form = new RefillableForm(document.querySelector('form'), {
            unique_key: 'signup',  // Defaults to window.location.pathname
            auto_fill_draft: true, // Disables and fill draft in form automatically (defaults to true)
            threshold: 50           // Save the form only after {threshold}% form is filled (defaults to 0)
        });

        acceptDraftButton.addEventListener("click", (e) => {my_refillable_form.accept_draft()})
        discardDraftButton.addEventListener("click", (e) => {my_refillable_form.discard_draft()})

        my_refillable_form.addEventListener("show", (e) => {

            // Currently Showing: Draft

            acceptDraftButton.style.display = ""
            discardDraftButton.style.display = ""

            console.log("Previously Uploaded File Loaded: ", my_refillable_form.drafted_files)

        })

        my_refillable_form.addEventListener("unshow", (e) => {

            // Closing to showing draft

            acceptDraftButton.style.display = "none"
            discardDraftButton.style.display = "none"

        })


    </script>
</body>
</html>