How to Add a Contact Form to Next.js

Create a FormsList form endpoint

Sign up for a free FormsList account and create a new form. You will receive a unique form endpoint URL that accepts POST requests. Copy the endpoint URL — you will use it as the action attribute of your HTML form or as the fetch URL in your Next.js component.

// Your endpoint will look like this:
// https://formslist.com/f/YOUR_FORM_HASH

Create the contact form component

Create a new React component for your contact form. We use a simple controlled form with name, email, and message fields. The component uses React state to manage the submission status and display feedback to the user.

"use client";

import { useState, FormEvent } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">("idle");

  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("sending");

    const form = e.currentTarget;
    const data = new FormData(form);

    try {
      const res = await fetch("https://formslist.com/f/YOUR_FORM_HASH", {
        method: "POST",
        body: data,
      });

      if (res.ok) {
        setStatus("sent");
        form.reset();
      } else {
        setStatus("error");
      }
    } catch {
      setStatus("error");
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
      <div>
        <label htmlFor="name" className="block text-sm font-medium">Name</label>
        <input
          type="text"
          id="name"
          name="name"
          required
          className="mt-1 block w-full rounded border p-2"
        />
      </div>
      <div>
        <label htmlFor="email" className="block text-sm font-medium">Email</label>
        <input
          type="email"
          id="email"
          name="email"
          required
          className="mt-1 block w-full rounded border p-2"
        />
      </div>
      <div>
        <label htmlFor="message" className="block text-sm font-medium">Message</label>
        <textarea
          id="message"
          name="message"
          rows={4}
          required
          className="mt-1 block w-full rounded border p-2"
        />
      </div>
      <button
        type="submit"
        disabled={status === "sending"}
        className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 disabled:opacity-50"
      >
        {status === "sending" ? "Sending..." : "Send Message"}
      </button>
      {status === "sent" && <p className="text-green-600">Message sent successfully!</p>}
      {status === "error" && <p className="text-red-600">Something went wrong. Please try again.</p>}
    </form>
  );
}

Add the form to your page

Import the ContactForm component into any Next.js page or layout. Because the component uses the "use client" directive, it works seamlessly inside both the App Router and the Pages Router. Place it wherever you want the contact form to appear.

import ContactForm from "@/components/ContactForm";

export default function ContactPage() {
  return (
    <main className="mx-auto max-w-2xl py-12 px-4">
      <h1 className="text-3xl font-bold mb-6">Contact Us</h1>
      <p className="mb-8 text-gray-600">
        Fill out the form below and we will get back to you within 24 hours.
      </p>
      <ContactForm />
    </main>
  );
}

Test and customize notifications

Submit a test message through your form and verify it arrives in your FormsList dashboard. From the dashboard you can enable email notifications, set up auto-responders, and connect integrations like Slack or Google Sheets. Your Next.js contact form is now fully functional without any backend code.