DEV Community: Long N.

How to Build a Contact Form in Next.js (Without Building a Backend)

Long N. — Thu, 26 Mar 2026 01:30:00 +0000

Every Next.js project eventually needs a contact form.

And the first instinct is usually:

“I’ll just create an API route and send an email.”

That works.

But it’s also a whole project on its own.

You need to:

pick an email provider
manage API keys
deal with spam
handle failures
store submissions somewhere

All before you've written a single line of your actual product.

There’s a simpler way.

The options, quickly

When you search “Next.js contact form”, you’ll usually see three approaches:

Route Handler + email API (Resend, SendGrid, etc.)

Full control, but you own everything.
Server Actions

Cleaner DX, but you still handle email + spam yourself.
Form backend service

Send data to a hosted endpoint. It handles storage + email.

For most projects, especially landing pages, SaaS sites, and static apps, option 3 is the fastest path.

This guide walks through that approach.

The simplest version: HTML only

If you don’t need loading states or interactivity, you can use a plain HTML form with no JavaScript at all:

<form action="https://formtorch.com/f/YOUR_FORM_ID" method="POST">
  <input name="name" type="text" placeholder="Your name" required />
  <input name="email" type="email" placeholder="Your email" required />
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit">Send message</button>
</form>

That’s already a working form.

The browser handles submission, and you get redirected afterward.

Redirect to your own page

<input
  type="hidden"
  name="_redirect"
  value="https://yoursite.com/thank-you"
/>

For many use cases, this is enough.

But React apps usually want something more interactive.

A proper React contact form

Here’s a production-ready component with loading, success, and error states:

"use client";

import { useState } from "react";

type FormState = "idle" | "loading" | "success" | "error";

export function ContactForm() {
  const [state, setState] = useState<FormState>("idle");

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setState("loading");

    try {
      const data = new FormData(e.currentTarget);

      const res = await fetch("https://formtorch.com/f/YOUR_FORM_ID", {
        method: "POST",
        headers: { "X-Requested-With": "XMLHttpRequest" },
        body: data,
      });

      if (!res.ok) throw new Error();
      setState("success");
    } catch {
      setState("error");
    }
  }

  if (state === "success") {
    return (
      <div>
        <h3>Message sent.</h3>
        <p>Thanks for reaching out. I’ll get back to you soon.</p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name</label>
      <input id="name" name="name" required />

      <label htmlFor="email">Email</label>
      <input id="email" name="email" type="email" required />

      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" required />

      {state === "error" && <p>Something went wrong. Try again.</p>}

      <button disabled={state === "loading"}>
        {state === "loading" ? "Sending…" : "Send message"}
      </button>
    </form>
  );
}

Why this works well

FormData instead of JSON: Automatically captures all fields (including files).
X-Requested-With header: Ensures the response is JSON instead of an HTML redirect.
Loading + disabled button: Prevents double submissions.

Adding validation

You can layer client-side validation without changing the structure:

function validate(data: FormData) {
  const errors: Record<string, string> = {};

  if (!data.get("name")) errors.name = "Name is required";

  const email = String(data.get("email") ?? "");
  if (!email) errors.email = "Email is required";
  else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))
    errors.email = "Invalid email";

  if (!data.get("message")) errors.message = "Message is required";

  return errors;
}

Add noValidate to disable browser UI and control error rendering yourself.

Using react-hook-form

For more complex forms:

import { useForm } from "react-hook-form";

export function ContactForm() {
  const { register, handleSubmit, formState } = useForm();

  async function onSubmit(data: any) {
    const formData = new FormData();
    Object.entries(data).forEach(([k, v]) =>
      formData.append(k, String(v))
    );

    await fetch("https://formtorch.com/f/YOUR_FORM_ID", {
      method: "POST",
      headers: { "X-Requested-With": "XMLHttpRequest" },
      body: formData,
    });
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name", { required: true })} />
      <input type="email" {...register("email", { required: true })} />
      <textarea {...register("message", { required: true })} />

      <button disabled={formState.isSubmitting}>
        {formState.isSubmitting ? "Sending…" : "Send"}
      </button>
    </form>
  );
}

What about spam?

Every public form gets spam.

Common approaches:

CAPTCHA (bad UX)

honeypots

rate limiting

spam detection

A simple honeypot field:

<input name="_honeypot" style="display:none" />

Bots fill it. Humans don’t.

The takeaway

You don’t need to build a backend just to send a contact form email.

The practical setup:

Simple page → HTML form
React app → fetch + FormData
Complex form → react-hook-form

Everything else is just plumbing.

Optional: skipping the backend entirely

If you don’t want to deal with email APIs, spam filtering, or storing submissions, you can use a hosted form backend.

For example, Formtorch gives you:

a ready-to-use endpoint
email notifications
built-in spam filtering

So your form works without any server code.

If you want to try it:
👉 Formtorch

Either way, once you understand the flow, contact forms stop being a “setup chore” and become a solved problem.

HTML Contact Forms Don't Send Email (Here’s What Actually Does)

Long N. — Fri, 20 Mar 2026 20:41:14 +0000

HTML forms don’t send email. They never did.

Here’s what’s actually going on and how to build one that works.

If you've ever written a contact form in HTML and expected it to send an email, you've probably run into a frustrating discovery: it doesn't, not on its own.

HTML forms are just a way to package data and send it somewhere. The "sending email" part is always done by a server receiving that data and deciding what to do with it.

That server might be:

PHP code you wrote
a Node.js API
a serverless function
or a hosted service

But something has to be on the other end.

This guide walks through the full picture:

