FormsFort
EN ES

HTML File Uploads

HTML file upload form template.

Use this upload workflow when a visitor needs to send a brief, image, receipt, or other document with context. The multipart form and explicit file rules help the backend receive the attachment correctly.

Get the code Browse examples

Put this template to work

Connect the form to the workflow around it.

The html file uploads workflow is only one part of a production form. Use these resources to refine markup, compare backends, and route accepted submissions.

Field guide

HTML form elements

Choose accessible inputs, textareas, radio groups, selects, and validation patterns for this form.

 Free tool

HTML form template generator

Generate a complete starting form, then adapt its fields to the workflow on this page.

 Comparison

Compare form backends

Review delivery, uploads, webhooks, notifications, and migration trade-offs before launch.

 Solution

Lead capture forms

Turn structured contact and qualification fields into a sales-ready intake workflow.

 Solution

Form notifications

Route accepted submissions to verified email recipients, team chat, or a webhook.

 Solution

File upload delivery

Add upload rules and delivery handling when this workflow needs supporting documents.

Fields

What this form captures

  • Uploader name and reply email
  • Document type and related reference
  • Required attachment with accepted formats
  • Message describing the uploaded file

Workflow

How to use it with FormsFort

  1. Validate the file type and size before forwarding it to a destination.
  2. Send the uploader an acknowledgement with the original reference field.
  3. Use the direct upload path for simple attachments and the advanced storage path when ClamAV scanning is required.
  4. Forward metadata to a webhook so a team can review the file without rebuilding an upload backend.

Copy-paste HTML

Backend-ready form code.

Replace YOUR_ACCESS_KEY with your FormsFort public access key, then deploy the form on your site. 

<form action="https://api.formsfort.com/submit" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <input type="hidden" name="subject" value="New file upload" />
  <input type="hidden" name="upload_source" value="document-request-page" />

  <label for="uploader_name">Your name</label>
  <input type="text" id="uploader_name" name="name" autocomplete="name" required />

  <label for="uploader_email">Email address</label>
  <input type="email" id="uploader_email" name="email" autocomplete="email" required />

  <label for="document_type">What are you uploading?</label>
  <select id="document_type" name="document_type" required>
    <option value="">Choose a document type</option>
    <option value="brief">Project brief</option>
    <option value="receipt">Receipt</option>
    <option value="screenshot">Screenshot</option>
    <option value="other">Other document</option>
  </select>

  <label for="reference">Related order or request number</label>
  <input type="text" id="reference" name="reference_number" autocomplete="off" />

  <label for="attachment">File (PDF, DOCX, PNG, or JPG; 10 MB maximum)</label>
  <input type="file" id="attachment" name="attachment" accept=".pdf,.docx,.png,.jpg,.jpeg" required />

  <label for="upload_message">Message about this file</label>
  <textarea id="upload_message" name="message" rows="5" maxlength="3000"></textarea>

  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
  <button type="submit">Upload file</button>
</form>

Production notes

Make it reliable before launch

  • Submit from the real production domain and confirm delivery logs show the expected origin.
  • Keep hidden fields for routing and context, not secrets. Public access keys are identifiers.
  • Use allowed domains, honeypots, rate limits, and optional CAPTCHA for public forms.
  • Test uploads, webhook payloads, spreadsheet rows, and autoresponder copy before publishing.

FAQ

Common questions

Why does this form use multipart/form-data?

A browser only sends a file input as an attachment when the form uses multipart/form-data. Keep that encoding and method when replacing the FormsFort endpoint placeholder.

Are uploaded files scanned?

Direct uploads apply file rules and signature checks. Choose the advanced object-storage path when your workflow requires ClamAV scanning before a file is made available.

Can I accept more file formats?

Yes, update the accept hint and your FormsFort file policy together. Restrict extensions and size to what the workflow actually needs rather than accepting every file type.

Related templates

Build the next form in the workflow.

HTML Support

HTML support ticket form template

Use this support ticket form when a team needs enough diagnostic context to triage an issue on the first reply. It turns a static help page into a structured support intake flow.

 Application Forms

Job application form template

Use this form for role-specific applications where hiring teams need a resume, contact details, screening answers, and source tracking without building an applicant backend.

 Donation Forms

Donation request form template

Use this form when visitors need to request a donation, sponsorship, in-kind gift, or fundraising support. FormsFort turns the submission into a backend workflow instead of leaving it as a raw email.