Next.js Contact Form the Right Way (App Router, 2026)

The fastest way to ship a working contact form in Next.js App Router isn't a server action — it's not writing backend code at all.

The plain version (zero JavaScript)

Since a FormBridge endpoint accepts a standard POST, a plain server-rendered form component works with no client-side code:

export default function ContactForm() {
  return (
    <form action="https://app.formbridge.ai/api/forms/fb_8h2k9p" method="POST">
      <input name="full-name" placeholder="Full name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <button type="submit">Send</button>
    </form>
  )
}

No API route. No server action. No email service to configure. The browser submits directly to the endpoint.

The client-component version, if you want custom UX

If you want a loading state or to stay on the page after submit, make it a client component and fetch the same endpoint:

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

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

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    setStatus('sending')
    const data = new FormData(e.currentTarget)
    await fetch('https://app.formbridge.ai/api/forms/fb_8h2k9p', {
      method: 'POST',
      body: data,
      headers: { Accept: 'application/json' },
    })
    setStatus('sent')
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="full-name" placeholder="Full name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <button disabled={status === 'sending'}>
        {status === 'sent' ? 'Sent!' : 'Send'}
      </button>
    </form>
  )
}

What you get without writing it

Once the endpoint receives a submission, FormBridge runs its normal pipeline — spam check, email notification, and (if configured) an autoresponder back to whoever filled out the form. See the field naming guide if you want hyphenated field names to auto-format nicely in your inbox.