webdevpuneet.com

Related Snippets

221 in Forms category
1–6 of 60

Quill Rich Text Editor with Custom Toolbar and Character Limit

CodeMirror JSON Editor with Validation Gutter

CodeMirror Code Editor with Line Numbers, Folding and Themes

Marked + DOMPurify Live Markdown Preview

FilePond Image Upload with Preview and Reorder

Cropper.js Aspect-Ratio Presets for Social Posts

Back in Stock Notify Me Form — Free Email Capture Widget (HTML/CSS/JS)

Back in Stock Notify Me Form · Forms · Plain HTML, CSS & JS · Live preview

CategoryForms
TagsForms & Validation

Copy & paste

Source Code

<div class="bis-card">
  <div class="bis-product">
    <div class="bis-swatch">&#128266;</div>
    <div>
      <h3>Aria Wireless Headphones</h3>
      <span class="bis-oos-tag">Out of stock</span>
    </div>
  </div>

  <div class="bis-form" id="bisForm">
    <p class="bis-copy">Get notified the moment this is back in stock.</p>
    <form id="bisNotifyForm" novalidate>
      <div class="bis-field">
        <input type="email" id="bisEmail" placeholder="[email protected]" autocomplete="email" />
        <button type="submit">Notify me</button>
      </div>
      <p class="bis-error" id="bisError" hidden>Enter a valid email address.</p>
    </form>
  </div>

  <div class="bis-success" id="bisSuccess" hidden>
    <div class="bis-success-icon">&#10003;</div>
    <p class="bis-success-title">You're on the list</p>
    <p class="bis-success-copy">We'll email <b id="bisSuccessEmail"></b> the moment it's back.</p>
    <button type="button" class="bis-edit-link" id="bisEdit">Wrong email? Edit</button>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Inline email validation
A shape-check regex runs on submit and re-checks live once an error has shown.
Self-clearing error
The error message and red outline disappear the moment the address becomes valid.
Confirmation echoes the email
The success state repeats the submitted address so typos are caught immediately.
Edit-and-retry path
A dedicated link returns to the form with the prior value pre-filled and selected.
Three clean states
Form, error, and success states never overlap or show simultaneously.
No page reload
preventDefault keeps the whole flow inline within the card.
Out-of-stock context
A product header with a clear "Out of stock" tag frames the form's purpose.
Framework-agnostic core
Three simple states and one validator port directly to any component model.

About this UI Snippet

Back in Stock Notify Me Form — Capture Demand Without Losing the Sale

Screenshot of the Back in Stock Notify Me Form snippet rendered live

An out-of-stock page is a moment of lost intent — the shopper wanted to buy, and a plain "sold out" message sends them away for good. A "notify me when available" form turns that lost sale into a captured lead, but only if the form is trustworthy: it needs to validate the email before submitting, confirm clearly that the request went through, and let the shopper fix a typo without starting over. This snippet builds that complete three-state flow in plain HTML, CSS, and vanilla JavaScript.

Inline validation before submission

The form validates on submit with a simple email-shape regex, and — this is the detail that matters — once an invalid attempt has shown an error, the input re-validates on every keystroke so the error clears itself the moment the address becomes valid, rather than requiring a second submit click to discover the error is gone. No network request or backend is simulated; validation is purely client-side shape-checking, which is exactly what should happen before you ever hit an API.

A success state that repeats the email back

After a valid submit, the form swaps for a confirmation view that explicitly echoes the submitted address — "We'll email [email protected] the moment it's back" — rather than a generic "Thanks, you're signed up." Repeating the value back is what lets a shopper immediately notice if they made a typo, instead of finding out weeks later when the notification never arrives.

An edit path back, not a dead end

Right below the confirmation, an "Wrong email? Edit" link returns to the form with the previously entered address still filled in and selected, ready to be corrected and resubmitted. This is a small but important piece of forgiving form design — a mistake shouldn't require abandoning the whole flow and starting from a blank field.

Where it fits

Pair it with a product card or product quick view for the surrounding product context, a waitlist signup for a similar pre-launch capture pattern, or a promo-code-input for the same inline-validation-plus-confirmation approach applied to a different field.

Customizing it

Swap the regex for a stricter validator, add a debounced "check availability" call to confirm the product is genuinely still out of stock before showing the form, or extend the success state with a secondary CTA to browse similar in-stock products.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSAn out-of-stock product card renders with a Notify me form.
  2. 2
    Submit with a bad emailAn inline error appears and the input outlines in red.
  3. 3
    Start typing a valid addressThe error clears automatically as soon as it's valid.
  4. 4
    Submit a valid emailThe form swaps for a success state that echoes the address back.
  5. 5
    Click "Wrong email? Edit"You return to the form with your previous entry pre-filled and selected.
  6. 6
    Wire up the backendReplace the local success-state swap with a real API call in the submit handler.

Real-world uses

Common Use Cases

Out-of-stock product pages
Capture demand on any sold-out item, turning a lost sale into a lead with a validated Notify me email form.
Limited drops and restock campaigns
Pair with a product quick view so shoppers can request a restock alert without leaving the listing.
Pre-launch waitlists
Adapt the same validate, confirm and edit flow for early access, or compare with a standalone waitlist signup.
Variant-specific restocks
Use per size or colour variant on a product card, so a shopper is told about exactly the option they wanted.
Update signups and seller alerts
Reuse for newsletter updates or third-party marketplace inventory alerts, where the confirmation echoes the address and offers an edit link.
Related: Calculator
See the Calculator for a related forms pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

On submit, the value is trimmed and tested against a basic email-shape regex ([email protected]). If it fails, the input gets an invalid outline and an inline error shows. If it passes, the form immediately swaps to the success state — there's no simulated network delay since this snippet handles only client-side shape validation.

Once an invalid submission has shown the error, an input listener re-checks the value on every keystroke and removes the error and invalid styling as soon as the address becomes valid — so the shopper isn't stuck staring at a stale error message after they've already fixed it, and doesn't need to click submit again just to clear it.

Echoing the exact address back ("We'll email [email protected]...") is what lets a shopper catch a typo immediately, while they're still on the page, instead of discovering weeks later that the restock notification never arrived because of a mistyped domain.

Clicking it hides the success view and re-shows the form, then focuses and selects the email input's existing text — so the shopper can either overwrite the whole thing or fix a small typo, without needing to re-type an address that was already mostly correct.

Track two booleans in state — hasError and isSubmitted (or a single status enum with 'form' | 'error' | 'success' values) — and conditionally render the three views. The isValidEmail() regex function and the submit handler's logic port over unchanged; only the DOM hidden-attribute toggles become conditional rendering.