A Super Easy Integration That Streamlines Your Customer’s Marketing Efforts

As a front-end developer, you may have encountered situations where your clients ask you to automate parts of their workflow. Luckily, you don’t need to code solutions yourself as there are many services available that you can easily integrate with your customer’s website to streamline responding to client inquiries, sending out newsletters or managing subscriptions to your marketing communications, all while ensuring you comply with applicable data privacy laws and regulations.

Use case background

I recently assisted a colleague in coding a custom intake form for her client’s website as per the designer’s specifications. Since the website is hosted on Netlify, we simply enabled the form detection from the Netlify dashboard to handle the submissions.

Once we made the form look and function as intended, we also wanted to add an opt-in input of type ‘checkbox’ below the form so that when the user submits the intake form they can also subscribe to the mailing list.

We wanted to achieve this with minimal to no code, so we looked at an automated tool that we could use with our existing tech stack—enter Zapier. Since the client intended to use MailerLite for sending their monthly newsletters, we took advantage of the easy integration service provided by Zapier and created a Zap that would automate the process for us.

To recap, the three services we used were:

• Netlify—a popular platform for building and hosting websites. It also provides a built-in form submission service that allows you to create custom forms for your website and have them delivered to your Netlify dashboard as well as to your email service of choice.
• MailerLite—a powerful email marketing tool that allows you to create and manage email campaigns.
• Zapier—a versatile automation tool that allows you to connect different apps and services.

Integration process

First off, we used the dedicated Netlify and MailerLite template as a starting point. To do the same, you only need to create a Zapier account and connect it to your Netlify and MailerLite accounts.

However, this template did not apply to our use case out of the box—it added all new inquirers’ emails to the mailing list. Since we wanted our users to give us explicit consent to also add them to the newsletter group, we created a simple checkbox type input in the frontend like so:

 <input id="newsletter" type="checkbox" name="newsletter" value="newsletter">
 <label for="newsletter"> Please keep me updated with your latest news! Unsubscribe anytime.</label>

Then, we added one more step in our Zap—a filter that would check if ‘Data newsletter’ in our Netlify form would have the ‘newsletter’ value and only then add the person’s email to the mailing list. Please note that you can call this value in your form whatever you want as long as it’s relevant to your purpose.

Netlify would only add the ‘newsletter’ value to the form details if the person has checked the ‘Please keep me updated with your latest news!’ box. If your Zap doesn’t find this value in the Netlify form, the process stops right there and doesn't continue to create a new subscriber in the mailing list.

To speed up setting up your Zap, feel free to use my template .

This template has three steps:

1. A ‘Triggers’ section— here, you select the website and Netlify form that you want to use for the integration.
2. A ‘Filters’ section—here you select the ‘newsletter’ value to filter the form submissions that should be added to the MailerLite list.
3. An ‘Actions’ section— where you select the MailerLite list that you want to add new subscribers to.

Assuming you already have a form, please ensure that the data passed in the Zap sections described above is dynamically pulled from your Netlify form. Once you are happy with how it looks, just hit ‘Publish’ located in the top right corner of your Zapier editor and your Zap will become active.

That's it! Your Zap is now enabled and will automatically add new subscribers to your MailerLite list whenever a user submits the form on your Netlify site.

Side notes

1. If you want to test or use this Zap with data coming from your form submissions, please ensure you do so after you’ve connected your website to a custom domain in your Netlify dashboard and allowed enough time for the DNS records to propagate. The domain that Netlify generates when building your project with the .netlify.app extension will not work.
2. If you're a first-time user of MailerLite, make sure you verify and authenticate your domain before you test your Zap and implicitly your newsletter signup, otherwise it won't work. Head over to their blog to read the steps on how you can do that.
3. If you need additional steps or filters, you can click on the ‘+’ button located in your Zap editor, in between the three steps discussed above.

Conclusion

In this article, you have learned how quick and easy it is to integrate Netlify forms with MailerLite to automatically add new subscribers to your list. By using Zapier, you can easily connect your Netlify site with MailerLite and streamline your clients’ email marketing efforts without writing additional lines of code.

I hope you'll find this article helpful. If you have any questions please don't hesitate to contact me.

Liked this article? Share it on: