Tidings — Free Wedding RSVP Website Template
Tidings is a wedding website template that puts guest logistics first. It is set in tomato, butter yellow, sage and ink, with chunky Bricolage Grotesque headings, hard-shadow cards and inline SVG illustrations instead of stock portraits. Guests can count down to the day, add it to their calendar, see what happens when, what to wear, where to park and how to get there by tram, bike or car. The RSVP finds an invitation by name from a small guest list, asks each person in the party for a yes or no, collects meals and a song request, and ends on a confirmation screen.
Key features
- Save-the-date hero with a live countdown that reads its target from a data attribute
- Add-to-calendar button that generates an .ics file in the browser, plus a Google Calendar link that works without JavaScript
- The plan for the day as an alternating timeline with a happening-now marker on the wedding day
- Essentials cards for where, when, what to wear, kids, parking and the rain plan, with a copy-address button
- Illustrated SVG map with a numbered legend and keyboard-accessible tabs for tram, bike, car and rideshare
- Three-step RSVP: find your invitation by name, choose attendance per guest, then meals, dietary notes and a song request
- RSVP progress indicator, per-step validation, focus management and a confirmation screen that summarises the reply
- RSVP falls back to a single plain form when JavaScript is off
- Details page with a weekend schedule, venue facts, hotel cards with copyable block codes, filterable local favourites and a gifts note
Best for
- Relaxed city, backyard and garden weddings
- Couples who want guests to RSVP per person with meal choices
- Weddings with out-of-town guests who need hotel codes and travel notes
- Developers who want a jQuery-free Bootstrap 5 wedding starter
At a glance
- Bootstrap 5.3.8 with vanilla JavaScript, no jQuery
- 3 pages: index.html, rsvp.html, details.html
- Inline SVG icons, illustrations and venue map; no icon fonts
- Front-end RSVP flow with a guest list in js/main.js and a confirmation screen
- Colours and fonts set as CSS custom properties in css/style.css
- Free for personal and commercial use; attribution optional but welcome. Full terms: uicookies.com/license
How to use it
Unzip the folder and open index.html in a browser. Change the names, dates, venue and copy in the HTML and replace the photos in img/ with your own. Colours and fonts are custom properties at the top of css/style.css. The countdown and calendar file read the data attributes on the hero, and the RSVP guest list and meal options are arrays at the top of js/main.js. The RSVP needs a form service or backend to receive replies. Upload the folder to any static host.
Frequently asked questions
Is Tidings free for commercial use?
Yes. You can use it for personal and commercial projects, including wedding sites you build for clients. Attribution is optional but always welcome. Full terms are at uicookies.com/license.
What is Tidings built with?
Bootstrap 5.3.8 with one vanilla JavaScript file and no jQuery or other libraries. Icons, illustrations and the map are inline SVG, and the fonts are Bricolage Grotesque and DM Sans from Google Fonts.
Which pages are included?
Three pages. index.html has the save-the-date hero, timeline, essentials, getting there, FAQ and RSVP call to action. rsvp.html is the three-step reply flow, and details.html has the weekend schedule, venue, hotel block, local favourites and gifts note.
Does the RSVP save replies?
No. It validates each step, shows a confirmation screen and stops there. Point the form at a form service or your own backend to receive replies; the field names are already set. Without JavaScript it works as one plain form.
How do I add my own guest list?
Edit the GUESTS array at the top of js/main.js. Each party has a label and a list of members, and members can be marked as a child or a plus-one. The search, per-guest attendance and kids’ meal options follow from that list.
