Basic Example
Saves and restores field values for the first form inside
<form-saver>.
Basic Usage
Type into this form and refresh the page to see values restored.
<form-saver>
<form action="/contact" method="post">
<label>
Name
<input name="name" autocomplete="name" />
</label>
<label>
Email
<input name="email" type="email" autocomplete="email" />
</label>
<label>
Message
<textarea name="message"></textarea>
</label>
<button type="submit">Send</button>
</form>
</form-saver>Retaining specific fields
The retain attribute takes a space-separated
list of field names (or IDs as a fallback) that should
survive a successful form submission — everything
else is wiped. This is useful for contact forms where you
want to pre-populate the sender's name and email address on
their next visit, but not their message.
Using the retain attribute
After you submit this form, reload the page. The Name and Email fields will be restored; Message will be blank.
<form-saver retain="name email">
<form action="/contact" method="post">
<label>
Name
<input name="name" autocomplete="name" />
</label>
<label>
Email
<input name="email" type="email" autocomplete="email" />
</label>
<label>
Message
<textarea name="message"></textarea>
</label>
<button type="submit">Send</button>
</form>
</form-saver>Letting users control long-term retention
Sometimes you should let the user decide whether
their details are kept. The retain-choice
attribute injects an accessible opt-in checkbox into the
form. If the user leaves it unchecked (the default), the
retained fields are cleared on submit just like everything
else. You can further customise the experience with
retain-choice-label and
retain-choice-container.
Simple opt-in: retain-choice
Add retain-choice alongside
retain and <form-saver>
will automatically inject a labelled checkbox directly
before the submit button. The default label is
"Store my contact information for later".
<form-saver
retain="name email"
retain-choice
>
<form action="/contact" method="post">
<label>
Name
<input name="name" autocomplete="name" />
</label>
<label>
Email
<input name="email" type="email" autocomplete="email" />
</label>
<label>
Message
<textarea name="message"></textarea>
</label>
<button type="submit">Send</button>
</form>
</form-saver>
Custom label:
retain-choice-label
Use retain-choice-label to provide label
text that better fits your form's context or brand
voice.
<form-saver
retain="name email"
retain-choice
retain-choice-label="Remember my details next time"
>
<form action="/contact" method="post">
...
<button type="submit">Send</button>
</form>
</form-saver>
Custom placement:
retain-choice-container
By default the checkbox is inserted immediately before
the submit button. If your form layout requires it
elsewhere — say, inside a dedicated actions bar or a
privacy notice area — point
retain-choice-container at a CSS selector
that matches the container element you want. The
checkbox wrapper will be appended inside that
element.
<form-saver
retain="name email"
retain-choice
retain-choice-label="Remember my details next time"
retain-choice-container=".form-footer"
>
<form action="/contact" method="post">
<label>
Name
<input name="name" autocomplete="name" />
</label>
<label>
Email
<input name="email" type="email" autocomplete="email" />
</label>
<label>
Message
<textarea name="message"></textarea>
</label>
<div class="form-footer">
<button type="submit">Send</button>
</div>
</form>
</form-saver>API Reference
For complete documentation of attributes, events, and browser support, see the README.