Framer Custom Form With File Upload

Framer's form component has no file input

If you need a resume, a brief, or a signed PDF attached to a submission, Framer's native Form component won't help — it doesn't expose a file upload field at all. The usual workaround people reach for is a separate file-sharing link pasted into a text field, which is clunky and easy to get wrong.

Build the upload with a Code Embed

Instead, drop a Code Embed into your Framer page with a plain HTML form that includes a file input, and point it at a FormBridge endpoint with multipart/form-data encoding:

<form action="https://app.formbridge.ai/api/forms/fb_8h2k9p"
      method="POST"
      enctype="multipart/form-data">
  <input name="full-name" placeholder="Full name" />
  <input name="email" type="email" placeholder="Email" />
  <input type="file" name="resume" accept=".pdf,.doc,.docx" />
  <button type="submit">Submit application</button>
</form>

That's the entire setup on the FormBridge side — no separate file-upload configuration to turn on. The enctype attribute and the type="file" input are all the endpoint needs to accept the attachment alongside the rest of the fields.

Where the file goes

Uploaded files are stored encrypted and show up as a secure link directly on the submission in your FormBridge inbox, next to the applicant's name and email. There's nothing to configure on a per-form basis — any file input just works.

Files do count against your plan's total file storage, visible live on the Usage page in your dashboard, so it's worth keeping an eye on that if you're running a high-volume application form rather than the occasional attachment.

Styling it like the rest of your site

Because the form lives in a Code Embed, you style it with plain CSS scoped to the embed, or reuse class names and colors from your Framer design if you're comfortable authoring matching styles by hand — Framer's own design panel won't reach inside the embed, so visual styling has to be written directly into the HTML/CSS you place there.

Set it up in three steps

1. Create a FormBridge endpoint and copy its URL.
2. Add a Code Embed to your Framer page with the form markup above, swapping in your own field names.
3. Set notification recipients so you're alerted the moment a file comes in, and add an autoresponder to confirm receipt to the applicant.