Contact Form Design

Form Structure

Three fields, a textarea, and a submit button. Labels are visually hidden but present for screen readers. Inputs use native validation attributes.

Server Action (Next.js)

The form posts to a server action that validates input, sends an email, and returns a redirect or inline error. No client-side JavaScript beyond the browser's built-in form handling.

"use server";
import { redirect } from "next/navigation";

export async function submitContact(formData: FormData) {
  const name = formData.get("name") as string;
  const email = formData.get("email") as string;
  const subject = formData.get("subject") as string;
  const message = formData.get("message") as string;

  if (!name || !email || !subject || !message) {
    return { error: "All fields are required." };
  }

  // send email via Resend, SendGrid, etc.
  // await sendEmail({ name, email, subject, message });

  redirect("/thank-you");
}