Add a Supabase Database
Our site looks great. It also has a contact form that does absolutely nothing. Click the button, fill in your email, hit send. Straight into the void.
If we're going to pretend to run a plant shop, the form needs to remember things. That's where a database comes in.
Spot the dead buttons
Before adding new stuff, scrub the page for buttons that don't work. In the video, the View All Plants button was clickable but went nowhere. We told v0:
remove view all plants dead button
Gone. You can also ask v0 to make the button work, but only if you actually want it to do something. Decide first.
Ask v0 how to make the form work
This is the prompt that drove the lesson:
how can we make the send us a message section work?
I want to receive these messages somewhere.
v0 walks you through options. Two main ones:
- Supabase: store messages in a database (a spreadsheet in the cloud, basically)
- Resend: forward messages to your email inbox
Both are good. We're starting with Supabase, because a permanent record of everyone who's ever filled out the form is hard to beat.
Install the Supabase integration
When v0 offers to install Supabase, click Install. v0 handles the connection between the database and your contact form.
Along the way, v0 will ask if you want to add a Resend API key for email. Skip it for now. We'll come back to email in the next lesson. v0 is smart enough to make the email step optional and ship the database part on its own.
You can either follow each step v0 takes (helpful when you're learning) or just let it run. Both are fine. The "Show steps" link expands the work-in-progress so you can see what's happening.
Test the form, then check the database
Once v0 says the form is functional, publish your changes and head to your live site. Fill out the form like a customer would.
Back in v0, click the database icon in the sidebar. Pick the contact_messages table. Your test submission should be sitting there, waiting.
That's the whole loop: form on the site, message in the database. Repeatable, persistent, real.
Recap
- Ask v0 how to make a feature work instead of guessing the implementation.
- Supabase stores form submissions in a queryable table.
- Skip the Resend step in this lesson. We'll handle email next.
- Publish after every meaningful change so your live site stays in sync.
Was this helpful?