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

Newsletter Signup Card — Animated Success State HTML CSS JS

Newsletter Signup Card · Forms · Plain HTML, CSS & JS · Live preview

CategoryForms
TagsSVGCSS AnimationAccessibilityAuthenticationLanding Page

Copy & paste

Source Code

<div class="page">
  <div class="card" id="card">
    <div class="state-idle" id="stateIdle">
      <div class="icon-wrap">
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
      </div>
      <h2 class="title">Stay in the loop</h2>
      <p class="desc">Get weekly dev tips, UI snippets, and early access to new tools — no spam, ever.</p>
      <div class="badges">
        <span class="badge">📦 175+ snippets</span>
        <span class="badge">⚡ Weekly tips</span>
        <span class="badge">🔒 No spam</span>
      </div>
      <form class="form" id="form" novalidate>
        <div class="input-wrap" id="inputWrap">
          <svg class="input-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
          <input id="emailInput" type="email" class="input" placeholder="[email protected]" autocomplete="email" aria-label="Email address" required />
        </div>
        <p class="error-msg" id="errorMsg" role="alert" aria-live="assertive"></p>
        <button type="submit" class="btn" id="submitBtn">
          <span class="btn-text">Subscribe</span>
          <svg class="btn-arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>
          <span class="btn-spinner" aria-hidden="true"></span>
        </button>
      </form>
      <p class="social-count"><strong>12,847</strong> developers already subscribed</p>
    </div>

    <div class="state-success" id="stateSuccess" hidden>
      <div class="success-ring">
        <svg class="success-check" viewBox="0 0 52 52" fill="none">
          <circle class="check-circle" cx="26" cy="26" r="24" stroke="currentColor" stroke-width="2.5"/>
          <path class="check-path" d="M14 26 L22 34 L38 18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <h2 class="success-title">You're subscribed!</h2>
      <p class="success-desc">Check <strong id="confirmedEmail">your inbox</strong> for a confirmation. Welcome aboard! 🎉</p>
      <div class="success-perks">
        <div class="perk"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>Weekly dev tips delivered</div>
        <div class="perk"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>Early access to new UI snippets</div>
        <div class="perk"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>Unsubscribe anytime, one click</div>
      </div>
    </div>
  </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

Client-side email validation
/^[^s@]+@[^s@]+.[^s@]+$/ catches obvious format errors. role="alert" + aria-live="assertive" announces errors to screen readers immediately.
Loading button with spinner
.loading class fades out button text and shows a centred CSS spinner, keeping button dimensions fixed to prevent layout shift during the async delay.
Animated SVG checkmark
Circle and check path use stroke-dashoffset keyframe animations that draw in sequence — circle first (0.6s), then checkmark (0.4s, delayed 0.65s).
Two-state card (idle / success)
Both states live in the DOM with the hidden attribute toggled on submit. The success state uses animation: fadeIn to slide up, avoiding layout jump.
Inline error + red border
Errors display in a <p role="alert"> below the input and add .error-state class (red border). The input listener clears errors on every keystroke — immediate feedback.
Email echo in success state
The confirmed email is injected into the success message (confirmedEmail.textContent = val) — a small but high-trust detail that confirms the correct address was saved.
Social proof counter
"12,847 developers already subscribed" below the button uses established-community social proof — one of the highest-converting newsletter conversion elements.
Feature badge pills
Three emoji badge pills ("📦 175+ snippets", "⚡ Weekly tips", "🔒 No spam") address the three main objections before the user reaches the input.

About this UI Snippet

Newsletter Signup Card — Form Validation, Animated SVG Check & State Machine Pattern

Screenshot of the Newsletter Signup Card snippet rendered live

A newsletter signup form is one of the highest-value conversion elements on any website, yet most implementations are a bare <input> and <button> with no success feedback. This snippet builds a polished email signup card: client-side email validation with inline error messages, a loading spinner during the async call, and an animated SVG checkmark success state that slides in after submission — with three confirmation perks and the subscriber's email shown back to them.

The success state is where most implementations fall short. Users who submit a form with no feedback don't know whether it worked. This snippet solves that with a two-state card: an idle state (form) and a success state (animated confirmation). The transition between states uses CSS animation — not a page reload.

Email validation with inline error messages