how HTML forms actually work
what your backend options are
and how to build a form that reliably delivers to your inbox

How HTML forms actually work

When a user submits a form, the browser collects the input values and sends them to the URL in the action attribute, using the HTTP method you specify.

<form action="https://example.com/contact" method="POST">
  <input name="email" type="email" />
  <button type="submit">Send</button>
</form>

That's it. The browser does a POST request to https://example.com/contact with email=user@example.com in the body. What happens next? Entirely up to whatever is running at that URL.

If nothing is running at that URL, you get a 404. If what's running there doesn't send an email, no email gets sent. The HTML itself has no opinion about email.

The `mailto:` trap

You might have seen this:

<form action="mailto:you@yoursite.com" method="POST"></form>

This doesn’t actually “send” anything.

It opens the user’s email client with a draft message.

Problems:

Many users don’t have a desktop email client configured
On mobile, it’s inconsistent or broken
You don’t get a copy of submissions
It feels… ancient

This isn’t a real solution. It’s a workaround that never really worked.

What you actually need

You need something to receive the form submission and handle it.

Here are your options:

Approach	You maintain	Works on static sites	Setup
PHP `mail()`	PHP server	❌	painful
Custom Node API	server + email service	❌	hours
Serverless function	function + API key	✅	30–60 min
Form backend service	nothing	✅	~2 min

For most projects, especially static sites, a form backend service is the simplest option.

You send the form data to a hosted endpoint, and it handles storage + email delivery.

Building the form

Here’s a complete, accessible HTML contact form:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Contact</title>
  </head>
  <body>
    <form action="https://formtorch.com/f/YOUR_FORM_ID" method="POST">
      <div>
        <label for="name">Name</label>
        <input
          id="name"
          name="name"
          type="text"
          placeholder="Jane Smith"
          required
          autocomplete="name"
        />
      </div>

      <div>
        <label for="email">Email</label>
        <input
          id="email"
          name="email"
          type="email"
          placeholder="jane@example.com"
          required
          autocomplete="email"
        />
      </div>

      <div>
        <label for="subject">Subject</label>
        <input
          id="subject"
          name="subject"
          type="text"
          placeholder="What's this about?"
        />
      </div>

      <div>
        <label for="message">Message</label>
        <textarea
          id="message"
          name="message"
          rows="6"
          placeholder="Your message…"
          required
        ></textarea>
      </div>

      <button type="submit">Send message</button>
    </form>
  </body>
</html>

A few important details

label elements with matching for/id pairs: screen readers use these to describe inputs. They also make the label clickable, which expands the tap target on mobile. Always write them.
type="email" on the email field: the browser validates the format before submitting and shows a numeric keyboard on mobile.
required attributes: the browser blocks submission if these fields are empty. It's not a substitute for server-side validation, but it catches honest mistakes immediately.
autocomplete hints: these tell the browser (and password managers) what kind of data goes in each field, enabling autofill. autocomplete="name" and autocomplete="email" are the ones that matter here.

Getting a form endpoint

You need a URL to send submissions to.

You can:

build your own backend
use a serverless function
or use a hosted form backend

For example, with Formtorch:

Create a form
Get an endpoint like this one using Formtorch:

   https://formtorch.com/f/abc123

Use it in your action attribute

Redirecting after submission

You’ll usually want to send users to a confirmation page.

<input
  type="hidden"
  name="_redirect"
  value="https://yoursite.com/contact/thank-you"
/>

After submission, users are redirected there.

Form best practices

A few things that are easy to skip:

Use <label> elements, not placeholder as labels.
Group related fields with <fieldset> and <legend>.
Don't disable the submit button after one click without visual feedback.
Put novalidate on the form if you're handling validation yourself in JavaScript.

What about spam?

Every publicly accessible contact form gets hit by spam. How quickly depends on how prominent your site is, but it happens to everyone eventually.

Options:

CAPTCHA (bad UX, use PoW CAPTCHA)
rate limiting
honeypots
spam detection services

If you’re building your own backend, you’ll need to handle this yourself.

Testing your form

Before shipping, test the full path:

Fill in all required fields and submit. Do you land on your thank-you page?
Check your Formtorch dashboard. Does the submission appear?
Check your email. Did the notification arrive?
Try submitting with required fields empty. Does the browser block it?
Try submitting with an invalid email. Does the browser catch it?

The full picture

HTML forms are just a delivery mechanism.

The real work happens at the endpoint.

The simplest path:

Build a proper HTML form
Point action to a working endpoint
Add a redirect
Set up email notifications

That’s it.

If you want to skip building and maintaining a backend entirely, you can use a form backend service.

For example, you can plug your form into something like Formtorch and get:

an endpoint URL instantly
email notifications out of the box
spam filtering handled for you

No server, no API keys, no infrastructure to maintain.

If you're curious, you can check it out here:

👉 Formtorch

Either way, once you understand how the request → endpoint → email flow works, forms stop feeling like magic (or frustration) and start feeling predictable.

DEV Community: Long N.

How to Build a Contact Form in Next.js (Without Building a Backend)

The options, quickly

The simplest version: HTML only

Redirect to your own page

A proper React contact form

Why this works well

Adding validation

Using react-hook-form

What about spam?

The takeaway

Optional: skipping the backend entirely

HTML Contact Forms Don't Send Email (Here’s What Actually Does)

How HTML forms actually work

The mailto: trap

What you actually need

Building the form

A few important details

Getting a form endpoint

Redirecting after submission

Form best practices

What about spam?

Testing your form

The full picture

The `mailto:` trap