How can we help?

Search Docs

Docs

FramerForms

Integrations

How to Connect MailerLite with FramerForms

Important Notice: This content is based on an earlier version of the product. Please do not consider this information as definitive. We’ve kept it available because some customers are still using the previous version. Thank you for your understanding!

1. Get a Form URL from MailerLite

Go to the MailerLite website.
Sign in or create an account.
In the sidebar, press Forms and switch to the "Embedded forms" tab.
Create a new form and select subscriber groups.
On the form editor page, press "Done editing" in the top right corner. We don't need to edit the form here since we will be building our form in Framer.
Scroll down to "Embed form into your website" and press the "HTML code" tab.
Press Cmd+F or Ctrl+F to open your browser's find menu. Copy and paste "https://assets.mailerlite.com/jsonp" into it.
There should be two results. The first one, which is inside quotes at action="" is the URL we are looking for. Copy the entire URL starting with https://assets.mailerlite.com/jsonp and ending with /subscribe.

2. Configure Your Form in Framer

Open your Framer project that contains the form you want to integrate with MailerLite.
Select the Submit Button on the form.
Select "MailerLite" from the "Submit To" dropdown.
Paste the URL from MailerLite into the "MailerLite URL" field.

3. Connecting Form Fields to MailerLite Contact Details

In MailerLite, each contact has several detail fields such as email, first and last names, address, and phone number. You can create form fields in Framer that correspond with contact fields

The first email field in the form is automatically used as the contact email.

To use other fields such as name, last name, phone number, or custom fields, press the "Subscribers" button in the sidebar and navigate to the "Fields" tab. Here you can see a summary of all the contact fields and create new ones. To connect a form field in Framer to one of these fields, enter the tag name between ${ and } into the "Name" property on the form field component.

4. Test Your Form

Publish your Framer project.
Fill out the form with test data.
Click the form submit button.
Return to the MailerLite dashboard and check the Subscribers page for a new subscriber.

That's it! You've successfully integrated MailerLite with Framer.