/leadform · form-screens playground
20 form-screens — forms as hero screens
Each form is its own composition: own background, layout, typography, effects. Not a flat stack of fields, but a real «screen as hero». Modal-dialog up to 800px, on mobile — bottom-sheet.
ready: 20/20 · all effects perf-safe (transform/opacity only) · leads fly to TG + email via Resend
01 · MINIMAL
Clean white
Centered, fine typography. Consulting / law / design agency.
02 · GLASS DARK
Glass + neon accent
Dark backdrop-blur, mint/violet glow, paper-bits drift. SaaS, fintech, Web3.
03 · SPLIT PHOTO
Photo + form editorial
Photo 50/50, cream form, serif, gold wave. Restaurant, spa, clinic.
04 · EDITORIAL SERIF
Big serif + marquee
Fullscreen serif heading with italic accent, marquee. Magazine, fashion, agency.
05 · BRUTALIST
Mono + offset shadow
Sharp edges, mono font, stamp arrow, bright yellow. Studio, tattoo, brutalist print.
06 · BOOKING CALENDAR
Calendar + time-slots
Live 14-day calendar + time-slots on the left, form on the right. Restaurant, clinic, barber.
07 · WAITLIST NEON
Stroke title + glow CTA
Stroke-outline heading, neon particles, rotating border. Indie game, NFT, pre-launch SaaS.
08 · SPA SAGE
Sage italic + quote
Sage green, serif italic, soft wave, reviewer quote. Wellness, yoga, retreat.
09 · AUCTION LUXE
Gold-on-dark · big bid
Stage light, golden dust, big bid input with min-bid validation. Auction, real estate, luxury.
10 · PLAYFUL KIDS
Pastel + confetti
Pastel blobs, bouncy button, BIG confetti (80 particles rainbow). Kids, education, playful.
11 · PRICING TIER
3 tiers + Get a quote
Slack tier cards with «Most popular» highlight + quote-request form. B2B SaaS, fintech, enterprise tooling.
12 · SPEAKER INQUIRY
Speaker photo-grid
6 speaker photo-cards with hover-zoom + booking inquiry form. Conference, speaking bureau.
13 · VILLA CALENDAR
Photo carousel + range calendar
Auto-rotating photos with dots-nav + range-pick check-in/check-out + booked dates. Premium real estate, vacation rental.
14 · PORTFOLIO CONTACT
Mosaic background + serif
9 photos 3×3 mosaic background + dark overlay + big italic serif heading. Photographer, designer.
15 · VENUE BOOKING
Hero photo + capacity stats
Big venue photo + 4 stats (capacity / area / 24-7 / PA) + booking form. Music venue, event hall.
16 · WEDDING INQUIRY
Blush palette + couples photo
Soft blush + italic «Your day in *Toscana*» + floating petals + date/guest fields. Wedding venue, planner.
17 · INVESTMENT FUND
AUM / IRR / Vintage + accredited
Gold-on-dark + 4 numbers (€2.4B AUM, 18.7% IRR) + accredited investor checkbox + min ticket €250k. Fund, platform.
18 · NEWSLETTER MAG
Issue cover + subscribe form
Magazine cover on the left (photo + headline + tagline) + serif «Read *deeper*» + 3-points list + subscribe. Newsletter, magazine.
19 · COWORKING TOUR
SVG floor-plan + tour form
Interactive SVG floor-plan (6 zones with hover) + perks pills + tour booking. Coworking, office space.
20 · DONATION
Progress bar + suggested €
Animated progress (68% raised) + 4 suggested €25/€50/€100/€250 + custom + donate. Charity, fundraising, NGO.
How it works
Under the hood — a single useLeadForm() engine (validation / submit / state). On top — 10 FS_*compositions. Each is its own TSX component with its own layout, background and effects. Endpoint configurable via /site-config.json, country-agnostic phone validation, honeypot, 152-FZ. Effects — perf-safe (only transform/opacity in keyframes).