Why might the form need use client?

A component with submit event handlers and interactive pending or error state needs a client boundary in the Next.js App Router. Keep that boundary focused.

Is NEXT_PUBLIC_ private?

No. Values with that prefix are exposed to the browser bundle. Put only the public form endpoint there, never access keys or webhook secrets.

When should v0 generate a route handler?

Use one for private credentials, custom authorization, or application transactions. Standard public form delivery does not require it.

What must I test after export?

Run the real repository's checks and production build, then verify success and failure from the final deployed origin.

Does Form Plume work with v0?

Yes. Form Plume gives you one endpoint that works from your Next.js app. Start with the quickstart docs, then drop the endpoint into your form.

Where do v0 form submissions go in Form Plume?

Submissions are stored in your Form Plume dashboard, sent to your email, and can trigger integrations like webhooks, Slack, Discord, Google Sheets, Mailchimp, and ActiveCampaign. See the feature overview for the full flow.

Can I try Form Plume before wiring it into my Next.js app?

Yes. You can create an endpoint on the free plan, test it from localhost, preview, or a staging URL, and upgrade only when your form volume or team needs grow. Compare limits on pricing or ask a question on the contact page.

New:Build with AI agents

Give your v0 contact form a working backend.

Keep the interface v0 generated. Form Plume receives every submission, emails it to you, stores it safely, and delivers it to your other tools.

Free foreverNo credit cardFits the exported Next.js component

contact-form.tsx

"use client";
const response = await fetch(FORM_ENDPOINT, {
  method: "POST",
  headers: { Accept: "application/json" },
  body: new FormData(form),
});
if (!response.ok) throw new Error("Submission failed");

The full guide

From v0 preview to production proof.

Control the client boundary, protect real secrets, and verify the exported application rather than trusting preview alone.

v0 can build full-stack Next.js applications with server actions, route handlers, databases, and integrations. Those are valid tools. For a public contact or waitlist form, a browser-to-Form Plume request can be the smaller path, especially when you want the form to remain portable after exporting the component.

1
Create your Form Plume accountStart free and give your v0 form a hosted endpoint for email, submissions, spam filtering, uploads, integrations, and webhooks.Start free
2
Create the form and copy the endpointCopy the endpoint URL from Form Plume. It looks like https://api.formplume.com/f/your-slug
3
Connect it inside v0Review the generated files, test the v0 preview, then verify the exported application on its production origin. Send one test submission from the real v0 app or preview environment and confirm it reaches Form Plume.

Give v0 a precise prompt

Update the existing contact form without changing its visual design.
Post FormData from the client to this public endpoint:
https://api.formplume.com/f/your-public-slug
 
Add accessible pending, success, and error states. Keep values after failure and reset
only after a 2xx response. Every submitted control needs a name. Do not create a
server action, route handler, database table, or email-provider integration solely for
this form. Do not put private keys or webhook secrets in NEXT_PUBLIC_ variables.
Explain whether the edited component needs "use client", list changed files, and give
the exact commands to typecheck and build the exported Next.js project.

Client component example

"use client";
 
async function submit(form: HTMLFormElement) {
  const response = await fetch("https://api.formplume.com/f/your-public-slug", {
    method: "POST",
    headers: { Accept: "application/json" },
    body: new FormData(form),
  });
  if (!response.ok) throw new Error("Submission failed");
}

Interactive state and event handlers make this a client component in Next.js App Router. Keep the client boundary as low as practical rather than converting an entire page. A NEXT_PUBLIC_ value is bundled for the browser and is not secret; only the public endpoint belongs there.

v0 preview can hide export-time integration problems. After adding the component to the real repository, run that repository's typecheck and production build and test the deployed hostname.

When the full-stack path wins

Keep a server action or route handler when custom authorization, private API calls, or transactional updates belong in the request. Use the direct endpoint when the job is standard public form intake and introducing a server boundary adds no product value.

Verify after export

Inspect the diff for needless routes, packages, and broad "use client" boundaries.
Run the exported repository's actual lint, typecheck, tests, and next build.
Test success and verify the Form Plume record.
Test a bad slug and confirm values survive.
Deploy and retest from the final Vercel or custom-domain origin.

See the deeper Next.js guide and compare Lovable, Bolt, Replit, and Base44.

Primary sources

FAQ

v0 questions
before you export.

Yes. v0 can generate full-stack Next.js apps with server actions, route handlers, data, and integrations. A direct endpoint is an intentionally smaller option for standard public intake.

One line. Zero backend.

The form backend you don’t have to build.

Free foreverNo credit cardSet up in under a minute