Submit forms from Next.js using fetch in a client component. Works with App Router (Next.js 13+), Pages Router, and server actions.
Go to flowqen.com/create and create a form in 10 seconds. No account needed. Copy the form ID from the URL.
The simplest approach — just paste this HTML into your Next.js project:
<form action="https://flowqen.com/api/f/YOUR_FORM_ID" method="POST">
<input type="text" name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<textarea name="message" placeholder="Message" required></textarea>
<button type="submit">Send</button>
</form>Use Next.js's native patterns for a better developer experience:
"use client";
import { useState } from "react";
export default function ContactForm() {
const [sent, setSent] = useState(false);
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
const form = e.currentTarget;
const res = await fetch("https://flowqen.com/api/f/YOUR_FORM_ID", {
method: "POST",
body: new FormData(form),
});
if (res.ok) { setSent(true); form.reset(); }
}
if (sent) return <p>Thank you! We'll be in touch.</p>;
return (
<form onSubmit={handleSubmit}>
<input type="text" name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<textarea name="message" placeholder="Message" required />
<button type="submit">Send</button>
</form>
);
}Submit a test entry. Go to your Flowqen dashboard to see the submission. Set up email notifications, Slack alerts, or any of our 22+ integrations.