Next.js Integration
Integrate Static Forms with your Next.js application
To add a contact form to a Next.js site without a backend, paste the form below into a page (for example app/contact/page.tsx), replace YOUR_API_KEY with the key from your Static Forms dashboard, and deploy. The form posts straight to https://api.staticforms.dev/submit, and each submission arrives in your inbox. There is no API route to write, it works with output: 'export', and it runs on the free plan.
This is a Server Component with no JavaScript, so it works in the App Router, the Pages Router and static exports alike. redirectTo is optional; without it the visitor sees a plain confirmation. Every submission goes through the built-in spam filter, and the honeypot field catches simple bots. To stay on the page and show your own success message, use the client component in the App Router section below.
Environment Variables
First, add your API key to your environment variables:
Environment Variables
Use NEXT_PUBLIC_ prefix for client-side variables. For Server Actions, you can use regular environment variables without the prefix.
App Router (Next.js 13+)
With the App Router, you can use Server Actions or client components:
Server Action Approach
Use Server Actions for form handling (recommended):
Server Actions and domain restriction
A Server Action sends the request from your server, so the key stays out of the browser. Domain restriction rejects requests without a browser Origin or Referer header, so leave it off for forms submitted this way.
Client Component Approach
For more control, use a client component:
Pages Router
For the Pages Router, use API routes or client-side submission:
API Route Approach
File Uploads
Handle file uploads with FormData. File uploads need the Starter plan or above:
Best Practices
Use Server Actions When Possible
Server Actions provide better security and don't expose API keys to the client.
Handle Loading States
Always show loading indicators and disable form fields during submission.
Provide User Feedback
Show success and error messages to keep users informed about submission status.
FAQ
Does this work on the free plan?
Yes. The snippet only uses Free plan features: 250 submissions every 30 days, 1 form endpoint, email delivery, the built-in spam filter, a honeypot field and reCAPTCHA v2. No credit card is needed.
How do I keep spam out?
Every submission is checked by the built-in spam filter on every plan. The snippet adds a hidden honeypot field (any field whose name contains "honeypot"); bots fill it in and those submissions are dropped. reCAPTCHA v2 is available on Free. Cloudflare Turnstile, hCaptcha, ALTCHA and reCAPTCHA v3 are available from the Starter plan.
Is it safe to put the API key in my HTML?
Yes. The form API key is meant to be public. It cannot read your submissions or sign in to your dashboard. From the Starter plan you can also restrict submissions to your own domains.
Does it work with next export and static hosting?
Yes. The plain form and the client component make the request from the browser, so they work with output: 'export' on any static host. Server Actions and API routes need a Next.js server, such as Vercel or Node.
