Multi-Step Forms in Framer with file upload

Framer's built-in form is fine for a name and email field. Once you need multiple steps, file uploads, or a layout that actually matches your site, you hit the wall pretty fast.

The workaround that actually works: a custom HTML embed wired to a form backend. And you don't have to write that HTML by hand - point an AI assistant at our skill file, paste the result into Framer, done.

What native Framer forms don't handle well

• No multi-step flow - everything on one screen, no progress bar
• No file uploads - resumes, briefs, attachments aren't supported
• Limited field types - no proper phone validation, date pickers, or conditional logic
• Locked styling - you're inside Framer's form component, not your design system

Plugins and third-party widgets exist, but you're stacking another subscription and another dependency. A plain HTML embed you own is simpler - and it travels with you if you leave Framer.

The fix: one HTML embed

Framer's Embed element renders any HTML/CSS/JS block on your page. You bring the form; Framer displays it.

1. Create a form in MyFormConnect and copy the Form UUID
2. Ask an AI assistant to build the form (see prompt below)
3. In Framer: Insert -> Embed -> paste the HTML -> publish

Total setup time: a few minutes if you already have the form UUID.

Step 1: Create your MyFormConnect form

1. Sign up and create a new form in the dashboard
2. Add your Framer site's domain to allowed domains (Settings -> Domains)
3. Select and enable CAPTCHA in form settings (reCAPTCHA or hCaptcha). Choose your provider, add your site key, and save. This is highly recommended for any form with file uploads - bots cost quota and can fill your storage with junk files.
4. Copy the Form UUID

loader.js reads your CAPTCHA settings automatically when you use data-captcha="auto". No extra wiring in Framer after you select CAPTCHA in the dashboard.

Step 2: Generate the form with AI

Paste this into ChatGPT, Claude, Cursor, or v0. Replace the placeholders.

Analyze this website and build a matching responsive multi-step
SALES contact form for Framer Embed: [YOUR_FRAMER_SITE_URL]

Submit to MyFormConnect form UUID: [YOUR_FORM_UUID]

Use this integration guide:
https://myformconnect.io/skills/myformconnect/html/SKILL.md

Return one self-contained HTML snippet (inline CSS and JS only).

Requirements:
- Multi-step sales inquiry (5 steps with progress bar)
- Step 1: Company and name
- Step 2: Email and phone
- Step 3: Budget, timeline, service type
- Step 4: File upload (brief, PDFs, images - multiple files)
- Step 5: Review and submit
- Include loader.js with data-captcha="auto" and data-mfc="true"
- CAPTCHA must be enabled in the dashboard (reCAPTCHA or hCaptcha) - required for file upload forms
- Show inline success message after submit

Same structure works for job applications (resume upload), agency briefs (PDF attachments), photography inquiries (reference images) - change the steps and fields, keep the skill URL and Form UUID.

Step 3: Paste into Framer

1. Open the page where the form should live
2. Insert -> Embed -> drag onto canvas
3. Paste the full HTML snippet in the properties panel
4. Resize the embed frame to fit
5. Publish and test a submission

File uploads

Native Framer forms can't collect files. In your embed:

<input type="file" name="brief" accept=".pdf,.doc,.docx,.png,.jpg,.zip" />
<input type="file" name="documents[]" multiple accept=".pdf,.png,.jpg" />

The form needs enctype="multipart/form-data". Pro plans support ~95-100 MB total per submission. Files show up in your MyFormConnect dashboard with download links.

Enable CAPTCHA before you go live. File upload forms are a common bot target. Select reCAPTCHA or hCaptcha in your dashboard, then use loader.js in the embed so verification runs before upload - not after. See Advanced spam & captchas.

More detail: Forms with file upload.

CAPTCHA and spam protection (required for file uploads)

Public forms get hit by bots. File upload forms especially - bots can burn submission quota and store useless files. If spam filtering happens only after submission, those requests still count against your plan.

1. In the dashboard: open your form -> enable CAPTCHA -> pick reCAPTCHA or hCaptcha -> paste your site key -> save.
2. In the embed: include loader.js with data-captcha="auto" and data-mfc="true".

Loader runs honeypot checks and your selected CAPTCHA before the POST (and before any files upload):

<script src="https://myformconnect.io/loader.js"
        data-client-id="YOUR_DOMAIN_UUID"
        data-captcha="auto"></script>

<form data-mfc="true" action="https://myformconnect.io/f/YOUR_FORM_UUID"
      method="POST" enctype="multipart/form-data">
  ...
</form>

See Using Loader.js and Advanced spam & captchas.

Page speed

Heavy third-party form widgets can tank Core Web Vitals. This approach doesn't - it's your HTML pasted directly, plus one small script from MyFormConnect that only does work when someone actually submits. No iframe, no tracking pixel on page load.

FAQ

Do I need a Framer plugin?

No. Insert -> Embed -> paste HTML. Same approach works on Webflow, Squarespace, Carrd, or any host that accepts embeds.

Will it look like part of my Framer site?

Yes - it's your HTML and CSS. Ask the AI to match your site URL in the prompt. If the first pass is off, ask it to restyle using your fonts and colors while keeping field names and submit logic identical.

Can I use this on multiple Framer pages?

Yes. Same embed on every page, or create separate forms per page for separate inboxes.

What if the AI uses wrong field names?

Include the skill URL in your prompt - that's what it's for. Without it, you'll get generic names like field1 that aren't useful in the dashboard.

Native vs custom embed

Further reading

• Build forms with AI (skills hub)
• HTML skill file
• Framer form backend integration
• File upload guide