Add a Working Contact Form to Any Next.js Application
Connect your Next.js forms to Lucid Forms. Works with App Router, Pages Router, Server Actions, and static site exports. Zero API routes or serverless database configuration required.
// app/actions.ts'use server'import { redirect } from 'next/navigation'export async function submitContactForm(formData: FormData) {const response = await fetch("https://api.lucidforms.co/f/{form_id}", {method: "POST",body: formData,headers: { "Accept": "application/json" }});if (response.ok) {redirect('/thank-you')}}
How it works
Whether you wrote your Next.js form component by hand or used an AI builder, connecting a working contact form takes under 2 minutes.
Get your form link
Sign up for free and copy your unique form link from the Lucid Forms dashboard.
Add it to your website
Paste the form link into your Next.js JSX code, or give it to an AI tool like Cursor, Claude, or Lovable and let it build the form for you.
Receive submissions
Every time someone fills out your form, you'll get a notification in your inbox, Slack, or Notion, with built-in spam filtering.
Let AI Build Your Next.js Contact Form
Give your form link to any AI website builder. It generates the Next.js component. Lucid Forms handles the submissions.
Create a modern, styled Next.js contact form component.
Use this submission endpoint:
https://api.lucidforms.co/f/{form_id}
Requirements:
- Include name, email, and message fields
- Use Next.js Server Action or standard POST action
- Make it responsive with Tailwind CSS
Everything your Next.js contact form needs to actually work
Most Next.js contact forms look great but require complex backend setups, API routes, or serverless functions to process and store submissions. Lucid Forms handles the backend, routing entries to your inbox, Slack, Notion, and more.
Get submissions in your inbox
Every form entry goes straight to your email. No setup, no configuration: it just works from the moment you connect.
Skip writing API routes or Route Handlers
Avoid the boilerplate of writing custom route handlers, SMTP setup, or database connections in Next.js. Lucid Forms processes your submissions directly from your frontend or Server Actions.
Spam protection built in
Bots get blocked automatically. Your visitors never see annoying CAPTCHAs, and your inbox stays clean.
Send form data anywhere
Route submissions to Notion, Google Sheets, Slack, or any webhook. Set it up once and every entry flows to the right place.
Lucid Forms vs. Doing It Yourself
See why thousands of developers skip the headache and use Lucid Forms instead.
| Feature / Requirement | The Next.js DIY Approach | Lucid Forms Backend |
|---|---|---|
| Server Setup | Write custom API Route Handlers, configure databases, handle environment variables | Zero Server Setup (✓) |
| Email Delivery | Configure third-party SMTP providers, set up SPF/DKIM records, write email templates | Instant Email Delivery (✓) |
| Static Hosting Support | Requires Node.js server runtime or edge runtime configuration | 100% Static & Edge Compatible (✓) |
| AI-Generated Code Support | AI cannot easily set up secure backend routes and database schemas | Works Out-of-the-box (✓) |
| Spam Protection & Filtering | Integrate third-party CAPTCHA packages, manage secret keys, verify tokens | Automatic Honeypots & ML (✓) |
Add Contact Forms to Astro, Next.js, and Plain HTML Sites
Connect your forms effortlessly. Lucid Forms provides platform-agnostic endpoints that work across all modern hosting environments, frontend frameworks, and AI builders.
Plain HTML
Paste the form endpoint directly into your index.html. No dependencies or frameworks needed.
Astro
Add contact forms to Astro components. Works perfectly with serverless adapters or static exports.
Next.js & React
Submit React form states or use standard post actions in your Next.js app router forms.
Webflow & CMS
Connect Webflow forms, Wix custom inputs, or WordPress layouts to capture leads directly.
AI-Generated Sites
Claude, Cursor, ChatGPT, and Lovable can write static frontend code but need a backend to process data.
Static Site Gen
Add contact pages to Hugo, Jekyll, Gatsby, or Vitepress sites. Keep your site completely static.
Wix & Shopify
Add custom contact forms to e-commerce templates and site builders without extra plugins.
Deploy Anywhere
Host on Vercel, Netlify, Cloudflare Pages, GitHub Pages, or shared hosting. The forms will work.
Frequently Asked Questions
Everything you need to know about setting up Next.js contact forms, spam protection, and framework support.
How do I make my Next.js contact form actually send messages?
Next.js forms require a backend to process submissions and send notifications. With Lucid Forms, you can connect your form using a simple JSX <form action='endpoint' method='POST'> structure, submit entries inside a Next.js Server Action, or send AJAX requests from a client component. Lucid Forms handles email routing, spam protection, and database storage.
Can I use Next.js Server Actions with Lucid Forms?
Yes! You can define a Server Action ('use server') that reads the FormData, sends a POST request using fetch() to your Lucid Forms endpoint, and handles redirects or toast notifications on the frontend. This keeps your API keys secure and allows for progressive enhancement.
Do I need to build API routes or Route Handlers to process forms?
No. Lucid Forms eliminates the need to write custom Next.js API routes (Pages Router) or Route Handlers (App Router). Just point your frontend form action or server-side fetch calls to our endpoint, and we will handle the rest, routing submissions to your inbox or other tools.
Does this work with static site exports (next export)?
Yes, absolutely. If you deploy a fully static export of your Next.js site (e.g., hosted on GitHub Pages, Cloudflare Pages, Netlify, or S3), you cannot run server-side code. By using a standard HTML form POST or client-side fetch to Lucid Forms, you can have a working contact form on a 100% static Next.js website.
Does Lucid Forms protect Next.js forms from spam?
Yes. Every Lucid Forms endpoint has built-in automated spam filtering. We use silent honeypots, rate-limiting, and machine learning to block bots without requiring annoying reCAPTCHA checkboxes, preserving a clean user experience.
Does this work with AI builders like Cursor, Claude, or Lovable?
Yes! If you prompt your AI builder to write a Next.js form that posts to your Lucid Forms URL, it will generate the component with the correct fields and styling, and Lucid Forms will handle the backend processing.
Your website is ready.
Connect your Next.js contact form in 2 minutes.
No servers, no coding, no headaches. Join thousands of developers who use Lucid Forms.
✓ 10,000 submissions included