Guides/How to add a contact form to Next.js

How to add a contact form to Next.js

One API call. No backend code. Five minutes.

Updated March 2026

Why are you writing a database schema for a contact form? Seriously. You need name, email, message. That is three fields. The usual Next.js approach has you setting up Prisma, writing an API route, handling validation, building some admin view to see the messages. That is a lot of plumbing for three fields. Sutrena skips all of it. Get a trial key, create a form, POST submissions from your app. Sutrena stores the data and you can query it via API or export as CSV.

1. Get a trial API key

No signup. Hit the trial endpoint, get a key back. 10 projects, 100 submissions per form. Claim within 24 hours to keep your account.

curl -X POST https://sutrena.com/api/trial

# Response:
# {
#   "apiKey": "st_trial_abc123...",
#   "expiresAt": "2026-03-09T00:00:00.000Z",
#   "plan": "free"
# }

2. Create a contact form via API

Use the contact preset. You get name, email, and message fields already wired up.

curl -X POST https://sutrena.com/api/forms \
  -H "Authorization: Bearer st_trial_abc123" \
  -H "Content-Type: application/json" \
  -d '{
    "workflowId": "contact"
  }'

# Response includes:
# {
#   "id": "frm_xyz789",
#   "hostedUrl": "https://sutrena.com/f/frm_xyz789",
#   "fields": [...]
# }

3. Add the form to your Next.js page

A client component that collects form data and POSTs to Sutrena. No server action. No API route on your end. You build the HTML, Sutrena handles the rest.

"use client";
import { useState } from "react";

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

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("sending");
    const data = Object.fromEntries(new FormData(e.currentTarget));

    const res = await fetch(
      "https://sutrena.com/api/forms/frm_xyz789/submit",
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      }
    );

    setStatus(res.ok ? "sent" : "idle");
  }

  if (status === "sent") return <p>Thanks! We will be in touch.</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <button type="submit" disabled={status === "sending"}>
        {status === "sending" ? "Sending..." : "Send"}
      </button>
    </form>
  );
}

4. Verify submissions via API

Fetch submissions to confirm everything is working. You can also export as CSV on paid plans.

# Fetch submissions via API:
curl https://sutrena.com/api/forms/frm_xyz789/submissions \
  -H "Authorization: Bearer st_trial_abc123"

FAQ

Do I need to set up a database for the contact form?

No. Sutrena stores submissions. Fetch via API or export as CSV on a paid plan.

Does this work with the Next.js App Router?

Yes. The example uses a client component with "use client". Works in both routers. You could also call Sutrena from a Server Action if you prefer.

Is the trial really free with no signup?

Yes. POST /api/trial. No auth, no email. Claim within 24 hours by creating an account to keep your data. Want more capacity? Upgrade to a paid plan.

Can I style the form however I want?

You own the HTML. Tailwind, CSS modules, whatever you want. Sutrena only handles the backend.

What happens if I do not claim my trial account?

Unclaimed accounts auto-delete after 24 hours. Create an account and upgrade to keep things running.

Related

Embed a form in React →Collect form data via API →Sutrena + Next.js stack →Pricing →

What is Sutrena?

Sutrena is the web runtime for AI agents. Forms, Pages, Analytics, Webhooks, Automations — all through 67 MCP tools and one REST API. Your agent creates web artifacts, humans interact with them, and your agent gets the data back. Use any one feature or all of them together.

Pages

Deploy HTML instantly

Forms

Collect structured data

Automations

DSL-based pipelines with 14 step types

Analytics

Privacy-first, no cookies

Webhooks

Slack, Discord, Telegram

Get started in two API calls

1. Get a trial key (no auth, no signup)

curl -X POST https://sutrena.com/api/trial

2. Create anything — a page, form, automation, or analytics site

# Create a form
curl -X POST https://sutrena.com/api/forms \
  -H "Authorization: Bearer st_trial_xxx" \
  -H "Content-Type: application/json" \
  -d '{"name": "waitlist", "fields": [{"name": "email", "label": "Email", "type": "email", "required": true}]}'

# Or deploy a page
curl -X POST https://sutrena.com/api/pages \
  -H "Authorization: Bearer st_trial_xxx" \
  -H "Content-Type: application/json" \
  -d '{"slug": "index", "title": "My Site", "html": "<h1>Live</h1>"}'
/llms.txt/api/schema/llms-full.txt/.well-known/mcp.json

Ready to build?

Get a trial API key instantly with no signup, or create an account for the full experience.

Start buildingAgent docs
How to add a contact form to Next.js — Sutrena | Sutrena