Wedding and Event Invitation Template

An invitation guests will actually open

Most wedding websites fail because they are slow, cluttered or hard to use on a phone. This template is a single, calm page: your names in an arch, a countdown, your story, the schedule for the day, directions and an RSVP form. Guests scroll once and know everything they need.

Edit in the right order

1. Names and date. Replace "Amara & Theo", the date and the venue in the hero, the header monogram and the footer.
2. Countdown. Change the data-date attribute on the clock element to your ceremony time. The numbers update every second.
3. Story. Edit the four timeline entries. Short and personal beats long and polished.
4. Schedule. Update the times and details. Include shuttle times, dress code and anything guests need to plan around.
5. Venue. Add the address, parking and accommodation notes, then paste your map embed into the placeholder.
6. Gallery. Replace the illustrated tiles with engagement photos, ideally portrait, compressed to WebP.

Collecting RSVPs

The form asks for name, email, attendance, number of guests, meal choice and notes. To receive replies in your inbox create a free Formspree form, then set the form action to your Formspree URL and remove the method and enctype attributes. A comment in the HTML marks the spot. Remember to say who to contact for plus-ones and dietary questions.

Colours and type

The sage, blush and gold palette is in the :root block of assets/style.css. The script style for names uses system cursive fonts, so nothing is downloaded. If you want a custom script font, add one web font and set it on the h1 and .h rules.

Etiquette and privacy

Send the link with your invitations, mention the reply-by date near the form and avoid publishing exact home addresses. If you want the page hidden from search, add a noindex robots meta tag to the head.

Accessibility, motion and licence

The template uses semantic landmarks, a skip link, visible focus styles and readable contrast. Motion is limited to gentle fade-ins and hover states, and it switches off for visitors whose device asks for reduced motion. There is no 3D, no WebGL and nothing to load from a CDN. Everything is free for personal and commercial use, and the brand names, people and prices are fictional, so replace them before launch. The README in the zip lists every file and the first edits to make.