How to Submit a React Form Without a Backend

Building a React form is easy. Figuring out where to send the data, how to validate it, and how to protect it from spam bots without setting up an entire Node.js server is where things get complicated.

In this guide, we'll look at the modern approach to React forms. By leveraging a headless form backend like FormsIntel, you can capture submissions, trigger webhooks, and analyze drop-off rates directly from your frontend components.

The Problem with Traditional APIs

Usually, when you build a contact form or a lead capture flow, you have to stand up an Express server, connect a Postgres database, write validation schemas using Zod or Yup, and then integrate an email service like Resend or SendGrid to notify your sales team. This is a massive amount of boilerplate for a simple form.

Not to mention, the moment you put a form on the internet, bots will find it. Implementing rate limiting and CAPTCHAs takes even more time away from building your core product.

The Headless Approach

A headless form backend decouples the UI from the data storage. You build your beautiful React form using TailwindCSS and Framer Motion, and simply `POST` the JSON data to a unique endpoint.

const handleSubmit = async (e) => {
  e.preventDefault();
  
  const response = await fetch('https://api.formsintel.com/v1/submit/YOUR_FORM_ID', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(formData)
  });

  if (response.ok) {
    setSuccess(true);
  }
};

This exact pattern works flawlessly with Next.js Server Actions, Remix actions, or just plain old `fetch` in a standard React app.

Why We Built FormsIntel Developer APIs

We designed FormsIntel specifically to handle this workload for developers. When you `POST` to a FormsIntel endpoint, we instantly handle:

• Spam Protection: Our Velocity Shield blocks bots without requiring your users to solve annoying CAPTCHAs.
• Data Validation: We ensure the incoming JSON matches your defined schema.
• Webhooks & Integrations: We can instantly forward the data to Slack, HubSpot, or Discord.
• Telemetry: We track form load times and partial submissions so you can see exactly where users drop off.

Ready to drop the backend? You can grab your free API endpoint from the FormsIntel dashboard today.