Next.js
Contact form for Next.js without building a backend.
App Router or Pages Router. Static export or serverful. Just drop in a form action and receive submissions by email and webhook.
How it works
Three steps to production forms.
Create a form
Generate a FormsFort access key in the dashboard.
Add to your page
Paste the HTML form into any Next.js page or component. No API route needed.
Deploy
Works with static export, Vercel, Netlify, or any host. Submissions route to email instantly.
Setup
Next.js page with contact form
export default function ContactPage() {
return (
<form action="https://api.formsfort.dev/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<input type="text" name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<textarea name="message" placeholder="Message" required></textarea>
<input type="checkbox" name="botcheck" style={{ display: "none" }} />
<button type="submit">Send</button>
</form>
);
} Migration
Migration checklist.
Move an existing form in minutes without rebuilding markup.
Create a FormsFort form and copy your access key.
Add a <form> element to your Next.js page or component.
Set the action to https://api.formsfort.dev/submit.
Add name, email, and message fields.
Include a botcheck honeypot for spam protection.
Build and deploy. No API route required.
FAQ
Common questions.
Does this work with Next.js App Router?
Yes. The form is standard HTML and works in both App Router and Pages Router.
Can I use this with static export?
Yes. FormsFort is an external API endpoint, so it works with output: 'export' without any server functions.
Do I need an API route?
No. The browser posts directly to FormsFort. If you need server-side validation, you can add an API route that proxies to FormsFort.
How do I handle the response?
For JavaScript submissions, fetch the endpoint and read the JSON response. For plain HTML forms, the user is redirected to the success page you configure.
Stop managing form servers.
Create a production form endpoint, migrate your first form free, and scale when you are ready.