Gift card picker

A mock of the shop's own branded gift card that updates as you pick $25 / $50 / $100 / Other, add a name and choose text or email. The button says "Buy a $50 gift card".

Give a visit

On a preview, label this block "Gift cards on your live site" and point the form at their real gift-card provider (Square, Fresha, GHL) later. The terms line must be theirs.

How to use it

Size

2.2 KB gzipped own code (JS 1.0 KB + CSS 1.2 KB; 5.2 KB raw)

Dependency

none (vanilla + native APIs)

Tag

Showcase

Best for

Salons, spas, med spa, barbers, restaurants, cafes, bakeries, detailers

What it does

A plain GET form (works without JS) with native radios styled as chips. JS updates the card: the amount glides in (transform/opacity), "For Sam" appears as you type, the custom amount field shows only when Other is picked, and the submit label carries the amount. The card is drawn in CSS from the brand tokens (band colour, accent disc, fine line texture).

When to use

Mobbin upgrade #7: shows the owner new revenue on the preview.

November-December and Mother's Day: move it up the page.

Don't

Take payment on a preview: point it at their real provider when live.

Promise terms they don't offer ("never expires" is California law for most cards, but check).

Use gradient text or a fake bank-card look.

Reduced motion, no JS, accessibility

Reduced motion: the amount swaps without the glide; chips change colour instantly.

No JS: the form still submits amount/custom/to/send.

Native radio groups in fieldsets with legends; visible focus rings; the card mock is aria-hidden (the form says it all).

Copy-ready snippet

<!-- Gift card picker (WBL Code Library) -->
<!-- in <head>: -->
<script>document.documentElement.classList.add('wbl-js')</script>
<link rel="stylesheet" href="/wbl/gift-card/module.css">
<script src="/wbl/gift-card/module.js" defer></script>

<!-- markup: -->
<form class="wbl-gc" data-wbl="gift-card" action="https://example.com/gift-cards" method="get">
  <div class="wbl-gc-card" aria-hidden="true">
    <span class="wbl-gc-brand">Juniper<small>HAIR STUDIO · SUNSET BLVD</small></span>
    <span class="wbl-gc-amt"><span data-gc-amt>$50</span></span>
    <span class="wbl-gc-to" data-gc-to data-default="A gift for you">A gift for you</span>
  </div>
  <div>
    <fieldset><legend>Amount</legend>
      <div class="wbl-gc-chips">
        <label><input type="radio" name="amount" value="25"><span>$25</span></label>
        <label><input type="radio" name="amount" value="50" checked><span>$50</span></label>
        <label><input type="radio" name="amount" value="100"><span>$100</span></label>
        <label><input type="radio" name="amount" value="150"><span>$150</span></label>
        <label><input type="radio" name="amount" value="custom"><span>Other</span></label>
      </div>
      <label class="wbl-gc-custom"><span class="wbl-gc-lbl">Other amount ($10–$500)</span><input type="number" name="custom" min="10" max="500" step="5" inputmode="numeric" placeholder="75"></label>
    </fieldset>
    <label><span class="wbl-gc-lbl">Who is it for?</span><input type="text" name="to" maxlength="24" autocomplete="off" placeholder="Their first name"></label>
    <fieldset style="margin-top:16px"><legend>Send it by</legend>
      <div class="wbl-gc-chips">
        <label><input type="radio" name="send" value="text" checked><span>Text</span></label>
        <label><input type="radio" name="send" value="email"><span>Email</span></label>
        <label><input type="radio" name="send" value="print"><span>Print it</span></label>
      </div>
    </fieldset>
    <button class="wbl-gc-buy" type="submit" data-gc-buy>Buy a $50 gift card</button>
    <p class="wbl-gc-fine">Never expires. Good for any service or product at the studio.</p>
  </div>
</form>