The form uses novalidate to disable native browser validation, giving us full control over the error UI. The validateEmail function checks the value against /^[^s@]+@[^s@]+.[^s@]+$/ — a pragmatic regex that catches obvious format errors without the complexity of RFC 5322 full compliance (which rejects valid emails). Errors render in a role="alert" aria-live="assertive" paragraph below the input so screen readers announce them immediately. The error state adds a red border to the input via a class toggle.

Loading state with spinner

During the async submission, the button gets a .loading class that fades out the button text and arrow (opacity: 0) and fades in a centred CSS spinner. The spinner is an ::after-style border-radius element with a rotate(360deg) keyframe animation. The button is also disabled to prevent double-submission. This pattern — hiding text but keeping the button the same size — prevents layout shift during loading.

Animated SVG checkmark

The success state shows an SVG circle and checkmark path drawn with CSS stroke-dashoffset animation. The circle stroke is set to stroke-dasharray: 151 (its circumference) and stroke-dashoffset: 151 (fully hidden). A keyframe animation drives it to 0 — drawing the circle. The check path follows 200ms later with the same technique. This two-step sequence (circle then check) creates a satisfying "confirmation" feeling that flat success messages lack.

Two-state card pattern

The idle and success states are both in the DOM, one hidden with the hidden attribute. Submission hides the idle state and removes hidden from the success state. CSS animation: fadeIn .5s ease slides the success state up from 12px below. This is simpler and more reliable than injecting HTML on success, and it means the success state can be styled independently without JavaScript string templates. Pair with a toast notification for site-wide signup confirmation that appears on other pages after redirect.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA newsletter card appears with an email icon, headline, feature badges, email input, and subscribe button on a purple gradient background.
  2. 2
    Try submitting emptyClick Subscribe without an email — an inline error message appears below the input with a red border on the field. The error clears as you start typing.
  3. 3
    Try an invalid emailEnter "test" and submit — a validation error appears. Enter "[email protected]" and submit to proceed.
  4. 4
    Watch the loading stateA spinner appears inside the button for ~1.4 seconds (simulating an API call). The button disables to prevent double submission.
  5. 5
    See the success stateAn animated SVG circle draws itself, then a checkmark path draws inside it. The success card slides up with the subscriber's email confirmed and three benefit perks.
  6. 6
    Connect your email APIReplace the await new Promise(r => setTimeout(r, 1400)) with your real API call (fetch('/api/subscribe', { method: 'POST', body: ... })). Show the success state in the then handler, or re-show the form with an error message if the call fails.

Real-world uses

Common Use Cases

Blog and content site email lists
The primary use case — capture returning visitors with a weekly newsletter signup. Position it in the footer, sidebar, or as a mid-article insert after the first few paragraphs.
SaaS waitlist and early access
"Be first to know when we launch" with the same two-state form. The success state confirms the user is on the list. Add a referral count for viral waitlist mechanics.
Product update announcements
Subscribe users to product changelogs, release notes, or feature announcements. The perks section can list specific content types to set expectations.
Event and webinar registration
Replace "newsletter" framing with "register for free webinar" and update the success state to include the event date and calendar link.
Developer tool documentation sites
Docs sites for libraries and APIs use newsletter signup to notify users of breaking changes, new versions, and security updates.
E-commerce promotional emails
"Get 10% off your first order" signup with the same form. The success state shows the discount code instead of the perks list.
Related: Restaurant Table Reservation Form
See the Restaurant Table Reservation Form for a related forms pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Replace the setTimeout with a fetch call to their API endpoint. For Mailchimp: fetch(https://us1.api.mailchimp.com/3.0/lists/{listId}/members, { method:'POST', headers:{Authorization:'apikey ${key}',...}, body: JSON.stringify({email_address:val,status:'subscribed'}) }). For ConvertKit: POST to https://api.convertkit.com/v3/forms/{formId}/subscribe with {api_key, email}.

Add a try/catch around the fetch. On error, re-enable the button, remove the .loading class, and call showError('This email is already subscribed.'). This keeps the user in the idle state with the error inline rather than losing their input.

Add <input type="text" placeholder="First name" /> above the email input. In JS, collect both values and include the name in the API call body. The validation step adds a check that the name field is non-empty.

Use useState for { email, error, loading, success }. The form onSubmit sets loading: true, awaits the API call, then sets success: true or error: 'message'. Conditionally render the idle or success JSX based on the success flag.