The Working Contact Form

React Hook Form + Zod on the front, Supabase Edge Function + Resend on the back. The first form in your training that actually does something.

This is the line. In Project 1, the contact form was a visual. Here, it accepts a real submission, validates it, sends a real email to admissions, and shows the parent a real success message.

By the end of this page:

Parents fill in name, email, child's grade, and message.
Invalid input is caught and shown inline.
A POST request hits your edge function.
The function emails the admissions inbox via Resend.
The parent sees "Thanks — we'll be in touch."

Plan for ~2-3 hours. Take it slow. This is the most concentrated technical work in Project 2.

1. Set Up Resend

You'll need a Resend account if you don't have one from the tools modules.

Go to resend.com, sign up with the project Gmail.
Get your API key (Settings → API Keys → Create).
Save it immediately to VaultMate:
- Project: Aurora School
- Title: "Resend API Key"
- Category: API Key
- Secret: re_xxx...
Verify a sending domain. For now, you can use Resend's free onresend.dev sender — Aurora School <onboarding@resend.dev>. For production, add your real domain later (the Resend tool guide covers DNS setup).

2. Set Up the Supabase Project

If you haven't already in Phase 3:

Go to supabase.com → New project.
Name: aurora-school (same slug as your folder).
Region: ap-south-1 (Mumbai) for an Indian school.
Generate a strong DB password — save to VaultMate immediately.
Wait 2 minutes for the project to provision.

Note your project ref (the random subdomain like abcdefghijklmnop.supabase.co — you'll need this in CLI commands).

3. Install the Supabase CLI

pnpm add -D supabase

Initialise Supabase in your project:

pnpm supabase init

Link to your remote project:

pnpm supabase login
pnpm supabase link --project-ref <your-project-ref>

You'll be prompted for the database password from step 2. Paste it.

4. Create the Edge Function

pnpm supabase functions new contact-inquiry

This creates supabase/functions/contact-inquiry/index.ts. Open it. Replace the contents:

import { Resend } from "npm:resend@4.0.0";
 
const RESEND_API_KEY = Deno.env.get("RESEND_API_KEY")!;
const ADMISSIONS_EMAIL = Deno.env.get("ADMISSIONS_EMAIL")!;
const FROM_EMAIL       = Deno.env.get("FROM_EMAIL")!;
 
const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "POST, OPTIONS",
  "Access-Control-Allow-Headers": "content-type",
};
 
interface ContactBody {
  name?: string;
  email?: string;
  grade?: string;
  message?: string;
}
 
Deno.serve(async (req) => {
  // CORS preflight
  if (req.method === "OPTIONS") {
    return new Response("ok", { headers: corsHeaders });
  }
  if (req.method !== "POST") {
    return new Response(JSON.stringify({ error: "Method not allowed" }), {
      status: 405,
      headers: { ...corsHeaders, "content-type": "application/json" },
    });
  }
 
  let body: ContactBody;
  try {
    body = await req.json();
  } catch {
    return new Response(JSON.stringify({ error: "Invalid JSON" }), {
      status: 400,
      headers: { ...corsHeaders, "content-type": "application/json" },
    });
  }
 
  // Server-side validation (don't trust the client)
  const { name, email, grade, message } = body;
  const errors: string[] = [];
  if (!name || name.trim().length < 2) errors.push("Name is required");
  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) errors.push("Valid email required");
  if (!grade) errors.push("Grade is required");
  if (!message || message.trim().length < 10) errors.push("Message must be at least 10 characters");
 
  if (errors.length > 0) {
    return new Response(JSON.stringify({ error: errors.join(". ") }), {
      status: 400,
      headers: { ...corsHeaders, "content-type": "application/json" },
    });
  }
 
  // Send email
  const resend = new Resend(RESEND_API_KEY);
  const { error } = await resend.emails.send({
    from: FROM_EMAIL,
    to: ADMISSIONS_EMAIL,
    replyTo: email,
    subject: `Admissions inquiry — ${name} (Grade ${grade})`,
    text: [
      `New admission inquiry from ${name} <${email}>`,
      ``,
      `Grade: ${grade}`,
      ``,
      `Message:`,
      message,
    ].join("\n"),
  });
 
  if (error) {
    console.error("Resend error:", error);
    return new Response(JSON.stringify({ error: "Failed to send email. Please try again or call us directly." }), {
      status: 500,
      headers: { ...corsHeaders, "content-type": "application/json" },
    });
  }
 
  return new Response(JSON.stringify({ ok: true }), {
    status: 200,
    headers: { ...corsHeaders, "content-type": "application/json" },
  });
});

