DropForm with JavaScript
Learn how to submit forms to DropForm using JavaScript (fetch). Covers JSON submissions, FormData submissions, file uploads, and clean success/error handling.
This guide shows how to submit form data to DropForm using JavaScript. DropForm’s Submission API is a single endpoint: POST https://api.dropform.app/s/{uid}.
JavaScript submission is ideal when you want a custom UX: inline success messages, error rendering, loading states, and AJAX-style forms.
What you need
- A DropForm form UID (your form endpoint contains the
{uid}) - A form in your page with inputs that have
nameattributes
Recommended approach: fetch + FormData
FormData is the easiest way to submit forms because it works for both normal fields and file uploads. It also preserves the browser’s field encoding automatically.
Example: async submit with loading + inline messages
Example HTML
In this mode, DropForm will typically return a JSON response (200 on success, 400 on validation error).
JSON submissions (application/json)
Use JSON submissions when you have a fully custom frontend model (not tied to an HTML form), or when you’re sending data from server-side code.
Example: submit JSON with fetch
JSON submissions return 200 on success and 400 on validation error, with a JSON body describing the result.
File uploads (multipart)
For file uploads, always use FormData. DropForm supports multipart uploads and can respond in JSON mode if you include a data part with Content-Type: application/json.
Example: submit a form including files
Optional: force multipart JSON mode
If you want to guarantee a JSON response for multipart uploads, append a data part containing JSON. DropForm detects this part and returns JSON.
Error handling patterns
You’ll typically want to handle:
- Network errors (fetch failed)
- Validation errors (HTTP 400)
- Success (HTTP 200)
Example: parse JSON errors safely
When should you use redirects instead?
If you’re building a simple static page or want the browser’s default submit behavior, consider using a plain HTML form action instead. Redirect mode is great for compatibility and avoids CORS because it’s not AJAX.
See: How to Send an HTML Form to a Form Backend and Submission API.