HotelBookingWizard is a production-ready, premium multi-step hotel booking form (wizard) built specifically for Framer projects. It’s designed to live inside a regular Framer Form Stack and submit like a normal Framer form—while providing a modern, guided booking experience with validation, pricing logic, and a complete email-ready summary.
A client-side booking request flow (no payment, no external backend) that collects:
Stay dates (check-in / check-out) via an interactive calendar
Arrival time (optional)
Guests (adults, children), plus optional pet
Room selection based on availability + capacity rules
Contact + address details with validation
A final “Summary” review step and a thank-you success state
All values are sent through Framer’s native form submission using real inputs and hidden fields, so the Framer email includes everything reliably.
This component is meant to be placed inside a Framer Form / Form Stack:
Uses real form fields (<input>, <select>, <textarea>) and hidden inputs
Produces a complete set of hidden fields that Framer can inject into email templates
You can reference fields in Framer like {{check_in}}, {{room_name}}, or use the full formatted {{booking_summary_text}}
The wizard is split into 5 steps:
Stay
Click-to-select check-in/check-out in an inline calendar
Prevents selecting past dates
Automatically calculates nights
Validates that check-out is after check-in
Optional arrival time dropdown
Guests
Adult/children steppers with limits
Pet checkbox
Special requests textarea (optional)
Room
Shows only rooms that:
fit the guest count (adults + children)
allow children when children > 0 (room rule)
are available for the selected date range (per-room blocked date ranges)
match min/max nights rules (global + optional per-room overrides)
Includes a price overview once a room is selected
Contact
Required name, email, phone, street, postal code, city, country
Email + phone validation
“Accept terms” checkbox required to continue
Overview + Submit
Final review of stay, guests, room, contact info, and pricing
Submit CTA that triggers Framer form submission
Thank-you confirmation state after submit
Each room supports “unavailable ranges”:
Stored as { start: "YYYY-MM-DD", end: "YYYY-MM-DD" }
Ranges are treated as inclusive (start and end are blocked)
The booking range is treated as [check-in, check-out) (check-out day is not occupied)
Prevents selecting rooms that overlap with blocked periods
Each room can define:
Capacity (max total guests: adults + children)
childrenAllowed (block rooms that don’t allow children)
Amenities list (displayed as badges)
Price per night
Optional minNights / maxNights per room (overrides global stay length)
If the user changes dates or guest count and the selected room no longer matches, the component automatically clears the selection to prevent invalid submissions.
Pricing is calculated automatically based on:
pricePerNight × nights = subtotal
VAT applied to subtotal (configurable rate)
Optional city tax: fixed amount per adult per night
The component outputs:
nights
subtotal
VAT amount
city tax amount (if enabled)
total amount
Currency is formatted in EUR (de-DE) for the UI and summary text.
A key feature is booking_summary_text:
A pre-formatted, readable block of text intended to be pasted directly into your Framer email template
Includes stay dates, nights, guest count, arrival time, room choice, pricing breakdown, contact details, notes, and “payment on-site”
You can use only {{booking_summary_text}} in the email body for a clean, professional booking email.
The component generates hidden fields such as:
check_in, check_out, nights
adults, children, pet, arrival_time
room_id, room_name, room_price_per_night
subtotal, vat_amount, city_tax_amount, total
special_requests
customer_name, customer_email, customer_phone, customer_address
booking_summary_text
No extra Framer fields are required—these values come directly from the component.
Smooth step transitions using Framer Motion (AnimatePresence, spring transitions)
Clear step progress indicator (step count + progress bar)
Responsive layout: padding and spacing adapt to smaller widths
Premium “card” UI with clean hierarchy and pricing emphasis
Uses proper labels and input types
ARIA labels for interactive controls (calendar, steppers, navigation)
Keyboard-friendly buttons and focus styling
Live region updates for date-range info
In Framer’s Property Panel you can configure:
Title + subtitle
Room list (up to 8 rooms):
name, ID, capacity, price/night, min/max nights, children allowed, amenities, unavailable ranges
Taxes:
VAT rate
city tax enable + amount per adult/night
Global stay length limits (min/max nights)
Theme colors (accent, surfaces, text, borders, focus, error, success)
Optional font overrides (heading/body/button)
No online payment
No external booking system integration
No server-side availability checks
No backend storage
It’s a “booking request” form: send details to the hotel, then confirm manually—ideal for smaller hotels, boutique stays, or initial MVP setups.
Hotel / apartment booking requests without payment
Lead generation for hospitality sites
Premium-looking booking flow inside a Framer landing page
Framer Forms email workflows where you want a structured booking summary
Levin Däubler