A few things to notice in this code:

No secrets in the code. API keys and the admissions email come from Deno.env.get(...). We'll set those as Supabase secrets shortly.
CORS headers on every response. Browsers block cross-origin POSTs unless the function explicitly allows it.
Server-side validation. Even though we validate on the front-end too, we also validate here. A malicious user can bypass the front-end; they cannot bypass this.
replyTo is set to the parent's email. When admissions hits Reply in their inbox, they reply to the parent not to themselves.

5. Set the Edge Function Secrets

pnpm supabase secrets set RESEND_API_KEY=re_your_actual_key
pnpm supabase secrets set ADMISSIONS_EMAIL=admissions@aurora-school.in
pnpm supabase secrets set FROM_EMAIL="Aurora School <onboarding@resend.dev>"

(Replace with your actual values. The FROM_EMAIL uses onresend.dev for now — replace with your real verified domain once you add one.)

Deploy the function:

pnpm supabase functions deploy contact-inquiry

You'll get a URL like:

https://abcdefghijklmnop.supabase.co/functions/v1/contact-inquiry

Save that URL — we'll use it in the frontend.

6. Add the Function URL to `.env.local`

In your project root, create .env.local (it's already in .gitignore, so it won't be committed):

NEXT_PUBLIC_CONTACT_FUNCTION_URL=https://abcdefghijklmnop.supabase.co/functions/v1/contact-inquiry
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGc...your-anon-key...

Get the anon key from your Supabase dashboard → Settings → API.

Restart pnpm dev so Next picks up the new env vars.

7. Install Form Dependencies

pnpm add react-hook-form zod @hookform/resolvers

These three are the standard form stack in our world:

react-hook-form — manages form state and validation lifecycle.
zod — defines the validation schema in TypeScript.
@hookform/resolvers — glues them together so RHF uses Zod for validation.

8. Build the Form Component

Create src/components/InquiryForm.tsx:

'use client'
 
import { useState } from 'react'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
 
const InquirySchema = z.object({
  name:    z.string().min(2, "Please enter your full name"),
  email:   z.string().email("Please enter a valid email"),
  grade:   z.string().min(1, "Please select your child's grade"),
  message: z.string().min(10, "A short message — at least 10 characters"),
})
 
type InquiryInput = z.infer<typeof InquirySchema>
 
const GRADES = [
  'Nursery', 'LKG', 'UKG',
  'Grade 1', 'Grade 2', 'Grade 3', 'Grade 4', 'Grade 5',
  'Grade 6', 'Grade 7', 'Grade 8', 'Grade 9', 'Grade 10',
  'Grade 11', 'Grade 12',
]
 
export function InquiryForm() {
  const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle')
  const [errorMsg, setErrorMsg] = useState<string>('')
 
  const { register, handleSubmit, formState: { errors }, reset } = useForm<InquiryInput>({
    resolver: zodResolver(InquirySchema),
  })
 
  async function onSubmit(data: InquiryInput) {
    setStatus('submitting')
    setErrorMsg('')
    try {
      const res = await fetch(process.env.NEXT_PUBLIC_CONTACT_FUNCTION_URL!, {
        method:  'POST',
        headers: { 'content-type': 'application/json', authorization: `Bearer ${process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY}` },
        body:    JSON.stringify(data),
      })
      if (!res.ok) {
        const err = await res.json().catch(() => ({ error: 'Something went wrong' }))
        throw new Error(err.error)
      }
      setStatus('success')
      reset()
    } catch (e) {
      setStatus('error')
      setErrorMsg(e instanceof Error ? e.message : 'Something went wrong')
    }
  }
 
  if (status === 'success') {
    return (
      <div className="bg-emerald-50 border border-emerald-200 rounded-2xl p-8 text-center">
        <p className="font-display text-2xl text-emerald-900 mb-2">Inquiry received</p>
        <p className="text-emerald-800">We'll be in touch within 2 business days. Check your email.</p>
        <button
          onClick={() => setStatus('idle')}
          className="mt-4 text-sm text-emerald-700 underline hover:text-emerald-900"
        >
          Send another inquiry
        </button>
      </div>
    )
  }
 
  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 text-left">
      <Field label="Your name" error={errors.name?.message}>
        <input {...register('name')} type="text" autoComplete="name"
          className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo focus:ring-2 focus:ring-indigo/20 outline-none" />
      </Field>
 
      <Field label="Email" error={errors.email?.message}>
        <input {...register('email')} type="email" autoComplete="email"
          className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo focus:ring-2 focus:ring-indigo/20 outline-none" />
      </Field>
 
      <Field label="Child's grade" error={errors.grade?.message}>
        <select {...register('grade')}
          className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo focus:ring-2 focus:ring-indigo/20 outline-none bg-white">
          <option value="">Select grade</option>
          {GRADES.map(g => <option key={g} value={g}>{g}</option>)}
        </select>
      </Field>
 
      <Field label="Message" error={errors.message?.message}>
        <textarea {...register('message')} rows={4}
          className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo focus:ring-2 focus:ring-indigo/20 outline-none resize-none" />
      </Field>
 
      {status === 'error' && (
        <p className="text-sm text-red-600">{errorMsg || 'Something went wrong. Please try again.'}</p>
      )}
 
      <button type="submit" disabled={status === 'submitting'}
        className="w-full bg-indigo hover:bg-indigo-hover text-white font-semibold px-6 py-3 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
        {status === 'submitting' ? 'Sending...' : 'Send inquiry'}
      </button>
    </form>
  )
}
 
