About 3 minutes · no code
How to Connect Your Framer Forms to MailerLite (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 land in your MailerLite group as a subscriber — 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 MailerLite account with at least one group to put subscribers in.
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 MailerLite 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
Generate a MailerLite API key
MailerLite connects with an API key rather than a login screen. In MailerLite go to Integrations → API
Click Generate new token and fill in three things:
Token name. Anything you like — the name of the site it’s for is a good habit.
IP restrictions. Choose All IPs allowed. The dialog offers an allowlist and helpfully shows an IP address, but that’s your computer — the requests come from Framer’s servers, not from you. An allowlist means finding Framer’s outbound IPs and keeping them current as they change.
Tick the Terms of Use checkbox.
The key is shown once. MailerLite never reveals it again — the list only shows names and dates. Copy it and paste it into the plugin before you close the dialog. If you lose it, generate a new one; there’s no way to read the old one back
Step 3
Open the plugin and pick MailerLite
Open the plugin. Framer menu → Plugins → Browse All, search for Framer Forms Connect.
Once it’s installed, Plugins → Run Recent Plugin is quicker.
Add MailerLite. Drag it onto your page, or click the +. A MailerLite Connector component lands on the canvas.
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 key into the plugin and hit Connect MailerLite.
No API key? If you’re working with a client who won’t hand one over, use Don’t have the login details? Configure manually and paste the HTML embed code from a MailerLite form instead. Everything else works the same — except the plugin can’t suggest field names, so you’ll be matching them by hand.
Choose your group. This is the list subscribers land in. Pick it before mapping fields, because the field list depends on the group.
Match the field names. The plugin lists every field in that group with a Click to copy chip. Copy each chip, select the matching input inside your Framer form, and paste it into the input’s Name property.
✔ Email isn’t in the list. It’s the subscriber’s identity rather than a custom field, so name your email input email and it will be picked up.
✔ Some names look like typos but aren’t — z_i_p is genuinely what MailerLite expects. Copy the chip, don’t retype it..
✔ The Name property is separate from the label and the placeholder. Those stay however you designed them.
Step 4
Test, then publish
Hit Publish, open the live URL and send a real submission. Testing on the published site is the only way to see what MailerLite 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. A missing required field reads like this:
⚠ REQUIRED_FIELD: Error in 'fields.consent'. Required field 'consent' is missing
Last thing before you call it done. Select the MailerLite Connector on the canvas and set Show Errors to No. That banner is a build-time diagnostic — useful to you, confusing to visitors.
Publish once more. Every submission now adds a subscriber to your group as it happens.
FAQ
The plugin says my API key looks wrong, but I copied it correctly.
Paste it and continue. if it came straight from Integrations → API it will work.
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.