Tutorials
Webflow
Integrations

Connect Webflow Forms to MailerLite (without a third-party tool)

Connect Webflow Forms to MailerLite (without a third-party tool)
Author
Max Frings
Published
3.6.2024
Table of Contents
Gastautor
Webflow Cloneable
100% free to use
Customizable in Webflow
Clients First CSS ready
Relume Library ready
Empower your inhouse team to use Webflow
Eine Vorschau auf den Webflow Kurs für interne Teams von Virtual Entity
6h video material
Webflow SEO
Editor and Designer
Webflow Pagespeed
Incl. Checklists

MailerLite stands out from the crowd of newsletter tools because most features (including automations) are free for small communities. MailerLite is therefore perfect for newsletters/creators who are just starting out or are planning to build a community of < 1,000 people anyway.

The problem: The styling of MailerLite forms really leaves a lot to be desired and can massively reduce the conversion rate of people who see the signup form.

That's where Webflow forms come in. Because Webflow users know the feeling of designing a perfectly styled form on their site. A media break can therefore be easily avoided and your pixel-perfect webflow website does not have to be disfigured by an inappropriate form.

The sweet spot now lies, of course, in the combination of both worlds. Since Webflow doesn't offer any email marketing features and MailerLite Forms isn't as easy to style, in this post we'll show you how to Send Webflow Form submissions directly to MailerLite.

Connect a Webflow form to MailerLite in 5 steps

If you want to use your Webflow form to collect MailerLite contacts, all you have to do is follow these steps:

1. Create an “embedded form” in MailerLite

To receive form submissions in MailerLite, the first step is to create an embedded form in MailerLite. To do this, go to > Forms > Embedded Forms in your MailerLite account and create a new one.

Create a new embedded form in MailerLite

2. Search the form's HTML code

In the second step, navigate to “Embed form into your website” and open the tab with HTML code. Now you can use CMD+F to search for “Action.” You can now copy the URL that you find after the “action=”. Important: All you need is the URL, without the quotation marks at the beginning and at the end.

Search the embed code directly in your browser.

3. Change the form action

The next step is to change the action of the submit button on your Webflow form. To do this, navigate to your form in Webflow and open the form settings. Here you can find the field Action and right here you have to paste the action URL from the MailerLite embed code.

Now set the method of Get → Post because we don't want to receive any data with the form, but send it directly to MailerLite.

Action URL and POST method

4. Customize the email address field

Next, you need to jump into the email field settings in your Webflow form and change the field Text field settings > Name into “fields [email]”. By default, the field is named “Email.” By making this change, you ensure that the email field exactly matches the form name in MailerLite. Just to be sure, also store “fields [email]” as the ID of the field.

Make sure you name your fields correctly.

If you publish the page now, you'll see that Form Submissions are successfully sent to MailerLite. However, after sending, an unpleasant “success screen” from MailerLite opens, which we of course want to avoid.

5. Use Finsweet Form Submissions Enhancer

To be able to use the success message you have defined or the redirect URL and avoid the unpleasant MailerLite success screen, you can use the free tool from Finsweet: https://finsweet.com/attributes/form-submit

This is super easy and quick to set up:

5.1 <head>Embed code

To use the Finsweet tool, you must follow the exact instructions in the Finsweet documentation on the page. The first step is to integrate the <script> into the <head> of the page where the form is embedded.

Embed that <script> into the <head> of your site.

5.2 Set up custom attributes for your shape

The second step is to set up 2 data attributes for your form in Webflow. To do this, select the Form Block or Form Div in Webflow and open the settings. At the very bottom, you'll find the Custom Attributes tab.

Create two attributes with the data:

  1. fs-formsubmit-element = “form”
  2. fs-formsubmit-element = “true”
This is what the custom attributes should look like after configuration.

After the next publishing, your form will now adopt the success message or redirection that you have configured in Webflow.