Free wedding planner website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: aubade.md, data: aubade.json

Wedding planner website template: first screen on a phone

About this wedding planner website template

Wedding planner website template: one free HTML file for a studio that plans garden weddings, with three priced packages, a four-season flower scroll, a timed wedding day, four wedding stories and an enquiry form. Orange colour fields on a pale grey ground carry the garden photography. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

At a glance, October 2026. One 108 KB index.html with its CSS and JavaScript inside, 13 sections, 23 Unsplash photos credited in CREDITS.md, Google Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

A planner who wants a wedding planner website, or a florist and event stylist comparing event planner websites, can use it as a base. The page answers what couples ask first: how far ahead to book, what each package costs, what a day looks like and what happens in the rain. A venue with seasonal packages can keep the same order, and so can any small studio with tiers.

Vibe coding with Claude Code, Cursor or Codex starts with facts only the studio has: package names, prices and lead times, the team, venues, real weddings, quotes and a reply time. The demo invents all of them, plus a Bath address and three journal posts. Swap the name, the logo SVG and the prices first. Keep the section ids, the listed classes and each --len number, and update --len when a name changes.

As a wedding planning website it fits a small studio that sells fixed packages and wants an editorial feel. A party or celebration business with a lineup and ticket passes is closer to the festival and event template. The weak spots: the journal links lead to pages that do not exist, and the enquiry form sends nothing. A studio that wants no code can use the 8B builder.

Good for:

Wedding planner or wedding coordinatorFlorist, event stylist or venue with seasonal packagesEvent, party or celebration planning studioAny small service studio that sells tiered packages with a warm, editorial look

Turn the wedding planner website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/wedding-planner-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/wedding-planner-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/wedding-planner-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/wedding-planner-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my studio: name, town and the area I cover, packages with prices and lead times, team, real weddings, couples' quotes, reply time, how people enquire>. Replace first the studio name, the logo SVG, the packages, the timed day, the weddings, the planners and the journal. Keep the section ids, the classes AGENTS.md lists, the --len numbers and one season field per slide. Ask me for missing facts and never invent prices, weddings, quotes or contacts.

In a terminal

npx degit 8bsite/wedding-planner-website-template my-site

Wedding planner website design and motion

Palette

#efefef page ground and the grounds of the packages, weddings, quotes and contact sections, the spring field#1c1c1c text, buttons, rules, the black day and journal sections, the winter field, one wedding card and one quote card#8c8c8c the handover and footer grounds, the summer field, one wedding card, the grey quote card#f0925c the opening field, the autumn field, the logo chip, button hover fills, question markers, hour times on black, one wedding card and the orange quote#ffffff text on black and grey, the planners and questions grounds, the handover labels, one wedding card and one quote card, the footer wordmark#5c5c5c secondary paragraphs and captions on light grounds#a3a3a3 secondary text on the black sections and in the menu overlay

Fonts

Google Sans: the only typeface, loaded as a variable font from weight 400 to 700 for every heading, label, paragraph and button, with an Arial based fallback

A four-column grid with wide side margins. The opening puts three facts on the left, a tall couple photo next, and the heading in the right half, all on one flat orange field. Later sections swap flat grounds: pale grey, white, mid grey and black. Each heading sits left with a short paragraph in the right half, and hairline rules open the package rows and the questions. The season words and the footer wordmark are sized by their character count.

Orange fills whole fields and also the button hover, the question markers and the hour times on the black day section. With reduced motion the scroll animations and smooth scrolling switch off and the seasons stack, but the header bar still hides on scroll down.

Every value of this wedding planner website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the wedding planner website page