function Field({ label, error, children }: { label: string; error?: string; children: React.ReactNode }) {
  return (
    <label className="block">
      <span className="text-sm font-medium text-gray-700 mb-1.5 block">{label}</span>
      {children}
      {error && <span className="text-sm text-red-600 mt-1 block">{error}</span>}
    </label>
  )
}

Look at the key patterns:

'use client' at the top. This component uses useState and form interactivity, so it must be a Client Component.
Zod schema first, types second. z.infer<typeof InquirySchema> gives us InquiryInput automatically — no duplicate type definitions.
State machine for status. idle → submitting → success | error. Easier to reason about than booleans.
Generic <Field> helper to avoid repeating label + input + error JSX 4 times.
No any. Every value is typed.

9. Drop the Form into the Admissions Page

Open src/app/admissions/page.tsx. Find the placeholder section with [Inquiry form goes here]. Replace it:

import { InquiryForm } from '@/components/InquiryForm'
 
// ...inside the JSX, replace the placeholder div with:
<div className="max-w-md mx-auto">
  <InquiryForm />
</div>

Save. Visit http://localhost:3000/admissions and scroll to the bottom. The form is there.

Try it:

Submit with empty fields. You see inline red errors.
Type a bad email like notanemail. Inline error.
Fill everything correctly. "Sending..." appears on the button. After ~2 seconds: "Inquiry received."
Check your admissions inbox. The email arrives.

If any step fails, open the browser DevTools network tab, click the failed contact-inquiry request, and look at the response. Common issues:

401 Unauthorized → forgot to send the anon key in the authorization header.
500 → check the Supabase function logs (pnpm supabase functions logs contact-inquiry).
"Failed to fetch" → check the function URL in .env.local.

10. Test on Mobile

Open Chrome DevTools mobile emulation. Fill the form on a mobile-sized viewport. Common issues:

Input fields too narrow for the on-screen keyboard.
Select dropdown shows native iOS picker — that's actually fine, parents will know how to use it.
Submit button is reachable above the keyboard.

Fix anything broken. The form should work on a real phone before you call this done.

11. Commit and Push

git add .
git commit -m "working contact form with Resend edge function"
git push

After Vercel rebuilds, open https://aurora-school.vercel.app/admissions, scroll to the form, and submit. The email should arrive in admissions. Your site is no longer a brochure.

12. What You Practised

This page covered the most concentrated technical territory in Project 2:

Edge Functions — code that runs on Supabase's servers, not in the browser.
Environment variables — secret values that live outside your code.
CORS — how browsers decide what's allowed to talk to what.
Zod schemas — the same validation logic shared between front and back.
Form state machine — idle / submitting / success / error — instead of boolean spaghetti.
React Hook Form — the de facto form library in the React ecosystem.
Resend — a transactional email service that just works.
Server-side validation — never trust the client.

This pattern repeats on every form you build for the rest of your career. Pat yourself on the back. This is the line Project 1 could not cross.

Next: Deploy and the home page

This is the line. In Project 1, the contact form was a visual. Here, it accepts a real submission, validates it, sends a real email to admissions, and shows the parent a real success message.

By the end of this page:

Parents fill in name, email, child's grade, and message.
Invalid input is caught and shown inline.
A POST request hits your edge function.
The function emails the admissions inbox via Resend.
The parent sees "Thanks — we'll be in touch."

