Headless WordPress Forms Tutorial

Headless WordPress has no form handling to fall back on

In a headless setup, WordPress is the content source — exposed over the REST API or WPGraphQL — and the actual site is a separate frontend (Next.js, Astro, Gatsby, whatever you've chosen). The theme layer that a forms plugin would normally hook into isn't part of the request path at all: your frontend never loads WordPress's PHP runtime, so plugins built for wp-admin and the classic theme lifecycle have nothing to attach to.

That means there's no default form handling of any kind once you go headless — not a broken version, just none. Whatever handles submissions has to live entirely inside the frontend and post somewhere that isn't WordPress.

Wire the frontend form to a FormBridge endpoint

Because the form is decoupled from WordPress anyway, it doesn't need the CMS in the loop at all — point it straight at a FormBridge endpoint:

<form action="https://app.formbridge.ai/api/forms/fb_8h2k9p" method="POST">
  <input name="full-name" placeholder="Full name" />
  <input name="email" type="email" placeholder="Email" />
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Send</button>
</form>

This works as a plain form tag in any framework — a React/Next.js component, an Astro island, a Vue template — since it's a standard HTML POST, not something that depends on the frontend's JS runtime. If your frontend needs to submit via fetch instead of a native form submit (for a custom validation flow or a single-page transition), post the same field data as multipart/form-data or URL-encoded form data to the same endpoint.

What you get without touching WordPress

• A working inbox for submissions, completely separate from the WordPress admin you're using purely for content.
• Automatic spam scoring on every submission, plus optional honeypot, CAPTCHA, and an authorized domains allow-list.
• Notification emails and an autoresponder, configured once from the FormBridge dashboard rather than rebuilt per-frontend.
• File uploads via a standard file input and multipart/form-data, with no separate backend route to write and maintain.

Setting it up

Create a form endpoint in FormBridge, copy its URL, and use it as the action (or fetch target) for your form component. Since the endpoint accepts any field names, you don't need to coordinate anything with your WordPress content model — the form and the CMS stay entirely decoupled, which is the point of going headless in the first place.