carmen lopez lopeza

Posted on Aug 4

Create a Restaurant Cleaning Booking Form with React Hook Form

Okay, real question: have you ever tried to book a cleaning crew through a sketchy contact form? Like, the kind where you’re not even sure if it sent? Yeah... that’s a no for me.

A while back, a friend running Deep Cleaning Hillside asked if I could make something smoother. Something that worked. So, we went with React Hook Form—and honestly, it’s been a game-changer.

Why Use React Hook Form?

Let’s break it down in plain English:

It’s lightweight and fast
Handles validation like a boss
Makes your life easier, especially with more complex forms

It also plays super nice with UI libraries like Material UI, Tailwind, or even vanilla HTML.

What We’ll Build

We’re creating a responsive form that lets restaurant managers (or anyone, really) book cleanings online. With fields for:

Name
Email
Phone
Preferred date & time
Cleaning type

Bonus: We’ll add simple validation and a “thank you” message once submitted.

1. Install React Hook Form

npm install react-hook-form

Right. Let’s go.

2. Basic Form Setup

import { useForm } from "react-hook-form";

export default function BookingForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
    alert("Thanks! We got your request.");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <input {...register("name", { required: true })} placeholder="Name" />
      {errors.name && <p>Name is required</p>}

      <input {...register("email", { required: true })} placeholder="Email" />
      {errors.email && <p>Email is required</p>}

      <input {...register("phone")} placeholder="Phone" />

      <input {...register("datetime")} type="datetime-local" />

      <select {...register("service")}>
        <option value="restaurant">Restaurant Cleaning</option>
        <option value="residential">House Cleaning</option>
        <option value="moveout">Move Out Cleaning</option>
      </select>

      <button type="submit">Book Now</button>
    </form>
  );
}

Simple, functional, clean.

Quick Reality Check

One client in house cleaning Hillside il told me, “This is the first time I’ve had someone book without calling.” Which, let’s be honest, is kinda wild in the cleaning biz.

Styling Tips (Optional but Helps!)

Try using TailwindCSS or Chakra UI for fast layout options. Add padding, shadows, hover states. You’d be surprised how much of a difference it makes.

<input className="border p-2 rounded w-full" />

Yep. That’s it.

Add Feedback with State

const [submitted, setSubmitted] = useState(false);

const onSubmit = (data) => {
  setSubmitted(true);
  // process data
};

Then conditionally render a nice thank-you note. No one likes wondering if the form worked.

Tools I’d Recommend

React Hook Form (obviously)
Vercel (to deploy)
Formspree (if you need email handling)
Tailwind UI (for quick layout help)

The Real Win?

It makes life easier for your clients. One move out cleaning Hillside business saw their form conversion jump 40%—just by making it not suck.

Wrap It Up

So yeah, forms don’t need to be ugly. Or confusing. Or frustrating. With React Hook Form, you get control, simplicity, and a clean UX.

Give it a shot this week—you’ll see!

DEV Community