Plan for ~2-3 hours. Take it slow. This is the most concentrated technical work in Project 2.

1. Set Up Resend

You'll need a Resend account if you don't have one from the tools modules.

Go to resend.com, sign up with the project Gmail.
Get your API key (Settings → API Keys → Create).
Save it immediately to VaultMate:
- Project: Aurora School
- Title: "Resend API Key"
- Category: API Key
- Secret: re_xxx...
Verify a sending domain. For now, you can use Resend's free onresend.dev sender — Aurora School <onboarding@resend.dev>. For production, add your real domain later (the Resend tool guide covers DNS setup).

2. Set Up the Supabase Project

If you haven't already in Phase 3:

Go to supabase.com → New project.
Name: aurora-school (same slug as your folder).
Region: ap-south-1 (Mumbai) for an Indian school.
Generate a strong DB password — save to VaultMate immediately.
Wait 2 minutes for the project to provision.

Note your project ref (the random subdomain like abcdefghijklmnop.supabase.co — you'll need this in CLI commands).

3. Install the Supabase CLI

pnpm add -D supabase

Initialise Supabase in your project:

pnpm supabase init

Link to your remote project:

pnpm supabase login
pnpm supabase link --project-ref <your-project-ref>

You'll be prompted for the database password from step 2. Paste it.

4. Create the Edge Function

pnpm supabase functions new contact-inquiry

This creates supabase/functions/contact-inquiry/index.ts. Open it. Replace the contents:

import { Resend } from "npm:resend@4.0.0";
 
const RESEND_API_KEY = Deno.env.get("RESEND_API_KEY")!;
const ADMISSIONS_EMAIL = Deno.env.get("ADMISSIONS_EMAIL")!;
const FROM_EMAIL       = Deno.env.get("FROM_EMAIL")!;
 
const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "POST, OPTIONS",
  "Access-Control-Allow-Headers": "content-type",
};
 
interface ContactBody {
  name?: string;
  email?: string;
  grade?: string;
  message?: string;
}
 
Deno.serve(async (req) => {
  // CORS preflight
  if (req.method === "OPTIONS") {
    return new Response("ok", { headers: corsHeaders });
  }
  if (req.method !== "POST") {
    return new Response(JSON.stringify({ error: "Method not allowed" }), {
      status: 405,
      headers: { ...corsHeaders, "content-type": "application/json" },
    });
  }
 
  let body: ContactBody;
  try {
    body = await req.json();
  } catch {
    return new Response(JSON.stringify({ error: "Invalid JSON" }), {
      status: 400,
      headers: { ...corsHeaders, "content-type": "application/json" },
    });
  }
 
  // Server-side validation (don't trust the client)
  const { name, email, grade, message } = body;
  const errors: string[] = [];
  if (!name || name.trim().length < 2) errors.push("Name is required");
  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) errors.push("Valid email required");
  if (!grade) errors.push("Grade is required");
  if (!message || message.trim().length < 10) errors.push("Message must be at least 10 characters");
 
  if (errors.length > 0) {
    return new Response(JSON.stringify({ error: errors.join(". ") }), {
      status: 400,
      headers: { ...corsHeaders, "content-type": "application/json" },
    });
  }
 
  // Send email
  const resend = new Resend(RESEND_API_KEY);
  const { error } = await resend.emails.send({
    from: FROM_EMAIL,
    to: ADMISSIONS_EMAIL,
    replyTo: email,
    subject: `Admissions inquiry — ${name} (Grade ${grade})`,
    text: [
      `New admission inquiry from ${name} <${email}>`,
      ``,
      `Grade: ${grade}`,
      ``,
      `Message:`,
      message,
    ].join("\n"),
  });
 
  if (error) {
    console.error("Resend error:", error);
    return new Response(JSON.stringify({ error: "Failed to send email. Please try again or call us directly." }), {
      status: 500,
      headers: { ...corsHeaders, "content-type": "application/json" },
    });
  }
 
  return new Response(JSON.stringify({ ok: true }), {
    status: 200,
    headers: { ...corsHeaders, "content-type": "application/json" },
  });
});

A few things to notice in this code:

No secrets in the code. API keys and the admissions email come from Deno.env.get(...). We'll set those as Supabase secrets shortly.
CORS headers on every response. Browsers block cross-origin POSTs unless the function explicitly allows it.
Server-side validation. Even though we validate on the front-end too, we also validate here. A malicious user can bypass the front-end; they cannot bypass this.
replyTo is set to the parent's email. When admissions hits Reply in their inbox, they reply to the parent not to themselves.

