React Booking & Appointment Form

Name: FormFlow
Rating: 4.9 (50 reviews)
Author: FormFlow

Collect appointment bookings with service selection, date picker, and time slots. Perfect for consultations, meetings, and service bookings.

Installation

npm install @formflow.sh/react

Basic Usage

import { BookingForm } from '@formflow.sh/react';

function BookAppointment() {
  return (
    <BookingForm
      apiKey="ff_live_xxx"
      services={['Consultation', 'Training', 'Support Call']}
      timeSlots={['9:00 AM', '10:00 AM', '2:00 PM', '3:00 PM']}
    />
  );
}

Props

Prop	Type	Default	Description
`apiKey`	string	-	Your FormFlow API key
`services`	string[]	-	Available services to book
`timeSlots`	string[]	-	Available time slots
`minDate`	Date	today	Earliest bookable date
`maxDate`	Date	+30 days	Latest bookable date
`theme`	"minimal" \| "modern" \| "brutalist" \| "glass"	"minimal"	Visual theme

Form Fields

Name - Customer name (required)
Email - Customer email (required)
Phone - Phone number (optional)
Service - Service selection dropdown
Date - Date picker
Time - Time slot selection
Notes - Additional notes (optional)

With Phone Required

<BookingForm
  apiKey="ff_live_xxx"
  services={['Consultation', 'Demo']}
  timeSlots={['9:00 AM', '11:00 AM', '2:00 PM']}
  requirePhone={true}
/>

Features

Date picker - Accessible calendar component
Time slots - Configurable availability
Email notifications - Both customer and admin
Calendar integration - Add to Google Calendar (via webhook)

ContactForm - Simple contact form
QuoteRequestForm - Quote requests