Wedding Template Template
A wedding one-pager with one job — getting guests to RSVP — built as a stationery suite on champagne and card stock, with a reply card that writes itself in typewriter text and posts itself in an envelope on submit.
About This Template
A complete one-page wedding site whose every section funnels guests toward one act: the reply. No script lettering, no wall of stock photography — the page is a stationery suite, a champagne envelope lining as the ground, near-white card stock for the invitation plate and the reply card, espresso ink and one antique gold in wax-seal territory. Photography is held to a single black-and-white print of the couple, laid over the corner of the invitation plate with a pencil-note caption, ready to be swapped for your own. It looks designed and full on first open, and three more complete palettes — powder blue, blush, sage — ship in the stylesheet as a one-attribute swap; the print's baked monochrome grade sits with all of them.
The signature is the reply card that writes itself. The RSVP form sits beside a styled reply card, and as a guest answers each question — names, accepting or declining, a choice of three mains, dietary notes, a song request — the card fills in live, line by line, in typewriter text. On submit the card folds into an envelope, takes a stamp and a postmark, and posts off the page, followed by a plain confirmation.
Everything else is deliberately quiet: a letter-spaced reveal on the names, a timeline of the day whose spine draws as it is read, travel notes, three suggested hotels as place cards, a short Q&A and a modest gifts note. Swap the names, date, venue and menu, point the form at Formspree or any endpoint, and deploy it as static files.
What's Included
- Complete deployable one-pager: invitation-plate hero, timeline of the day, travel and stay, Q&A and gifts, RSVP, footer
- Signature reply card that mirrors the form live, typing each changed answer in character by character — never retyping the whole card
- On submit the card folds into an envelope, takes a stamp and a postmark, and posts off the page before a plain confirmation
- The form is a real, working plain form: point its action at Formspree, Netlify Forms or any endpoint and it submits with or without JavaScript
- Formal centered invitation plate with double-rule frame, letter-spaced engraved caps, a reply-by chip and a button straight to the RSVP
- Timeline of the day with a spine that draws down the page as it is read, times set in typewriter mono
- One photograph by design: a black-and-white print of the couple, mounted and captioned, its baked monochrome grade at home in every palette — the rest is art-directed CSS and SVG stationery (card, envelope, stamp, postmark, botanical rule, line-art barn)
- Declining folds the supper, dietary and song questions away and disables them, so a decline never posts a main course; accepting brings them back, answers intact
- Reply card stays in view while the form is filled, sticky beside it on desktop and compact above it on phones
- Four ready palettes — champagne gold, powder blue, blush, sage — swapped with one attribute, every pair measured to WCAG AA; the RGB-triple token block makes a custom reskin a four-value edit
- Lenis smooth scrolling wired in and fully optional
- Accessible: the decorative card is aria-hidden, the confirmation lands in an aria-live region and takes focus, validation is native, and reduced motion gets instant card updates with a static confirmation swap
Perfect For
- Wedding websites whose main job is collecting RSVPs
- Civil partnerships, vow renewals and anniversary parties
- Any invitation-and-reply event: christenings, milestone birthdays, retirement parties
- Save-the-date pages that will grow into the full invitation
- Learning how to mirror a form into a live, animated preview with GSAP
How It Works
Structure
One script initialises each section inside a single gsap.context with gsap.matchMedia, keyed only on reduced motion so exactly one branch runs on every device. Every querySelector is guarded, so any section — the timeline, the hotels, the whole RSVP — can be deleted and the rest keeps working. Reveal start states are double-gated behind a has-js class and the motion media query, so a blocked CDN or a reduced-motion preference both leave a complete static page.
The reply card
The form is the real interface and the card is an aria-hidden mirror. Each input names the card line it feeds through a data attribute; radios update on change and text inputs wait 350ms for a pause. Only the changed line is retyped: a small tween counts an index up the new string's length and slices it into the line's textContent, with a blinking caret while it runs, so the card reads as being typed rather than re-rendered. Declining folds the accept-only questions (supper, dietary, song) away in a height tween and disables their inputs, so a decline never posts a main course; accepting unfolds them with their answers intact.
Posting the envelope
Submit builds one timeline: the card scales down, the envelope rises to meet it, the card slips inside, the flap sweeps closed, the stamp thumps on with a little jolt of the envelope, the postmark cancels it, and it posts off the page. The envelope's CSS centring is restated as the same xPercent/yPercent GSAP tweens around, so no transform property fights another. If the form's action points at a real endpoint, the reply is POSTed first and the send only plays once it has actually sent; a failure re-enables the button and shows a written error instead.
Accessibility and reduced motion
The fold never hides the outcome: the form column is made inert during the animation, the confirmation lands in an aria-live region and receives focus, and validation is the browser's own. Under reduced motion the card updates instantly with no type-on, and submitting swaps straight to the confirmation — no fold, no envelope.
Without JavaScript
The page renders complete: every section readable, the card sitting as static printed stationery with empty ruled lines, and the form a plain working form that submits to whatever its action attribute points at. The envelope never appears at all. The README documents wiring the form to Formspree, Netlify Forms or a mailto fallback, and where to change the names, date, venue and menu.
:root.
Try them in the preview above.