webdevpuneet.com

Related Snippets

57 in Pricing category
26–31 of 57

Free Trial Signup Card

Plan Change Preview (Upgrade/Downgrade)

Custom Quote Request Form

Bundle Savings Card

Limited-Time Discount Banner

Feature Table with Explainer Tooltips

Free Trial Signup Card — Free HTML CSS JS Snippet, No Credit Card

Free Trial Signup Card · Pricing · Plain HTML, CSS & JS · Live preview

CategoryPricing
TagsSVGAuthenticationLanding Page

Copy & paste

Source Code

<div class="ftc-wrap">
  <div class="ftc-card" id="ftcCard">
    <span class="ftc-badge">No credit card required</span>
    <h2 class="ftc-title">Start your free trial</h2>
    <p class="ftc-sub">Full access to every feature for <strong>14 days</strong>. No charge today, no charge ever unless you choose to subscribe.</p>

    <form class="ftc-form" id="ftcForm" novalidate>
      <label class="ftc-label" for="ftcEmail">Work email</label>
      <div class="ftc-field">
        <input class="ftc-input" type="email" id="ftcEmail" placeholder="[email protected]" autocomplete="email" />
        <svg class="ftc-check" width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </div>
      <p class="ftc-error" id="ftcError">Enter a valid email address.</p>

      <button class="ftc-submit" type="submit">Start free trial</button>
      <p class="ftc-fineprint">By continuing you agree to the Terms. We'll email you 3 days before your trial ends.</p>
    </form>

    <div class="ftc-success" id="ftcSuccess" hidden>
      <div class="ftc-success-icon">
        <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </div>
      <h3 class="ftc-success-title">You're in — trial started</h3>
      <p class="ftc-success-text">We sent a confirmation to <strong id="ftcSuccessEmail"></strong>.</p>
      <ul class="ftc-timeline">
        <li><span class="ftc-dot ftc-dot-now"></span><div><strong>Today</strong><p>Full access unlocked. No card on file, no charge.</p></div></li>
        <li><span class="ftc-dot"></span><div><strong>Day 11</strong><p>Reminder email sent, 3 days before your trial ends.</p></div></li>
        <li><span class="ftc-dot"></span><div><strong>Day 14</strong><p>Trial ends automatically. Nothing is billed — add a plan any time to keep your data.</p></div></li>
      </ul>
      <button class="ftc-reset" id="ftcReset" type="button">Use a different email</button>
    </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), 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

No-card badge up front
The reassurance is the first thing a visitor reads, not fine print.
Live regex validation
Checks on every keystroke, not just on blur or submit.
Submit-time re-validation
Guarantees the success state is only reached with a plausible email.
Animated valid/invalid states
A fading checkmark and a height-animated inline error.
Explicit end-of-trial state
States exactly what happens and that nothing is billed.
Three-step timeline
Today, the reminder, and the automatic end are each spelled out.
Reset to try again
A dedicated control returns to the form without a page reload.
Zero dependencies
Pure HTML, CSS, and vanilla JS — no library or CDN needed.

About this UI Snippet

Free Trial Signup Card — Inline Validation, "No Card Required," and a Clear End-of-Trial State

Screenshot of the Free Trial Signup Card snippet rendered live

The single biggest source of friction on a SaaS signup form isn't the email field — it's the anxiety that filling it out will lead to an unexpected charge. This snippet builds a free-trial signup card that removes that anxiety in three concrete ways: an explicit "No credit card required" badge above the fold, real inline validation on the email field so mistakes surface before submission rather than after, and a submitted state that states the exact trial length and precisely what happens on the day it ends.

Inline validation that reacts as you type

The email input listens on both input and blur, running a real regex check (isValidEmail) rather than relying solely on the browser's built-in type="email" validation, which varies in strictness across browsers and gives no visual feedback of its own. A valid email toggles .is-valid, which fades in a small checkmark inside the field and turns the border green; an invalid one toggles .is-invalid and reveals an inline error message with a smooth height transition rather than a jarring layout jump. Critically, the field stays neutral (`no state class`) while empty, so a new visitor isn't greeted with a red error before they've typed anything.

Submitting is gated, not just decorative

