Formserve
Features Templates Pricing Docs Blog FAQ
Sign in Create endpoint
← All guides

React guide

React contact form powered by Formserve

Use FormData from your existing React component and POST it to Formserve.

No backend API route Honeypot spam trap Works with any host

Overview

What you are building

React forms often already have the UI and validation you need. Formserve lets you keep the component and replace the backend work with a direct POST to an endpoint.

Requirements

Before you start

Client submit handler

Use onSubmit to prevent the default reload and show inline state.

FormData

Build FormData from the form element so fields and files can be sent naturally.

Named inputs

React state names do not matter unless the rendered inputs also have name attributes.

Friendly feedback

Show a success or error message after the request finishes.

Setup steps

Connect the form

1

Keep the existing component

Do not rebuild the form UI. Add only the endpoint URL and submit handler.

2

Create FormData

Read the submitted form with new FormData(event.currentTarget).

3

POST to Formserve

Send the FormData to the endpoint URL and avoid adding a new API route unless the app has a strong reason.

4

Reset after success

Clear the form and show a short confirmation message.

Code

Minimal HTML contract

Every framework eventually sends these same fields. If your tool generates a component, ask it to preserve styling and only adjust the submission behavior. 

function ContactForm() {
  async function handleSubmit(event) {
    event.preventDefault();
    const response = await fetch("https://formserve.io/f/YOUR_ENDPOINT_KEY", {
      method: "POST",
      body: new FormData(event.currentTarget)
    });

    if (response.ok) event.currentTarget.reset();
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="_honeypot" tabIndex="-1" autoComplete="off" style={{ position: "absolute", left: "-9999px" }} />
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button type="submit">Send</button>
    </form>
  );
}

Testing checklist

  • ✓ Check every input has a name attribute.
  • ✓ Show pending, success, and error states.
  • ✓ Test from the deployed domain.
  • ✓ Avoid exposing secrets; the endpoint URL is public.

Common mistakes

  • ! Only storing field values in React state and forgetting name attributes.
  • ! Creating an unnecessary Next/Express endpoint.
  • ! Not handling non-200 responses.
  • ! Resetting the form before the request succeeds.