Add a booking form with Supabase

Marta's website is live. People find her, scroll through her photos of dogs in Madrid, and want to book a session. Today we will show you how to give them a way to do it.

A form connected to Supabase, a database where every submission gets stored automatically. Someone fills in their name, their pet's name, and a preferred date. Every submission goes straight to Marta. She can check whenever she wants. No email chains, no third-party booking tool, no monthly fee. Just a form that works.

what you will use

Supabase

Supabase is a database, a place where your project stores information. Think of it as a spreadsheet that lives on the internet and that your website can write to automatically. Every time someone submits the booking form, that information goes to Supabase. The free plan is more than enough to start.

what we are building

A booking form on Marta's landing page with five fields. When someone submits it, the data goes directly to Supabase and Marta can see it in her dashboard.

The booking form fields

Name: the client's full name
Email: so Marta can get back to them
Pet's name: because Marta loves knowing who she is going to meet
Preferred date: a rough idea of when they want the session
Message: anything else they want to add

the steps

Create a Supabase account and a new project

Go to supabase.com and sign up. Once inside, click New project. Give it a name, set a database password (save it somewhere safe), and choose the region closest to you. Supabase takes about a minute to get everything ready.

Create your bookings table

In your Supabase project, go to the Table Editor and click New table. Name it bookings. Add five columns: name, email, pet_name, preferred_date, and message, all as text type. Supabase adds an ID and timestamps automatically. Save the table.

Get your project credentials and store them safely

Go to Settings, then API. You will see two things: your Project URL and your public anon key. These connect your website to Supabase. Never paste them directly into your code. They are like passwords. If they end up on GitHub, anyone can access your database. Instead, go to your Vercel project, open Settings, find Environment Variables, and add them as SUPABASE_URL and SUPABASE_ANON_KEY. Your code will read them from there.

Ask your AI assistant to add the booking form

Open your AI coding assistant with Marta's project. Use this prompt: "Add a booking form to this landing page with fields for name, email, pet's name, preferred date, and message. Connect it to Supabase using the Supabase JavaScript client. Read the credentials from SUPABASE_URL and SUPABASE_ANON_KEY environment variables. When the form is submitted, insert the data into a table called bookings and show a confirmation message."

Allow the form to write to your table

By default, Supabase blocks all writes to your tables. You need to tell it that the booking form is allowed. Go to Authentication, then Policies, and find your bookings table. Click New policy and enable inserts for anonymous users. If you are not sure how to write it, ask your AI assistant: "Write a Supabase row level security policy that allows anonymous users to insert rows into the bookings table."

Test it end to end

Push the updated project to GitHub. Vercel will redeploy automatically. Open your live site, fill in the booking form, and submit it. Then go to your Supabase dashboard, open the Table Editor, and check the bookings table. The submission should be there. That is the whole loop working.

if something does not look right

Most issues here come from permissions or environment variables. Both are easy to fix once you know where to look.

The form submits but nothing appears in Supabase

Check your table policies. If there is no policy that allows anonymous inserts, Supabase silently rejects the submission without showing an error. Go to Authentication, then Policies, and confirm the bookings table has an insert policy for anonymous users.
The form works locally but not on the live site

The environment variables are probably missing in Vercel. Go to your Vercel project settings, confirm SUPABASE_URL and SUPABASE_ANON_KEY are there, and trigger a new deployment.
The AI put the keys directly in the code

This happens. Before you save your changes to GitHub, look through the code for anything that looks like a long web address or a string of random characters. Those are your credentials sitting exposed in the code. If you find them, delete them, add them to Vercel as environment variables following the steps above, and tell the AI to read them from there instead.

Marta's site now does something. It is not just a portfolio anymore. It is a tool that works for her while she is out photographing dogs in the park.

Your task this week SOP 05

Add a booking form and connect it to Supabase.

Create your Supabase project, build the bookings table, store your keys safely in Vercel, and ask your AI assistant to wire it all together. Do not move on until you see a real submission appear in your Supabase dashboard.

When done A working form on your live site that saves real data to a real database. Log in to Supabase and see it there.

Next — SOP 06

You made it

A recap of everything you built and learned across this course, and what to build next.

Read SOP 06 →