Reservation Form Pro

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.