5. Set the Edge Function Secrets

pnpm supabase secrets set RESEND_API_KEY=re_your_actual_key
pnpm supabase secrets set ADMISSIONS_EMAIL=admissions@aurora-school.in
pnpm supabase secrets set FROM_EMAIL="Aurora School <onboarding@resend.dev>"

(Replace with your actual values. The FROM_EMAIL uses onresend.dev for now — replace with your real verified domain once you add one.)

Deploy the function:

pnpm supabase functions deploy contact-inquiry

You'll get a URL like:

https://abcdefghijklmnop.supabase.co/functions/v1/contact-inquiry

Save that URL — we'll use it in the frontend.

6. Add the Function URL to `.env.local`

In your project root, create .env.local (it's already in .gitignore, so it won't be committed):

NEXT_PUBLIC_CONTACT_FUNCTION_URL=https://abcdefghijklmnop.supabase.co/functions/v1/contact-inquiry
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGc...your-anon-key...

Get the anon key from your Supabase dashboard → Settings → API.

Restart pnpm dev so Next picks up the new env vars.

7. Install Form Dependencies

pnpm add react-hook-form zod @hookform/resolvers

These three are the standard form stack in our world:

react-hook-form — manages form state and validation lifecycle.
zod — defines the validation schema in TypeScript.
@hookform/resolvers — glues them together so RHF uses Zod for validation.

8. Build the Form Component

Create src/components/InquiryForm.tsx:

'use client'
 
import { useState } from 'react'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
 
const InquirySchema = z.object({
  name:    z.string().min(2, "Please enter your full name"),
  email:   z.string().email("Please enter a valid email"),
  grade:   z.string().min(1, "Please select your child's grade"),
  message: z.string().min(10, "A short message — at least 10 characters"),
})
 
type InquiryInput = z.infer<typeof InquirySchema>
 
const GRADES = [
  'Nursery', 'LKG', 'UKG',
  'Grade 1', 'Grade 2', 'Grade 3', 'Grade 4', 'Grade 5',
  'Grade 6', 'Grade 7', 'Grade 8', 'Grade 9', 'Grade 10',
  'Grade 11', 'Grade 12',
]
 
export function InquiryForm() {
  const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle')
  const [errorMsg, setErrorMsg] = useState<string>('')
 
  const { register, handleSubmit, formState: { errors }, reset } = useForm<InquiryInput>({
    resolver: zodResolver(InquirySchema),
  })
 
  async function onSubmit(data: InquiryInput) {
    setStatus('submitting')
    setErrorMsg('')
    try {
      const res = await fetch(process.env.NEXT_PUBLIC_CONTACT_FUNCTION_URL!, {
        method:  'POST',
        headers: { 'content-type': 'application/json', authorization: `Bearer ${process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY}` },
        body:    JSON.stringify(data),
      })
      if (!res.ok) {
        const err = await res.json().catch(() => ({ error: 'Something went wrong' }))
        throw new Error(err.error)
      }
      setStatus('success')
      reset()
    } catch (e) {
      setStatus('error')
      setErrorMsg(e instanceof Error ? e.message : 'Something went wrong')
    }
  }
 
  if (status === 'success') {
    return (
      <div className="bg-emerald-50 border border-emerald-200 rounded-2xl p-8 text-center">
        <p className="font-display text-2xl text-emerald-900 mb-2">Inquiry received</p>
        <p className="text-emerald-800">We'll be in touch within 2 business days. Check your email.</p>
        <button
          onClick={() => setStatus('idle')}
          className="mt-4 text-sm text-emerald-700 underline hover:text-emerald-900"
        >
          Send another inquiry
        </button>
      </div>
    )
  }
 
  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 text-left">
      <Field label="Your name" error={errors.name?.message}>
        <input {...register('name')} type="text" autoComplete="name"
          className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo focus:ring-2 focus:ring-indigo/20 outline-none" />
      </Field>
 
      <Field label="Email" error={errors.email?.message}>
        <input {...register('email')} type="email" autoComplete="email"
          className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo focus:ring-2 focus:ring-indigo/20 outline-none" />
      </Field>
 
      <Field label="Child's grade" error={errors.grade?.message}>
        <select {...register('grade')}
          className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo focus:ring-2 focus:ring-indigo/20 outline-none bg-white">
          <option value="">Select grade</option>
          {GRADES.map(g => <option key={g} value={g}>{g}</option>)}
        </select>
      </Field>
 
      <Field label="Message" error={errors.message?.message}>
        <textarea {...register('message')} rows={4}
          className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo focus:ring-2 focus:ring-indigo/20 outline-none resize-none" />
      </Field>
 
      {status === 'error' && (
        <p className="text-sm text-red-600">{errorMsg || 'Something went wrong. Please try again.'}</p>
      )}
 
      <button type="submit" disabled={status === 'submitting'}
        className="w-full bg-indigo hover:bg-indigo-hover text-white font-semibold px-6 py-3 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
        {status === 'submitting' ? 'Sending...' : 'Send inquiry'}
      </button>
    </form>
  )
}
 
