LogoDropForm

DropForm with React

Build a modern React contact form that submits to DropForm with fetch. Includes controlled inputs, loading state, inline errors, and file uploads.

DropForm Logo
January 16, 2026 by DropForm Team

This guide shows how to integrate DropForm with a React application using the Submission API: POST https://api.dropform.app/s/{uid}.

We’ll build a simple, production-friendly form component with:

  • controlled inputs
  • loading state
  • inline success/error messages
  • optional file upload

What you need

  • Your DropForm form UID (the endpoint looks like https://api.dropform.app/s/{uid})
  • A React app (Vite, Next.js, CRA — doesn’t matter)

React example (FormData)

The recommended approach is using FormData. It’s simple, works with file uploads, and matches what browsers already do for forms.

ContactForm component

Usage

JSON mode (optional)

If your form has no files and you prefer JSON, you can send application/json. This is useful when your UI isn’t a traditional HTML form or when your payload is assembled programmatically.

Example: submit JSON in React

File uploads

File uploads work automatically with the FormData approach. DropForm accepts multipart/form-data. If you want to guarantee JSON response mode for multipart, include a data part with Content-Type: application/json.

Example: force multipart JSON mode (optional)

Common gotchas

  • Don’t set Content-Type for FormData: the browser sets the multipart boundary automatically.
  • Use input name attributes: for plain HTML form submission; for React-controlled forms, it’s optional but still useful.
  • Handle validation errors: DropForm returns 400 with a JSON body in JSON mode.

Next steps