About 2 minutes · no code
How to Connect Your Framer Forms to JotForm (Step-by-Step)
You already have a form on your Framer site. By the end of this page, every person who fills it in will appear in your JotForm submissions — with your design, your fields and your success state untouched.
What you need first
A published or draft Framer site with a form on it, and a JotForm form that’s already published so you can copy its share link.
Step 1
Design your form in Framer as usual
Open the page your form should live on. Two placement rules matter, and they are the thing people most often get wrong:
Your form sits outside the page frame, beside it on the canvas.
The connector you add in step 2 sits inside the page frame.
The connector is what renders on the published site; it pulls in the form you point it at. If you drag your form onto the canvas beside the page and leave it there, you’re set.
Set ‘Send to’ while you’re here. Submissions will reach JotForm whether or not Send To is filled in — but your custom states won’t behave without setting it.
Left: your form, loose on the canvas. Right: the connector, nested inside the page frame — see the Layers panel. The purple line is the link between them.
Step 2
Open the plugin and pick JotForm
Open the plugin. Framer menu → Plugins → Browse All, search for Framer Forms Connect.
Once it’s installed, Plugins → Run Recent Plugin is quicker.
Add JotForm. Drag it onto your page, or click the +
Wire the connector to your form. Drag from the purple dot on the edge of the connector onto your form. A purple line joins them, and the connector’s settings in the right-hand panel now name your form. If that field still says Select…, the link didn’t take — drag again.
Paste the form link. In JotForm go to your form → Edit → Publish → copy the share link, then paste it into the plugin’s box. The field turns green once it’s accepted.
Match the field names. Each input in your Framer form needs its Name set to the matching field’s ID in JotForm.
Click Properties ⚙️ icon on a field, go to Advanced > Field Details, copy Field ID.
✔ Don't copy #. #first_3 is just first_3.
✔ Some names look wrong but aren’t — input_6_addr_line1 is a real JotForm internal name.
✔ The Name property is separate from the label and the placeholder. Those stay however you designed them.
✔ Multi-part fields split into several IDs — a name field becomes first_ and last_, an address becomes one ID per line.
Step 3
Test
Hit Publish, open the live URL and send a real submission. Testing on the published site is the only way to see what JotForm actually says back.
Fill it in as a visitor would.
A green line under the form means it went through:
Fill it in as a visitor would.
If something is off, you get the reason rather than a silent failure:
⚠ REQUIRED_FIELD: Error in 'fields.consent'. Required field 'consent' is missing
Step 4
Publish
One last thing before you call it done. Select the JotForm Connector on the canvas and set Show Errors to No. That banner is a build-time diagnostic — useful to you, confusing to visitors. The plugin reminds you of this in the success message itself:
✅ Sent successfully! Disable "Show errors" in the component settings to remove this message
FAQ
Form works well on desktop, but collapses on mobile.
Set the wrapper's position as Fill in Framer instead of Fit.
How do I use a separate version of the form on mobile?
You'll need to create a separate form and hide the desktop version on mobile.
Still stuck
Email us at annyeong@romans.design with the site URL and we’ll look at it with you. A real person reads it - no automated responses.
That’s the whole setup.
Every other integration follows the same five steps. Try it on your own site free for seven days.