function Field({ label, error, children }: { label: string; error?: string; children: React.ReactNode }) {
  return (
    <label className="block">
      <span className="text-sm font-medium text-gray-700 mb-1.5 block">{label}</span>
      {children}
      {error && <span className="text-sm text-red-600 mt-1 block">{error}</span>}
    </label>
  )
}

Look at the key patterns:

'use client' at the top. This component uses useState and form interactivity, so it must be a Client Component.
Zod schema first, types second. z.infer<typeof InquirySchema> gives us InquiryInput automatically — no duplicate type definitions.
State machine for status. idle → submitting → success | error. Easier to reason about than booleans.
Generic <Field> helper to avoid repeating label + input + error JSX 4 times.
No any. Every value is typed.

9. Drop the Form into the Admissions Page

Open src/app/admissions/page.tsx. Find the placeholder section with [Inquiry form goes here]. Replace it:

import { InquiryForm } from '@/components/InquiryForm'
 
// ...inside the JSX, replace the placeholder div with:
<div className="max-w-md mx-auto">
  <InquiryForm />
</div>

Save. Visit http://localhost:3000/admissions and scroll to the bottom. The form is there.

Try it:

Submit with empty fields. You see inline red errors.
Type a bad email like notanemail. Inline error.
Fill everything correctly. "Sending..." appears on the button. After ~2 seconds: "Inquiry received."
Check your admissions inbox. The email arrives.

If any step fails, open the browser DevTools network tab, click the failed contact-inquiry request, and look at the response. Common issues:

401 Unauthorized → forgot to send the anon key in the authorization header.
500 → check the Supabase function logs (pnpm supabase functions logs contact-inquiry).
"Failed to fetch" → check the function URL in .env.local.

10. Test on Mobile

Open Chrome DevTools mobile emulation. Fill the form on a mobile-sized viewport. Common issues:

Input fields too narrow for the on-screen keyboard.
Select dropdown shows native iOS picker — that's actually fine, parents will know how to use it.
Submit button is reachable above the keyboard.

Fix anything broken. The form should work on a real phone before you call this done.

11. Commit and Push

git add .
git commit -m "working contact form with Resend edge function"
git push

After Vercel rebuilds, open https://aurora-school.vercel.app/admissions, scroll to the form, and submit. The email should arrive in admissions. Your site is no longer a brochure.

12. What You Practised

This page covered the most concentrated technical territory in Project 2:

Edge Functions — code that runs on Supabase's servers, not in the browser.
Environment variables — secret values that live outside your code.
CORS — how browsers decide what's allowed to talk to what.
Zod schemas — the same validation logic shared between front and back.
Form state machine — idle / submitting / success / error — instead of boolean spaghetti.
React Hook Form — the de facto form library in the React ecosystem.
Resend — a transactional email service that just works.
Server-side validation — never trust the client.

This pattern repeats on every form you build for the rest of your career. Pat yourself on the back. This is the line Project 1 could not cross.

The Working Contact Form

1. Set Up Resend

2. Set Up the Supabase Project

3. Install the Supabase CLI

4. Create the Edge Function

5. Set the Edge Function Secrets

6. Add the Function URL to `.env.local`

7. Install Form Dependencies

8. Build the Form Component

9. Drop the Form into the Admissions Page

10. Test on Mobile

11. Commit and Push

12. What You Practised

Next: Deploy and the home page

On this page

The Working Contact Form

1. Set Up Resend

2. Set Up the Supabase Project

3. Install the Supabase CLI

4. Create the Edge Function

5. Set the Edge Function Secrets

6. Add the Function URL to `.env.local`

7. Install Form Dependencies

8. Build the Form Component

9. Drop the Form into the Admissions Page

10. Test on Mobile

11. Commit and Push

12. What You Practised

Next: Deploy and the home page

On this page