How to add file upload to an HTML form

File uploads are essential for job application forms, document submission, support tickets with attachments, and any workflow where users need to send files alongside their form data.

This guide covers everything needed to add file upload to an HTML form, from basic markup to secure handling.

Basic file upload form

Two requirements for file uploads:

1. The form must have enctype="multipart/form-data"
2. The form must contain an <input type="file"> element

1
<form action="https://api.formsfort.com/submit" method="POST" enctype="multipart/form-data">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3

4
  <label for="name">Name</label>
5
  <input type="text" id="name" name="name" required />
6

7
  <label for="resume">Resume</label>
8
  <input type="file" id="resume" name="resume" />
9

10
  <button type="submit">Submit application</button>
11
</form>

Without enctype="multipart/form-data", the browser sends the form as application/x-www-form-urlencoded and the file data is not included. This is the most common mistake.

Migrating a Contact Form 7 file tag

Contact Form 7 describes fields with tags, while a static HTML form describes them with elements. A file tag such as [file resume filetypes:pdf|doc|docx limit:10mb] becomes an <input type="file">; the CF7 options are not a portable backend policy by themselves. Use the Contact Form 7 to HTML converter for a starting point, then review the generated field name and rules.

1
CF7 tag:
2
[file resume filetypes:pdf|doc|docx limit:10mb]

1
<form action="https://api.formsfort.com/submit" method="POST" enctype="multipart/form-data">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3
  <label for="resume">Resume (PDF, DOC, or DOCX; up to 10 MB)</label>
4
  <input
5
    type="file"
6
    id="resume"
7
    name="resume"
8
    accept=".pdf,.doc,.docx"
9
  />
10
  <button type="submit">Upload resume</button>
11
</form>

The 10 MB value above is an example policy for this form, not a universal HTML or FormsFort limit. Configure the actual FormsFort size, MIME, extension, and file-count rules in the form settings. Direct multipart uploads use file policy checks and a limited signature check before being queued as email attachments. If the workflow requires ClamAV scanning and temporary download links, use the advanced object-storage upload path described in the file upload backend guide.

Keep the field name (resume) stable if an integration expects it, but do not assume that a CF7 mail template, conditional-field extension, redirect, or spam integration transfers with the HTML. Re-test each behavior from the deployed domain.

Restricting file types

Use the accept attribute to limit which files the user can select:

1
<input type="file" name="document" accept=".pdf,.doc,.docx" />
2
<input type="file" name="photo" accept="image/*" />
3
<input type="file" name="spreadsheet" accept=".csv,.xlsx,.xls" />

The accept attribute only filters the file picker dialog. Users can still bypass it by selecting “All files.” Always validate file types on the server side.

Multiple file uploads

Add the multiple attribute to allow selecting more than one file:

1
<label for="attachments">Attachments (up to 5 files)</label>
2
<input type="file" id="attachments" name="attachments" multiple accept=".pdf,.png,.jpg" />

The files are submitted as an array under the same field name. Your form backend should handle multiple files per field.

Setting file size limits

Client-side hint

Add a hidden MAX_FILE_SIZE field as a hint to the browser (not enforced by all browsers):

1
<input type="hidden" name="MAX_FILE_SIZE" value="10485760" /> <input type="file" name="document" />

The value is in bytes (10485760 = 10MB).

Client-side validation with JavaScript

For reliable client-side size checking:

1
document.querySelector('input[type="file"]').addEventListener("change", (e) => {
2
  const maxSize = 10 * 1024 * 1024;
3
  for (const file of e.target.files) {
4
    if (file.size > maxSize) {
5
      alert(`${file.name} is too large. Maximum size is 10MB.`);
6
      e.target.value = "";
7
      return;
8
    }
9
  }
10
});

Server-side enforcement

Always enforce file size limits on the server or form backend. Client-side checks can be bypassed.

Styling the file input

The default file input looks different across browsers. For a consistent appearance, hide the native input and use a custom button:

1
<label class="file-upload-btn">
2
  <input type="file" name="document" hidden />