The submit handler re-validates on submit regardless of what the live validation already showed, refusing to proceed and re-focusing the field on an invalid value. This matters because a user can paste an invalid address or the live listener can be bypassed in edge cases (autofill, browser extensions) — validating again at the point of submission is the only way to guarantee the "success" state is only ever reached with a plausible email.

A submitted state that answers the two questions users actually have

Once submitted, the card swaps to a confirmation view built around a three-step timeline: what happened today (full access unlocked, no card on file), what happens on day 11 (a reminder email, stated explicitly rather than left as a surprise), and what happens on day 14 (the trial ends automatically with no charge, and upgrading is something the user chooses rather than something that happens to them). This answers the two questions every trial signup implicitly raises — "will I be charged?" and "will I be warned before anything changes?" — directly in the UI instead of burying the answer in a terms-of-service link.

Why "no credit card required" belongs in the layout, not just the copy

Plenty of trial forms bury the no-card promise in fine print while still visually implying a payment step is coming (a padlock icon, a "secure checkout" phrase). This card puts the badge in the first thing a visitor reads, styled distinctly from the rest of the copy, so the reassurance lands before any friction does — the same principle behind money-back guarantee badges on checkout pages.

Customizing it

Swap the 14-day window and reminder timing for your own trial length, wire the submit handler to your real signup endpoint instead of the local demo state, and pair it with a trial countdown once the account exists to keep reinforcing the same "no surprise charge" promise throughout the trial.

Step by step

How to Use

  1. 1
    Type an email addressThe field validates live on every keystroke and on blur, showing a green check or a red inline error.
  2. 2
    Submit with a valid emailThe form re-validates on submit and swaps to the confirmation state only if the address is valid.
  3. 3
    Read the timelineThe confirmation view states today, the day-11 reminder, and the day-14 automatic trial end with no charge.
  4. 4
    Use a different emailThe reset button clears the form and returns to the signup state.
  5. 5
    Wire it to your backendReplace the local success state in the submit handler with your real signup API call.
  6. 6
    Adjust the trial windowChange the 14-day and day-11 references in the HTML timeline to match your product.

Real-world uses

Common Use Cases

SaaS trial signups
Reduce anxiety before the main conversion by putting a no-card badge first, so the reassurance is read before any fine print.
Freemium upgrade paths
Pair with a pricing card below the form, using live regex validation on every keystroke rather than only on blur or submit.
Landing page hero forms
Offer a focused alternative to a long multi-field form, with a fading checkmark and a height-animated inline error for valid and invalid states.
Post-trial reminders
Reinforce the message with a trial countdown, and make the submitted state spell out the trial length and what happens when it ends.
Email capture experiments
A/B test badge placement and wording, with submit-time re-validation guaranteeing the success state only appears for a plausible email address.
Related: Plan Comparison with Differences Toggle
See the Plan Comparison with Differences Toggle for a related pricing pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Validating on input gives immediate feedback as the visitor types, so a typo is caught while it is still fresh in their mind rather than after they have moved on and clicked submit. Blur validation catches the case of pasting a value and tabbing away without triggering further keystrokes. Submit-time validation is still kept as a final gate, since live validation alone could theoretically be bypassed by autofill or browser extensions.

The two biggest trust gaps in a trial signup are not knowing whether a card will be charged and not knowing when or how the trial ends. Putting "No credit card required" above the fold and then spelling out today, the reminder day, and the automatic end date in a visible timeline answers both questions directly in the UI, rather than requiring the visitor to trust a terms-of-service link they likely will not read.

No — it is a self-contained front-end demo. The submit handler validates the email and swaps to a local confirmation state to demonstrate the interaction. In production, replace that local state transition with a real fetch or form POST to your signup endpoint, and only show the confirmation state once that request succeeds.

The 14-day trial and day-11 reminder are plain text in the HTML timeline (and referenced in the intro copy), not computed values — update those strings directly to match your product's actual trial window and reminder schedule.

Move emailInput.value and the valid/invalid booleans into component state, call your validation regex on each input change, and conditionally render either the form or the success timeline based on a submitted flag. The CSS classes and transitions port over unchanged.