FormThunder isn't open yet. This site describes the service as it will run at launch. Find out more

FormThunder
Menu

Copy a file upload form template that emails you the attachment

This file upload form posts as multipart/form-data, and FormThunder stores the file and attaches it to the email it sends you. Direct uploads can be up to 5 MB per file. For files up to 25 MB, the advanced uploader sends them to storage first. Attachments need the Pro plan and must be turned on for the form.

Updated

Preview

This preview is switched off, so nothing here sends.

Copy the code

Replace YOUR_ACCESS_KEY with your own key. The classes use Tailwind's stock colours, so they work in any Tailwind project.

file-upload-form.html
<form action="https://formthunder.com/submit" method="POST" enctype="multipart/form-data" class="mx-auto max-w-md space-y-4">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="hidden" name="subject" value="New file upload">
  <input type="checkbox" name="botcheck" class="hidden" tabindex="-1" autocomplete="off">

  <div>
    <label for="name" class="block text-sm font-medium text-slate-900">Name</label>
    <input id="name" name="name" required autocomplete="name" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-950 focus:border-slate-950 focus:outline-none">
  </div>

  <div>
    <label for="email" class="block text-sm font-medium text-slate-900">Email</label>
    <input id="email" name="email" type="email" required autocomplete="email" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-950 focus:border-slate-950 focus:outline-none">
  </div>

  <div>
    <label for="attachment" class="block text-sm font-medium text-slate-900">File (5 MB maximum)</label>
    <input id="attachment" name="attachment" type="file" required accept=".pdf,.png,.jpg,.jpeg,.zip" class="mt-1 block w-full text-sm text-slate-700">
  </div>

  <div>
    <label for="notes" class="block text-sm font-medium text-slate-900">Notes</label>
    <textarea id="notes" name="notes" rows="3" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-950 focus:border-slate-950 focus:outline-none"></textarea>
  </div>

  <button type="submit" class="w-full rounded-lg bg-slate-950 px-4 py-2.5 text-sm font-medium text-white hover:bg-slate-700">Upload and send</button>
</form>

The fields that matter

attachment

The reserved field for files. Multiple files can use attachment with the multiple attribute.

enctype

multipart/form-data on the form is what makes a browser send the file at all.

Adapting it

  • Files sent on a Free plan are ignored, and the response carries a warning saying why. The rest of the submission still arrives.
  • For bigger files, load /client/script.js and add data-advanced="true" to the input, with data-form-id, data-max-files and data-max-file-size.
  • accept is a hint for the file picker, and people can get around it. Treat files you receive with the same care as any email attachment.

Questions

What's the upload size limit?

5 MB per file for direct multipart uploads. The advanced uploader takes up to 25 MB per file.

Can I accept several files?

Yes. Add the multiple attribute to the input. The request body must stay under 6 MB for direct uploads, so use the advanced uploader for more.

More templates

Get a key and make this form send

File uploads need the Pro plan at $12 a month. Everything else works on Free.

Get started freeRead the quickstart