3
  Choose file
4
</label>
5
<span id="fileName">No file selected</span>
6

7
<script>
8
  document.querySelector('input[type="file"]').addEventListener("change", (e) => {
9
    const name = e.target.files[0]?.name ?? "No file selected";
10
    document.getElementById("fileName").textContent = name;
11
  });
12
</script>

1
.file-upload-btn {
2
  display: inline-flex;
3
  align-items: center;
4
  padding: 10px 20px;
5
  background: #059669;
6
  color: white;
7
  border-radius: 8px;
8
  cursor: pointer;
9
  font-weight: 600;
10
}
11
.file-upload-btn:hover {
12
  background: #047857;
13
}

Drag and drop file upload

For a modern upload experience, add drag-and-drop support:

1
<div id="dropZone" class="drop-zone">
2
  <p>Drag files here or click to browse</p>
3
  <input type="file" name="document" id="fileInput" hidden />
4
</div>
5

6
<script>
7
  const dropZone = document.getElementById("dropZone");
8
  const fileInput = document.getElementById("fileInput");
9

10
  dropZone.addEventListener("click", () => fileInput.click());
11

12
  dropZone.addEventListener("dragover", (e) => {
13
    e.preventDefault();
14
    dropZone.classList.add("dragover");
15
  });
16

17
  dropZone.addEventListener("dragleave", () => {
18
    dropZone.classList.remove("dragover");
19
  });
20

21
  dropZone.addEventListener("drop", (e) => {
22
    e.preventDefault();
23
    dropZone.classList.remove("dragover");
24
    fileInput.files = e.dataTransfer.files;
25
  });
26
</script>

Secure file upload handling

File uploads introduce security risks. Follow these practices:

Validate MIME types server-side

Do not trust the file extension or the Content-Type header sent by the browser. Check the actual file content (magic bytes) on the server.

Scan for malware

Uploaded files can contain malware. FormsFort direct multipart uploads enforce file rules and a limited signature check before the file is queued as an email attachment. Use the advanced object-storage path when you need ClamAV scanning and a temporary download link.

Limit file sizes

Set maximum file size limits to prevent denial-of-service attacks through large uploads.

Restrict allowed types

Only accept the file types your form actually needs. Do not allow executable files (.exe, .sh, .bat).

Store files securely

Store uploaded files outside the web root or in cloud storage with signed URLs. Never serve uploaded files directly from a public directory.

AJAX file upload with progress

For a better user experience, upload files via AJAX with a progress indicator:

1
document.querySelector("form").addEventListener("submit", async (e) => {
2
  e.preventDefault();
3
  const form = e.target;
4
  const formData = new FormData(form);
5

6
  const xhr = new XMLHttpRequest();
7
  xhr.open("POST", form.action);
8

9
  xhr.upload.addEventListener("progress", (e) => {
10
    if (e.lengthComputable) {
11
      const percent = Math.round((e.loaded / e.total) * 100);
12
      document.getElementById("progress").textContent = `${percent}%`;
13
    }
14
  });
15

16
  xhr.addEventListener("load", () => {
17
    if (xhr.status === 200) {
18
      document.getElementById("status").textContent = "Upload complete.";
19
    } else {
20
      document.getElementById("status").textContent = "Upload failed.";
21
    }
22
  });
23

24
  xhr.send(formData);
25
});

Connect the upload to a static form workflow

Once the markup works, the static form backend guide explains the endpoint and delivery setup without a WordPress runtime. For a broader service-level comparison, see best form backend services. If you are specifically replacing Contact Form 7, use the Contact Form 7 migration comparison to audit mail delivery, spam controls, extensions, and cutover checks rather than treating the file input as a drop-in replacement.

Summary

To add file upload to an HTML form, use multipart/form-data encoding, add a file input, and set appropriate accept restrictions. FormsFort direct multipart uploads apply file rules and a limited signature check, then queue files as email attachments. The advanced object-storage path adds ClamAV scanning and temporary download links.