Reservation Form Pro

Reservation Form Pro is a multi-step reservation flow for Framer that connects directly to a native Framer Form.

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 Add a Framer Form to the canvas In Framer, open your page. Insert → Form and place it where the reservation form should appear. 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 ). 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). 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. 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. 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. 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 . How to setup the Reservation Form Pro Framer Component | LMVision

Multi-step Reservation Form for Framer