How do I show only free time slots?

Load the open slots for the chosen date from your backend and render those instead of the fixed TIMES array.

Can it send a calendar invite?

Yes, from your server action. Create an .ics file or use the Google Calendar or Cal.com API after the booking is saved.

How are past dates blocked?

The Zod schema compares the chosen date with today and shows an error for anything earlier.

Appointment Booking Form

A free appointment booking form template for React and Tailwind CSS: service cards, a date picker that blocks past dates, time slots, contact fields and a confirmation screen, validated with Zod.

ReactTailwind CSSReact Hook FormZodFree

Installation

Install the form libraries, then copy the code above into your project.

npm i react-hook-form zod @hookform/resolvers

About the Appointment Booking Form

A booking form with selectable service cards, a native date input that rejects past dates, a grid of time slots, name and email, optional notes, and a confirmation message that spells out the booked time.

When to use it

Use it for consultations, salons, clinics, tutoring, demos or any business that takes bookings.

How to use the Appointment Booking Form

1Install the dependencies: npm i react-hook-form zod @hookform/resolvers.
2Copy the code into components/appointment-form.tsx (or anywhere in your project).
3Render <AppointmentForm /> on any page.
4Replace the placeholder in onSubmit with your server action or API call.

Send submissions by email

In Next.js, a server action can email every submission with Resend. Call it from onSubmit: await submitForm(values).

// app/actions.ts
"use server";

import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_API_KEY);

export async function submitForm(values: Record<string, unknown>) {
  await resend.emails.send({
    from: "Website <hello@yourdomain.com>",
    to: "you@yourdomain.com",
    subject: "New form submission",
    text: JSON.stringify(values, null, 2),
  });
}

More form templates

All forms →

Multi-step Signup Form

A four-step signup wizard with a stepper, per-step validation and a review screen.

Contact Form

Name, email, topic and message with validation, consent and a success state.

Waitlist Form

Email signup with an optional role and a referral link on success.

Email and password sign in with show password, remember me and social buttons.

Job Application Form

Role, experience, resume upload and cover letter with file validation.

Feedback & NPS Form

A 0–10 recommend score, reason, improvement topics and optional email.

Newsletter Signup Form

Email signup with topic checkboxes, frequency and double opt-in message.

Event Registration Form

Ticket types with prices, quantity, dietary needs and terms.

Support Ticket Form

Category, priority, description and an optional attachment.