--- title: "Reservation Form Pro — Framer component · Best of Framer" description: "$5.00 · Framer component · by levindbr · Forms. Reservation Form Pro is a multi-step reservation flow for Framer that connects directly to a native Framer Form." canonical: "https://framer.elliotli.dev/component/reservation-form-pro" --- [Home](/)/[Components](/components)/[Forms](/components/category/forms)/Reservation Form Pro # Reservation Form Pro Multi-step Reservation Form for Framer [View on Framer](https://framer.com/marketplace/components/reservation-form-pro/?via=elliot-li) ![Reservation Form Pro preview image 1](https://framer.elliotli.dev/og/component/reservation-form-pro/6922ca54c2f77a4c/1600x1200.jpg) ## Summary Reservation Form Pro is a multi-step reservation flow for Framer that connects directly to a native Framer Form. ## Description Reservation Form Pro is a multi-step reservation flow for Framer that connects directly to a native Framer Form. It is designed for restaurants, bars and similar venues that need a clean, mobile-friendly booking experience. ### Features - **Multi-step flow** - Step 1: Calendar with selectable dates - Step 2: Time slot selection based on opening hours and blocked dates - Step 3: Guest count with configurable maximum - Step 4: Summary and contact details before submitting - **Availability logic** - Opening hours per weekday (schedule with 7 items) - Closed days and blocked times for specific dates - “Bookable days in advance” limit (e.g. 90 days) - “Earliest booking” (hours) to prevent last-minute bookings - Automatically disables days and times that are not bookable - **Guest management** - Configurable maximum guests (also controls the info text for larger groups) - Clear layout for selecting guest count - **Contact & consent** - Fields: name (required), phone, email, notes (optional) - Toggle visibility for email, phone and notes fields - Option to require email and/or phone - Optional reservation summary box on the last step - Privacy policy checkbox with customizable link (required for submission) - **Styling & customization** - **Advanced typography:** Independent font controls for headings, body text, labels, and buttons - **Comprehensive color theming:** Fully customizable card and field backgrounds, including interactive hover and selected states - **Precise border styling:** Control outer card borders, default field borders, and sharp active focus rings - **Semantic text & feedback colors:** Set specific colors for main text, muted hints, success messages, and errors - **Technical** - Built on the native Framer Form system (no external backend required) - Responsive layout for desktop and mobile - Validation for required fields and consent before submission ### Setup guide 1. **Add a Framer Form to the canvas** - In Framer, open your page. - Insert → **Form** and place it where the reservation form should appear. 2. **Clean up the Form content** - Select the new Form on the canvas. - Delete all elements inside this Form (inputs, buttons, etc.), so only the empty Form wrapper remains (layer name usually **Form**). 3. **Place Reservation Form Pro inside the Form** - In the Assets panel, drag **Reservation Form Pro** onto the canvas. - Make sure the Reservation Form Pro component is **nested inside** the Form wrapper (Form as parent, Reservation Form Pro as child). 4. **Set the submission email** - Select the **Form** (not the Reservation Form Pro component). - In the right sidebar, set the **Email** (or “Send to”) field to your desired address. - All submitted reservations will be sent to this email via Framer Forms. 5. **Customize the component** - Select **Reservation Form Pro**. - Adjust the options in the right sidebar: - Font, colors, border, radius - Maximum guests - Bookable days in advance - Earliest booking (hours) - Opening hours (per weekday) - Closed days and blocked times (for special dates) - Visibility and requirement of email, phone and notes fields - Privacy policy checkbox and **Privacy policy link** URL - Edit labels and helper texts (e.g. “More than 10 guests? Please contact us directly by phone.”) to match your venue. 6. **Preview and test** - Use the Preview mode in Framer. - Go through the full reservation process, submit a test booking and check the email you configured in the Form. - Adjust availability, texts or styling if needed. 7. **Publish** - When everything works as expected, publish your Framer project. - The live site will now accept reservations and send them to your configured email address. For questions or support regarding the component, you can contact: [**levin@lmvision.de**](mailto:levin@lmvision.de). ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-a2i7mqe6-jH0Uv7oazaX7KXk0rTZuXSbhOkrjx8)How to setup the Reservation Form Pro Framer Component | LMVision ## Rank history [How rankings work →](/terms#rankings) - All · #6988 ## Details - **Author**: levindbr - **Price**: $5.00 - **Published**: 2025-12-11 - **Updated**: 2026-04-11 - **Added**: 2025-12-01 - **Categories**: Forms ## More across types - [Wallble: Guest Book & Wall of Love](/plugin/wallble-guest-book-wall-of-love) — Wallble · Free — Guest book & Wall of Love ## More like this - [Stay Booking Pro](/component/stay-booking-pro) — Design Foundry · $10 — Stay Planner with Dynamic Pricing - [Postcode Checker](/component/postcode-checker) — Sean Weekes · $15 — Do we cover your area? (UK - [Property Calculators](/component/property-calculators) — Sean Weekes · $12 — UK Stamp Duty, mortgage and yield - [UTM Lead Capture](/component/utm-lead-capture) — Sean Weekes · $9 — See where every lead came from