> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replo.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Forms and bookings

> Collect submissions, show open times, and take bookings on a site.

> [!WARNING]
>
> Forms and bookings are in alpha and only work on workspaces that have early access. Hooks and their responses may change.

Submissions and bookings are stored in Replo. These hooks hold no styling, so each site designs its own form and calendar.

## `forms/use-forms`

`@replohq/sdk/forms/use-forms`

#### `groupSlotsByDate`

Groups slots by the business's calendar date ("2026-11-14").

```ts theme={null}
import { groupSlotsByDate } from "@replohq/sdk/forms/use-forms";
```

```ts theme={null}
groupSlotsByDate: ({ slots, timeZone, }: { slots: BookingSlot[]; timeZone: string; }) => Map<string, BookingSlot[]>
```

#### `useManagedBooking`

Loads and changes a booking from the secret link in its confirmation email.

```ts theme={null}
import { useManagedBooking } from "@replohq/sdk/forms/use-forms";
```

#### `useReleaseBookingHold`

Gives back a held time when the visitor goes back or leaves.

```ts theme={null}
import { useReleaseBookingHold } from "@replohq/sdk/forms/use-forms";
```

```ts theme={null}
useReleaseBookingHold: () => UseMutationResult<{ ok: boolean; }, Error, string, unknown>
```

#### `useReploFileUpload`

Uploads one photo or PDF; put the returned `fileRef` in that field's answer.

```ts theme={null}
import { useReploFileUpload } from "@replohq/sdk/forms/use-forms";
```

```ts theme={null}
useReploFileUpload: ({ formKey, fieldKey, }: { formKey: string; fieldKey: string; }) => { upload: UseMutateAsyncFunction<{ fileRef: string; filename: string; }, Error, File, unknown>; isUploading: boolean; file: { fileRef: string; filename: string; }; error: ReploFormError; reset: () => void; }
```

#### `useReploFormSubmit`

Submits a form. Spread `honeypotProps` on a visually hidden input to discard bots.

```ts theme={null}
import { useReploFormSubmit } from "@replohq/sdk/forms/use-forms";
```

**Also exported**

| Export | Kind | Type |
| - | - | - |
| `BookingAvailability` | type | `{ bookable: { key: string; name: string; description: string; location: string; durationMinutes: number; capacity: number; timeZone: string; hosts: { id: string; displayName: string; }[]; }; slots: { startsAt: string; endsAt: string; hostId: string; seatsLeft: number; }[]; }` |
| `BookingHold` | type | `{ holdToken: string; heldUntil: string; startsAt: string; endsAt: string; }` |
| `BookingSlot` | type | `{ startsAt: string; endsAt: string; hostId: string; seatsLeft: number; }` |
| `FormAnswerValues` | type | `{ [x: string]: string \| boolean; }` |
| `FormFileUpload` | type | `{ fileRef: string; filename: string; }` |
| `FormSubmitResult` | type | `{ submissionId: string; booking: { startsAt: string; endsAt: string; manageToken: string; }; }` |
| `ManagedBooking` | type | `{ bookableKey: string; bookableName: string; location: string; hostName: string; businessName: string; timeZone: string; startsAt: string; endsAt: string; status: "held" \| "confirmed" \| "cancelled" \| "completed" \| "no_show"; canChange: boolean; hostId: string; seats: number; }` |
| `ReploFormError` | class | `typeof ReploFormError` |
| `useBookingAvailability` | hook | — |
| `useBookingHold` | hook | `({ bookableKey }: { bookableKey: string; }) => UseMutationResult<{ holdToken: string; heldUntil: string; startsAt: string; endsAt: string; }, Error, { hostId: string; startsAt: string; seats: number; }, unknown>` |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.