React Forms with Next.js
Next.js supports both client-side form handling (with fetch) and Server Actions (App Router). Both work seamlessly with Formboost — no API route, no backend code.
Prerequisites
- A Formboost account (sign up free)
- A Next.js project (App Router or Pages Router)
Step 1: Create a Formboost Endpoint
Log in to your Formboost dashboard and create a new endpoint. Copy the endpoint URL:
https://formboost.app/f/YOUR_ENDPOINT_ID
Step 2: Add the Form
Option A — Client Component with fetch (App & Pages Router)
1// components/ContactForm.tsx
2"use client";
3
4import { useState } from "react";
5
6type Status = "idle" | "submitting" | "success" | "error";
7
8export function ContactForm() {
9 const [status, setStatus] = useState<Status>("idle");
10
11 async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
12 e.preventDefault();
13 setStatus("submitting");
14
15 const form = e.currentTarget;
16 const data = Object.fromEntries(new FormData(form));
17
18 try {
19 const res = await fetch("https://formboost.app/f/YOUR_ENDPOINT_ID", {
20 method: "POST",
21 headers: { "Content-Type": "application/json" },
22 body: JSON.stringify(data),
23 });
24
25 if (res.ok) {
26 setStatus("success");
27 form.reset();
28 } else {
29 setStatus("error");
30 }
31 } catch {
32 setStatus("error");
33 }
34 }
35
36 return (
37 <form onSubmit={handleSubmit}>
38 <div>
39 <label htmlFor="name">Name</label>
40 <input type="text" id="name" name="name" required />
41 </div>
42 <div>
43 <label htmlFor="email">Email</label>
44 <input type="email" id="email" name="email" required />
45 </div>
46 <div>
47 <label htmlFor="message">Message</label>
48 <textarea id="message" name="message" rows={5} />
49 </div>
50
51 <button type="submit" disabled={status === "submitting"}>
52 {status === "submitting" ? "Sending…" : "Send"}
53 </button>
54
55 {status === "success" && <p>Message sent! We'll be in touch soon.</p>}
56 {status === "error" && <p>Something went wrong. Please try again.</p>}
57 </form>
58 );
59}Use it in any page:
1// app/contact/page.tsx
2import { ContactForm } from "@/components/ContactForm";
3
4export default function ContactPage() {
5 return (
6 <main>
7 <h1>Contact</h1>
8 <ContactForm />
9 </main>
10 );
11}Option B — Server Action (App Router)
Server Actions let you handle the form submission server-side without an API route. The POST goes from your Next.js server to Formboost — not directly from the browser.
1// app/contact/page.tsx
2export default function ContactPage() {
3 async function submit(formData: FormData) {
4 "use server";
5
6 const data = {
7 name: formData.get("name"),
8 email: formData.get("email"),
9 message: formData.get("message"),
10 };
11
12 await fetch("https://formboost.app/f/YOUR_ENDPOINT_ID", {
13 method: "POST",
14 headers: { "Content-Type": "application/json" },
15 body: JSON.stringify(data),
16 });
17 }
18
19 return (
20 <main>
21 <h1>Contact</h1>
22 <form action={submit}>
23 <div>
24 <label htmlFor="name">Name</label>
25 <input type="text" id="name" name="name" required />
26 </div>
27 <div>
28 <label htmlFor="email">Email</label>
29 <input type="email" id="email" name="email" required />
30 </div>
31 <div>
32 <label htmlFor="message">Message</label>
33 <textarea id="message" name="message" rows={5} />
34 </div>
35 <button type="submit">Send</button>
36 </form>
37 </main>
38 );
39}Replace YOUR_ENDPOINT_ID with your actual endpoint ID in both options.
Step 3: Test It
Run npm run dev and submit the form. The submission will appear in your Formboost dashboard within seconds.