Navigation
Top bar with the logo, a Check your date button and a dot-grid menu button; full-screen menu with ten links, email and phone
The header bar hides when you scroll down and returns when you scroll up, and the nine dots of the menu button shift on hover.
Two planners, eighteen weddings a year, and every one of them started before the sun was up.
Orange colour field with the h1, a booking button, a tall couple photo and three facts
On load the heading, paragraph, buttons and facts rise in turn and the photo settles from a slight zoom.
Three ways to plan a garden wedding
Three planning packages as rows with price, inclusions and timing
The heading rises line by line and a hairline above each package draws across as the row arrives.
Every wedding starts with a flower in season
Four colour fields in a horizontal track, one per season, with a flower photo and a giant season word
Pinned: the four season fields slide left as a track for three screen widths of scroll; from the second field on, each photo opens from a narrow strip to full width while the giant season word slides against the track.
Hand it over
A heap of ten task labels carried into an ordered list, beside what stays with the couple
Pinned on wide screens: ten task labels start scattered and tilted over the couple's half and are carried one by one into the list on the right; on phones each label slides in as it rises.
From first light to the last song
A wedding day hour by hour beside a sticky frame of eight photos that change with the hour
Each hour's time swells to display size while its row crosses the screen, and the sticky photo frame slides the previous photo up to uncover the next.
Weddings we have planned
Four weddings as a mosaic of colour cards and photos
In each pair the colour card and the photo start swapped and slide past each other into the mosaic as they rise.
Two planners, both on the day
Two portraits and short bios of the planners
The heading rises and each portrait is revealed in four stair steps.
In their words
Four couples' notes as colour cards that stack like a deck
The four quote cards stick at stepped offsets, and each covered card shrinks slightly as the next slides over it.
Questions couples ask first
Six questions in native <details> with hairline rules
The heading rises and a hairline draws across above each question.
Journal
Three journal notes with a photo, date, title and link, rising onto one line
On wide screens the three notes start at different heights and settle onto one line as the section crosses the screen, their photos easing out of a close crop; on phones each note rises on its own.
Tell us the date and the garden
An enquiry form beside the studio's email, phone, address and a gazebo photo
The heading rises and the gazebo photo is revealed in stair steps.
Studio
Wordmark, studio address, contact links and the copyright with the Design: 8B credit

Before you publish the wedding planner website site

Replace social preview image, favicon, email address, phone number, contact form (sends nothing yet) and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Check your date button in the top bar and Tell us your date button in the opening lead to #contact now; point them to your booking or enquiry page, or keep them pointing to the enquiry form.
Ask about full planning, Ask about partial planning and Ask about the day links in the planning section lead to #contact now; point them to the same enquiry form or a page for each package.
Read the note links under the three journal posts lead to relative addresses journal/sweet-peas-in-september, journal/a-rain-plan-is-not-a-marquee and journal/a-run-sheet-your-aunt-can-read, which do not exist in this file now; point them to your own blog post addresses, or remove the links and the journal section.
Instagram and Pinterest links in the footer lead to the home pages instagram.com and pinterest.com now; point them to your studio's profiles.
Send the enquiry button in the contact form lead to nothing is sent: the form has action="#contact" and a script shows the thank-you line now; point them to your form endpoint (Formspree, Netlify Forms) or your own handler.
With reduced motion the scroll scenes and Lenis are off and the seasons stack, but the bar still hides on scroll down and the menu dots move on hover.
The journal links point to pages that do not exist in this file.
The opening has no scroll motion, only the load-in, so the first screen is quieter than the sections below it; its four .opening__flood spans are the same orange as the ground and show nothing.

Questions about this wedding planner website template

Is this one of the free wedding website templates, and can I use it for client sites?

Yes. It is one index.html under the MIT licence, so you can use it for clients at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, there is no build step, and the photos are Unsplash images listed in CREDITS.md.

How do I give this wedding planner template to an AI agent?

Download index.html and AGENTS.md from the repository into an empty folder, open it in Claude Code, Cursor or Codex, and paste the prompt from this page. AGENTS.md tells the agent what to replace, what to keep and which facts to ask you for.

What must I keep when I edit it?

Keep every section id and the data-8b-section, data-8b-motion and data-8b-part attributes, the classes AGENTS.md lists for each animated section, the --len numbers and the quote card order. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.

Does the enquiry form send anything?

No. The script checks the required fields, clears the form and shows a thank-you line, and nothing leaves the page. Connect it to Formspree or Netlify Forms, or your own handler. The Check your date and Tell us your date buttons only jump to the form.

Can I use it for an event planner or a florist?

Yes, with new copy. The packages, the four seasons and the timed day work for any studio selling tiers around dates, such as an event planning template for parties. The wording is about weddings throughout, so an agent rewrites every section, not only the prices.

Can I get a site like this without editing code?

Yes, with 8B's AI website builder. You describe the site in a sentence and it designs a new one, not this template. Designing and restyling are free. Publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT through the 8B connector.

Not a wedding planner website? More free templates