Next.js template

Restaurant booking website template

A complete Next.js restaurant booking website template with a live menu and a table reservation form that actually sends.

View Live Site Download Code

Quick Answer

This is the best free Next.js restaurant booking website template because tables go through Formgrid so reservations land in email and a Google Sheets roster without a custom backend, while the menu stays live in a Google Sheet. Ulíng ships home, menu, contact, and a reservations form. Set one environment variable, deploy on Vercel or GitHub Pages, and collect real table requests from day one. Full source on GitHub. No credit card required.

Built for kitchens that take tables and sell food

This restaurant website template is Ulíng, a fictional Manila charcoal kitchen in a former Deptford auto shop. Twelve tables. Rice, vinegar, smoke. Visitors see a kitchen. Developers later point the reservation form at a live Formgrid endpoint.

Ulíng restaurant booking website template homepage screenshot

Homepage preview. The live demo shows the menu, catalog, contact page, and reservations form.

Screenshots from the live template

Ulíng restaurant menu page screenshot
Menu: the live catalog lives on this page, not in hardcoded React.
Ulíng live Google Sheets catalog screenshot
Catalog widget: categories, availability, cart, and Place order.
Ulíng restaurant reservations form screenshot
Reservations: Formgrid-shaped table request form.
Ulíng restaurant contact page screenshot
Contact: address, hours, and a note to the room.

What’s included

  • Live menu from Google Sheets via the Sheetrocket catalog widget.
  • Table reservation form on /reservations, powered by Formgrid.
  • Clear split: food checkout stays in the widget; tables stay on Formgrid.
  • Home, about, menu, reservations, and contact pages with Restaurant JSON-LD.
  • Static export so the same site runs locally or on GitHub Pages.
  • Next.js 14, React 18, TypeScript. No Tailwind dashboard chrome.

How to use this template

  1. Clone the Formgrid repo and open examples/restaurant.
  2. From the repository root run pnpm install then pnpm example:restaurant.
  3. Create a free account at formgrid.dev and copy your form endpoint URL.
  4. Set NEXT_PUBLIC_FORMGRID_ENDPOINT to that URL and rebuild.
  5. Point the menu widget at your own Sheetrocket catalog if you own the sheet, then deploy the static export.

All templates use Formgrid as the form backend. The free plan includes 50 submissions per month. No credit card required.

Fully functional: not just a mockup

Reservations that post

Visitors go to /reservations. submitReservation() sends a Formgrid-shaped payload. Wire your endpoint and the table request becomes a lead.

Menu that is not hardcoded

The kitchen marks rows Available or not. The widget filters to Available. Cart and Place order stay inside the catalog. Tables stay on Formgrid.

One environment variable

Set NEXT_PUBLIC_FORMGRID_ENDPOINT. No restaurant booking database and no SMTP project to maintain.

Start using this restaurant booking website template today

Launch a professional restaurant site and collect real table requests from day one.

View Live Site Download Code

Running a restaurant and want this set up for you? I offer done-for-you setup starting at $500. Learn more →

What Happens After Submit

Every template enquiry connects to a full lead system

Download the HTML, point the form at Formgrid, and get the same dashboard, Google Sheets sync, and follow up tools that power every Formgrid site. Not just a plain email notification.

Lead pipeline

Every enquiry becomes a tracked lead

New, Contacted, and Converted stages in one dashboard. See active enquiries and conversion rate without counting manually or adding a separate CRM.

Formgrid lead pipeline showing New Contacted Converted stages
Lead status and pipeline view in the Formgrid dashboard

Google Sheets sync

Every submission in a shared sheet automatically

Each form post appears as a new row in Google Sheets within seconds. Your whole team sees new leads in real time. No Zapier needed.

Form submissions syncing to Google Sheets automatically

Email notifications

Instant inbox alerts that look professional

Every submission triggers a clean, formatted email with the full enquiry details. No raw data dumps in the inbox.

Instant email notification for a new form submission

Follow up reminders

Warm leads never go cold

Set a follow up date on any lead and get an email reminder with the lead details and your notes on that date.

Formgrid follow up reminder email with lead details

UTM Source Tracking

Know exactly which channel sent each submission. Google, Instagram, referrals, and paid ads are captured automatically.

Spam Protection

Honeypot fields and rate limiting are built in automatically. Your template form stays protected from bots.

Frequently Asked Questions

Common questions about using and customizing this restaurant booking website template.

Yes. The Next.js template is free and open source on GitHub. You can clone it, customize the kitchen copy, and deploy it at no cost on Vercel, GitHub Pages, Netlify, or Cloudflare Pages. Table requests use Formgrid as the backend. Formgrid's free plan includes 50 submissions per month with no credit card required. If you receive more than 50 reservation requests per month, the Premium plan is $12 per month.
Sign up free at formgrid.dev, create a new form, and copy your unique endpoint URL. Set NEXT_PUBLIC_FORMGRID_ENDPOINT to that URL and rebuild. submitReservation already POSTs the table request. That is the only change required for bookings. No restaurant booking database. No SMTP setup.
The menu is a Sheetrocket catalog widget on /menu, pointed at a Google Sheet. Dishes are not duplicated in React. Mark a row Available and it appears. Cart and Place order post through the widget. Point the widget at your own sheet ids when this is more than an example.
Yes. This is a static Next.js export. GitHub Actions already builds Ulíng next to Marram and publishes it under /uling/ on GitHub Pages. You can also deploy to Vercel, Netlify, or Cloudflare Pages. The reservation form works on any static host because Formgrid handles server side processing.
No. Ulíng is a Next.js developer template. If you want a form you can customize without code, use the Restaurant Table Booking no-code template on formgrid.dev/templates. This example is for developers who want a full restaurant marketing site with Formgrid as the backend.
Yes via Formgrid. Connect your reservation form to a Google Sheet from the Integrations tab and every table request appears as a new row. The kitchen menu is a separate Google Sheet shown through the catalog widget. Google Sheets sync for Formgrid leads is available on the Premium plan at $12 per month.
Formgrid Services offers a done for you setup starting at $500. You get a reservation form, private event enquiries, Google Sheets sync, a lead pipeline, and UTM tracking. Setup takes 3 to 5 business days. Learn more at formgrid.dev/services-restaurant.

Your form builder, lead pipeline, and form backend in one place.

Whether you are sharing a form link on WhatsApp, pointing your HTML form to a Formgrid endpoint, or tracking leads through a built-in pipeline, get it done in 2 minutes.

Start Free. No Credit Card Required