# Save Long Form Answers in the Browser

> Keeps what visitors type into a long form saved in their browser, so a reload, a crash or an accidental back click does not wipe out their answers. Cleared after submitting.

- Type: JavaScript
- Runs: Site-wide footer
- Category: [Forms](https://wpide.com/library/category/forms/)
- Tags: forms, autosave, ux
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/form-save-progress/

## Code

```javascript
(function () {
    var forms = document.querySelectorAll('form.wpide-save-progress, .wpide-save-progress form');
    if (!forms.length || !window.localStorage) {
        return;
    }

    forms.forEach(function (form, index) {
        var key = 'wpideForm:' + location.pathname + ':' + (form.id || index);
        var stored = {};
        try { stored = JSON.parse(localStorage.getItem(key) || '{}'); } catch (e) { stored = {}; }

        var fields = form.querySelectorAll('input:not([type="password"]):not([type="file"]):not([type="hidden"]):not([type="submit"]), textarea, select');

        fields.forEach(function (field) {
            if (!field.name || !(field.name in stored)) { return; }
            if (field.type === 'checkbox' || field.type === 'radio') {
                field.checked = stored[field.name].indexOf(field.value) !== -1;
            } else if (!field.value) {
                field.value = stored[field.name];
            }
        });

        var save = function () {
            var data = {};
            fields.forEach(function (field) {
                if (!field.name) { return; }
                if (field.type === 'checkbox' || field.type === 'radio') {
                    data[field.name] = data[field.name] || [];
                    if (field.checked) { data[field.name].push(field.value); }
                } else {
                    data[field.name] = field.value;
                }
            });
            try { localStorage.setItem(key, JSON.stringify(data)); } catch (e) {}
        };

        var timer;
        form.addEventListener('input', function () { clearTimeout(timer); timer = setTimeout(save, 400); });
        form.addEventListener('change', save);
        form.addEventListener('submit', function () { try { localStorage.removeItem(key); } catch (e) {} });
    });
})();
```

## Notes

Add the class wpide-save-progress to a form (most form builders have a CSS class setting); password, file and hidden fields are never stored.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Save Long Form Answers in the Browser" in its snippet library and add it in one click; or create a new JavaScript snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/