DropForm with Nuxt
Integrate DropForm into a Nuxt app. Submit forms client-side with fetch, handle success/errors, and upload files using FormData.
Nuxt apps can submit directly to DropForm’s Submission API: POST https://api.dropform.app/s/{uid}.
The easiest approach is using fetch + FormData, which supports text fields and file uploads. You can also proxy through a Nuxt server route if you want to add server-side checks.
What you need
- Your DropForm submission endpoint:
https://api.dropform.app/s/{uid} - A Nuxt app (Nuxt 3)
Option A: Client-side submit (simplest)
This is a classic client-side submit with FormData. It provides loading state and inline status messages.
Example: Nuxt page component
Option B: Server-side proxy (optional)
Use a server route when you need secrets or additional processing (CAPTCHA checks, enrichment, custom validation). The client submits to your server route, and your server route forwards the submission to DropForm.
Server route: server/api/contact.post.ts
Client submit to your route
JSON mode (optional)
If you don’t upload files, you can send JSON to DropForm directly.
Example: JSON submit
File uploads
File uploads are supported via multipart using FormData. 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 set the multipart boundary.
- Prefer server proxy when you need secrets or custom processing.
- Handle validation errors: DropForm returns 400 with JSON in JSON mode.