DropForm with Next.js
Integrate DropForm into a Next.js app. Learn client-side submission, server-side proxy (recommended for secrets), and file uploads with FormData.
Next.js can submit directly to DropForm’s Submission API: POST https://api.dropform.app/s/{uid}.
In most cases you can submit from the browser. If you ever need to attach secrets (for example, adding your own spam checks, enriching data, or calling other APIs), use a server route as a proxy.
What you need
- Your DropForm submission endpoint:
https://api.dropform.app/s/{uid} - A Next.js app (App Router recommended, but patterns apply to Pages Router too)
Option A: Client-side submit (simplest)
This works well for public contact forms and typical website forms. Use FormData so file uploads work.
Client component example
Option B: Server-side proxy (recommended when you need secrets)
If you want to add custom validation, verify CAPTCHAs, or enrich submissions, proxy the submission through a Next.js Route Handler. Your UI still submits FormData to your own route, and your route forwards it to DropForm.
Route Handler: app/api/contact/route.ts
Client submit to your route
JSON mode (optional)
If you don’t upload files, you can send JSON directly to DropForm. This is useful for fully custom UIs.
Example: JSON submit
File uploads
File uploads are supported via multipart/form-data. Use FormData and do not set Content-Type manually. If you want to guarantee JSON response mode for multipart uploads, include a data part with Content-Type: application/json.
Example: force multipart JSON mode (optional)
Common gotchas
- Do not set Content-Type for FormData: the browser will include the boundary.
- Prefer the server proxy when you need secrets or extra processing.
- Handle errors: DropForm returns JSON in JSON mode (e.g., 400 validation errors).