---
title: "Book Surfer Booking Forms — Free Framer plugin · Best of Framer"
description: "Free Framer plugin · by Aivorn Tech · Integrations. Book Surfer Booking Forms A Framer canvas plugin for fitness studios, instructors, and class organizers."
canonical: "https://framer.elliotli.dev/plugin/booksurfer-booking-forms"
---

[Home](/)/[Plugins](/plugins)/[Integrations](/plugins/category/integrations)/Book Surfer Booking Forms

# Book Surfer Booking Forms

The Booking Engine for website

[View on Framer](https://framer.com/marketplace/plugins/booksurfer-booking-forms/?via=elliot-li)

![Book Surfer Booking Forms preview image 1](https://framer.elliotli.dev/og/plugin/booksurfer-booking-forms/5b678e9da11e049f/1600x1200.jpg)

## Summary

Book Surfer Booking Forms A Framer canvas plugin for fitness studios, instructors, and class organizers.

## Description

**Book Surfer Booking Forms**

A Framer canvas plugin for fitness studios, instructors, and class organizers. Connect your Book Surfer account and drop fully functional, live booking forms onto your Framer site — no embed code, no copy-pasting class details. Forms sync with your dashboard, keeping class info, schedules, and submissions wired to your backend.

**How it works**

1.  **Connect** — Paste your Book Surfer API key (bsf\_…). The plugin validates it and securely stores it in Framer's plugin storage. Your key only fetches your classes and form schemas.
    
2.  **Browse** — Your live classes load inside the plugin. Each card shows name, type, instructor, price, and location, with instant search.
    
3.  **Insert** — Drag a class onto the canvas or click to pick a layout. The plugin inserts a hosted booking component wired to that class — ready to take real bookings.
    

**Key features**

-   One-click connection via API key, with secure validation and disconnect.
    
-   Live class sync — pulls real classes from your dashboard in real time.
    
-   Drag-and-drop or click-to-add insertion.
    
-   Four layout styles — Classic, Modern, Minimal, Compact — each previewed before insertion.
    
-   Hosted booking component — served from a hosted URL and configured per class via attributes (embed URL, class ID, name, location, layout), so forms update centrally.
    
-   Smart fields — student & guardian details, email, mobile, age, gender, and notes, with required/optional handling.
    
-   Permission-aware UI that prompts clearly when canvas access is needed.
    
-   Polished interface with live status indicators, toast feedback, and loading/error states.
    

**Tech**

Framer Plugin SDK v3, React 19, TypeScript, Vite, Tailwind CSS 4. Runs in canvas mode using useMakeDraggable and addComponentInstance. Forms powered by React Hook Form + Zod; data fetched via Axios with Bearer-token auth.

**Who it's for**

Studio owners, instructors, coaches, and anyone running scheduled classes who wants bookable forms on Framer in seconds.

## Rank history [How rankings work →](/terms#rankings)

-   All · #861

## Details

- **Author**: Aivorn Tech
- **Published**: 2026-06-08
- **Updated**: 2026-07-02
- **Added**: 2026-06-03
- **Categories**: Integrations

## More like this

-   [Profeed LinkedIn Feeds](/plugin/profeed-linkedin-feeds) — ProFeed · Free — LinkedIn feeds. Live from $9/mo
-   [PDF Viewer](/plugin/plumspace-pdf-viewer) — PlumSpace · Free — With the PDF Viewer plugin, visitors can open PDF, use a built-in PDF reader, and view pdf documents without leaving your page.
-   [Glimpze](/plugin/glimpze) — Daniel Semecky · Free — Live chat and website video calls
-   [Pulse Analytics](/plugin/pulse-analytics) — Usman Baig · Free — Privacy-first analytics for Framer