HTML FormsBuilding forms

Advanced file uploader

The drag-and-drop uploader formclick.min.js builds from every file input: multiple files, progress bars, retries, size and type limits, and styling.

Pro and Business plans

File uploads are available on the Pro and Business plans.

You don’t need an upload widget or a third-party service. Add a normal <input type="file"> and formclick.min.js turns it into a full uploader.

Resume & work samples

Drag & drop files here, or Browse files

Max 5 MB per file

Submit application

Drop files or browse, see each file’s progress, remove mistakes before sending.

What it does

Drag and drop onto the zone, or click Browse files.
One or many files: add multiple to accept several files in one field. Without it, a new file replaces the previous one.
Checks before uploading: files over the size limit or not matching accept are rejected straight away with a clear message.
Skips duplicates: the same file (same name and size) is only added once.
Remove button on each file until the form is sent.
Parallel uploads with a progress bar for every file.
Automatic retries: up to 3 attempts with increasing delays if the connection drops.
Direct to storage: files go straight to secure storage, not through the form endpoint, so large files don’t slow down the submission.
Resets after a successful submit, ready for the next visitor.

Options

Attribute	Example	Effect
`name`	`name="resume"`	Field the file (or list of files) is saved under.
`multiple`	`multiple`	Allow several files in this field.
`accept`	`accept=".pdf,.docx"` or `accept="image/*"`	Allowed extensions or MIME types.
`data-max-size`	`data-max-size="2097152"`	A lower size limit, in bytes (here 2 MB). The limit can’t go above 5 MB.

apply.html

<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="email" name="email" required>

  <!-- One PDF, max 2 MB -->
  <input type="file" name="cover_letter" accept=".pdf" data-max-size="2097152">

  <!-- Up to many images, 5 MB each -->
  <input type="file" name="photos" accept="image/*" multiple>

  <button type="submit">Send</button>
</form>

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>

Allowed file types

Whatever you set in accept, the server only stores these types: images (JPEG, PNG, GIF, WebP, SVG, TIFF), PDF, Word, Excel, PowerPoint, plain text, CSV and ZIP.

Styling

The uploader injects light default styles. Override any of these classes in your own CSS:

Class	Element
`.fc-upload-zone`	The drop zone. Adds `.fc-drag-over` while dragging, `.fc-has-files` with files, `.fc-error-zone` on an error.
`.fc-upload-hint`, `.fc-upload-meta`, `.fc-upload-browse`	Hint text, limits text and the Browse button.
`.fc-file-item`	One file row. Has `.fc-file-name`, `.fc-file-size`, `.fc-file-status` and `.fc-file-remove`.
`.fc-progress-wrap`, `.fc-progress-bar`	The progress track and bar.
`.fc-zone-error`	Error message under the zone.

HTML

<style>
  .fc-upload-zone { border-radius: 14px; border-color: #c7d2fe; }
  .fc-upload-zone.fc-drag-over { border-color: #645cec; background: #f6f5ff; }
  .fc-progress-bar { background: #645cec; }
</style>

How files reach you after upload is covered in File attachments.

Still need help? Contact support or email support@formclick.io.