How to Connect Your Framer Forms to Mailerlite (Step-by-Step)

‍

If you’ve designed a beautiful custom form in Framer but are struggling to route submissions directly to MailerLite, you don't have to settle for clunky embeds that ruin your styling. With the Framer Forms Connect plugin, you can securely pipe subscriber data straight into your MailerLite groups while keeping your custom design completely intact. Here is how to set it up in just a few minutes.

Before you begin, ensure your form layout is fully designed in Framer and that you have a MailerLite account ready to go. You can choose between two main connection paths: the fast API Key integration or a manual HTML configuration.

Method 1: The Quick Setup (Using an API Key)

This is the most seamless method, allowing the plugin to securely talk to MailerLite in the background while giving you full control over your form's design states.

1. Add the MailerLite Connector

‍In your Framer project, head to the upper-left menu and click on Canvas > Plugins. Select Browse All and search for Framer Forms Connect. Find MailerLite in the integrations menu and drag it right onto your canvas workspace.

2. Link the Plugin to Your Custom Form

‍Make sure your form is positioned freely for easy wiring.

‍If your form is currently locked inside your layout, temporarily move it off-canvas to the side of your workspace. Click on the MailerLite plugin block, grab its connection node (the small dot on the edge), and drag the wire to attach it directly to your form component.

3. Generate Your MailerLite API Token

‍You can find this in your MailerLite developer dashboard.

‍Click on the plugin block to reveal its settings panel, which will ask for an API key. Open MailerLite in a new browser tab, navigate to Integrations, and open the Developer API section. Click "Generate new token," give it a name, and choose "All IPs allowed" for the easiest connection.

Copy that token, head back to Framer, and paste it into the plugin field before hitting "Connect."

4. Choose Your Subscriber Group

‍Segment your leads automatically.

‍Once connected, the plugin will seamlessly fetch your active MailerLite data. Open the dropdown menu in the plugin settings panel and choose the specific subscriber group where you want these form entries to land.

5. Map Your Fields Exactly

‍Mismatched names are the main cause of form failure.

‍MailerLite needs to understand exactly where to route the text your users type. In the plugin panel, click on the field tags (like city, company, or name) to copy them. Then, click into your actual Framer form fields, find the Name property in the right-hand panel, and paste the exact copied string. Your placeholders can be whatever you like, but the field names must match MailerLite perfectly.

6. Publish and Run a Test

‍Hide the technical warnings before launching.

‍Publish your Framer site and fill out the live form to test it. Head over to your MailerLite dashboard under Subscribers to verify that your test profile populated instantly. Once you see a successful submission, go back to your plugin settings in Framer and toggle off "Show Errors" so your everyday users never see backend troubleshooting details.

Method 2: The Manual HTML Setup

If you’re hand-off building a site for a client and they aren't comfortable handing over their API keys, you can completely bypass the login step using an embed code instead.

1. Grab the HTML Code from MailerLite

‍Log into MailerLite, navigate to Forms, and choose Embedded forms. Create your form fields here, save it, and view the tracking details. Click on the HTML code tab and copy the entire block of code to your clipboard.

2. Open Manual ConfigurationIn Framer, add the Framer Forms Connect plugin to your canvas workspace. Click the block, but ignore the API field. Instead, click the drop-down menu that says "Don't have the login details? Configure manually."

3. Paste and Align Your Design

‍Paste the copied MailerLite HTML directly into the text window. Drag the plugin's connection wire onto your form layout. Note that when configuring manually, the plugin won't be able to auto-suggest your field names, so take extra care to click your form fields and ensure their properties line up precisely with the field names in your MailerLite account.