Home / Next.js contact form
Add a contact form to Next.js — get submissions by email & Slack
The easiest way to handle Next.js form submissions without building a backend. Connect your form to Formcatch and receive every message by email, Slack, and a dashboard.
Create your free form endpoint
1. Create a form (free) and copy your endpoint
Sign up and create a form — you'll get a URL like https://forms.mgm-llc.org/f/YOUR_FORM_ID.
2. Paste this into your Next.js project
"use client";
export default function ContactForm() {
async function onSubmit(e) {
e.preventDefault();
await fetch("https://forms.mgm-llc.org/f/YOUR_FORM_ID", {
method: "POST",
headers: { Accept: "application/json" },
body: new FormData(e.currentTarget),
});
}
return (
<form onSubmit={onSubmit}>
<input name="email" type="email" required />
<textarea name="message" required />
<button>Send</button>
</form>
);
}
// No API route needed — Formcatch handles the backend.
That's it. Submissions are stored in your dashboard and sent to your email/Slack. Add _redirect for a thank-you page, or send Accept: application/json for AJAX.
Why Formcatch for Next.js
- No backend or API route to build or host
- Spam filtering, email & Slack notifications
- Free to start; Pro at $9/mo