FormRill
  1. AI builders
  2. v0

v0 contact form not sending? Add a real endpoint

The form looks finished in the preview, but clicking Send does nothing, or only logs the values to the console. v0 is good at generating the UI for a contact form in React with Next.js. The form it hands you is usually the interface, with a submit handler that you are expected to connect to something.

Next: your form URL and a ready-to-paste prompt appear right away, set to email this address. No password; we email you a sign-in link. Free for 500 submissions a month, no card.

Why it doesn’t send

Generated components focus on layout and state. Unless you ask for it, there is no route handler, no email provider and no storage behind the form, so submit does nothing useful once you run it for real.

In a Next.js app you could write an API route and wire up an email service. If you would rather not own that, a client component can post directly to FormRill, with no server code in your repo.

Paste this into v0

Paste it into the v0 chat for the generation that has your contact form, then add the updated component to your project.

prompt for v0

Make my contact form send submissions to FormRill at https://api.formrill.com/YOUR_FORM_ID/submit. Make the form a client component ("use client") with a status state (idle, sending, sent, error), and keep my shadcn/ui fields. Keep my existing fields and styling, name the email input "email", and add <input type="checkbox" name="botcheck" hidden /> as a honeypot. If the form submits with JavaScript, send FormData with fetch and the header Accept: application/json, show success only when the JSON response has ok: true, and show an error otherwise. Do not add a backend, API route, edge function, environment variables or API keys.

Replace YOUR_FORM_ID with the ID from your form URL after signup. After you sign up, your dashboard shows this prompt with your real form URL already filled in.

v0 gotcha: In the Next.js App Router, an onSubmit handler only runs in a client component. If the form sits in a server component, the handler never fires, so the prompt asks for "use client".

What it produces

'use client'
import { useState } from 'react'

export function ContactForm() {
  const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle')

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    setStatus('sending')
    const res = await fetch('https://api.formrill.com/YOUR_FORM_ID/submit', {
      method: 'POST',
      headers: { Accept: 'application/json' },
      body: new FormData(e.currentTarget), // includes the hidden botcheck field
    })
    const data = await res.json().catch(() => ({}))
    setStatus(res.ok && data.ok ? 'sent' : 'error')
  }

  // render <form onSubmit={onSubmit}> with your fields
}

Three steps

  1. Sign up and copy your form URL; swap YOUR_FORM_ID in the prompt.
  2. Paste the prompt into v0 against the contact form component and apply the change to your project.
  3. Run it, submit a test, and check your inbox and dashboard before you deploy.

Questions

Do I need a Next.js API route?

No. The client component posts to FormRill directly. If you prefer to keep requests server-side, you can post the same FormData from a server action instead.

Can I keep my shadcn/ui form components?

Yes. Only the submit handler and a hidden honeypot field change. Fields keep their styling.

Where do the messages go?

To your inbox by default, and to the dashboard inbox. You can add Telegram too, free.

Is it free?

The free plan covers 500 submissions a month across unlimited forms; pricing lists what Pro adds.

Fix your v0 form in one paste

Free up to 500 submissions a month and unlimited forms. No server, no credit card.

Start free

Other AI builders