DropForm with SvelteKit
Integrate DropForm into a SvelteKit app. Learn client-side submission, optional server-side proxy, and file uploads using FormData.
SvelteKit apps can submit directly to DropForm’s Submission API: POST https://api.dropform.app/s/{uid}.
For most public forms, submit directly from the browser using fetch + FormData. If you need secrets or extra processing (CAPTCHA verification, enrichment, custom validation), proxy through a SvelteKit endpoint.
What you need
- Your DropForm submission endpoint:
https://api.dropform.app/s/{uid} - A SvelteKit app
Option A: Client-side submit (simplest)
This is a Svelte component that submits with FormData. It includes loading state and inline status messages.
Example: Svelte component
Option B: Server-side proxy (optional)
Use a proxy endpoint when you want server-side checks or to keep secrets out of the browser. The client submits to your endpoint, and your endpoint forwards the request to DropForm.
Server endpoint: src/routes/api/contact/+server.js
Client submit to your endpoint
JSON mode (optional)
If you don’t upload files, you can submit JSON directly to DropForm.
Example: JSON submit
File uploads
File uploads work automatically with 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 sets the multipart boundary.
- Prefer server proxy when you need secrets or extra processing.
- Handle 400 errors: DropForm returns JSON in JSON mode.