Who doesn’t have a newsletter these days? With the rise of Substack, Beehiiv, and other newsletter platforms, it’s easy to start writing and building a list of subscribers.
Heck, even I’ve fallen in love with them and started a newsletter.
Webflow itself doesn’t offer a newsletter feature. Thankfully, there are a lot of great newsletter platforms out there that you can integrate with Webflow.
So today, I thought I’d look at what newsletter platforms integrate with Webflow, how you can use them to create a newsletter sign up form, and also give you an overview of the integration and customization options for each.
Let’s dive into the world of newsletter sign up forms!
Custom or embedded sign-up form?
There are two ways you can create a newsletter sign up form with Webflow. The easy way is to embed a form provided by your newsletter platform. You paste a code snippet into your Webflow site using the Embed component, and you can start collecting sign ups.
The downside of this approach is low customization. This ranges from almost no customization (in the case of Substack) to advanced customization options in the case of MailChimp. You will also need a paid plan for your website to support custom code embeds.
The alternative is to create a native Webflow form and connect it to your newsletter provider. The benefit is that you have full control over the look and feel of your form. The downside is that it takes more time to set it up and is usually technically more challenging. However, it’s nothing you can’t manage with the help of a step-by-step guide.
Let’s look at what options are available with the most common newsletter platforms.
Picking the right newsletter service provider
Newsletter providers vary in how easy it is to integrate them and how customizable the integration with Webflow is. I’ve included an overview of the most popular ones. I’ve written integration guides, and they are linked here as well.
ConvertKit
There are four ways you can create a sign up form with ConvertKit and Webflow:
- Embedding ConvertKit’s sign up form
The embed is just a piece of code you add to your website, and this displays ConvertKit’s form. You can style the form quite a bit, but it will likely still look different from your website. You’ll need a paid Webflow account to embed custom JavaScript in your website. - A custom Webflow form integrated with ConvertKit using the Action field
The second option is a custom integration using a native Webflow form and connecting it to a ConvertKit form using the Action field in the form settings. - Using Webflow Logic to connect ConvertKit and Webflow
A newer way of connecting ConvertKit with Webflow is through a feature called Webflow Logic. You can use this even with a free account (with some limitations on traffic). This is great if you need to build additional steps in your flow, like segmenting your sign ups based on a dropdown option in your form. - Using Zapier for advanced integrations
If you need complex flows, I recommend using Make.com or Zapier to integrate ConvertKit and Webflow. This allows you to trigger actions in third-party apps (sending a notification to Slack, creating a record in your CRM, etc.).
The downside of a custom integration is that ConvertKit’s amazing Creator Network recommendations won’t work with it. So, you’ll lose the ability to recommend other creators when people sign up. This is why I went with the embed and tried to style it as close as possible to my website.
MailChimp
MailChimp is one of the most popular email and newsletter providers out there. There are four ways you can integrate MailChimp with Webflow.
- Embed a MailChimp signup form on your site
This is the easiest option, as you’ll paste a code snippet from MailChimp to Webflow. The downside is that matching the design of the form to your website can be difficult. - Connect your custom Webflow form with Mailchimp using the Action field in Webflow
This more advanced approach allows you to customize your form in Webflow fully. You’ll be creating a native Webflow form and connecting it to MailChimp using the Action field. - Use Webflow Logic to connect MailChimp and Webflow
Webflow has recently released Logic, which allows you to create an API connection with MailChimp. The main advantage is that you can build additional logic on top of this. For instance, you could add subscribers to a different segment in MailChimp based on the value of a field in your form. - Use Zapier for advanced integrations
Zapier and Make.com are no-code integration tools. They make it easy to integrate two or more services and are great for very advanced builds. For instance, you could build a flow where a person signs up for your newsletter in Webflow, a new subscriber is created in MailChimp, you get a notification in Slack, and a record of this event is saved in a Google Sheet. The options are almost limitless.
Substack
Substack is a popular newsletter platform. They are geared towards long-form content and offer a beautiful text editor and reading options, including a mobile app. However, they don’t offer a lot in terms of integrations with Webflow. You can only use their embed, which offers almost no styling options.
Alternatively, you can use a service like Substack API (not affiliated with Substack) to customize the look and feel of your form. However, the options are still limited.
Beehiiv
Beehiiv offers three ways to integrate with Webflow. Note that Beehiiv’s API requires you to be on a paid plan (others give you API access on their free plan).
- Beehiiv embed
Beehiiv has three types of embeds: a full-page embed, a fixed-width embed, and a slim embed. The slim embed is the least obtrusive one. In terms of styling, you can set the color of the form. - Using Webflow Logic to integrate Beehiiv and Webflow
As with other providers mentioned above, you can use Webflow Logic to have full design control over the design of your form and to support more complex sign up flows (such as segmentation). - Integrating Beehiiv with Webflow using Make.com or Zapier
This option allows full customization of your form, as you’ll use a Webflow form you can style to your heat’s content. Plus, as I mentioned in the MailChimp integration, this option allows you to build advanced flows connecting multiple apps. The downside is that it’s a more complicated way to connect, and there are some limits to the free plans both Make.com and Zapier offer.
MailerLite
MailerLite is a popular alternative to MailChimp. I like their user interface as it’s less bloated than MailChimp. There are three ways you can connect Webflow and MailerLite.
- Embed a MailerLite form in Webflow
A straightforward way to connect MailerLite and Webflow is by copying a code snippet from MailerLite and pasting it into Webflow, where you want the form to display. MailerLite offers design functions like setting the colors, choosing fonts, and editing the text. You won’t, however, have full control over the design. - Use Webflow Logic to connect MailerLite to Webflow
Using Webflow Logic allows you to gain full design control over your form. You’ll create a form in Webflow, and you can use all the design options Webflow offers. Once you’ve created the form, you’ll connect it to MailerLite using Webflow Logic. - Integrate using a no-code integration platform like Make.com
An alternative to using Webflow Logic is to create an integration with Make.com or Zapier. This is a more advanced option that allows you to integrate additional services beyond Webflow and MailerLite. Use this to trigger actions in other apps when someone subscribes to your newsletter. You can also use Zapier for this.
EmailOctopus
The last service I’ll cover is EmailOctopus. Another popular email and newsletter provider with affordable pricing tiers. There are three ways you can connect EmailOctopus to Webflow
- Embed an EmailOctopus form on your Webflow website
An easy option that allows you to copy-paste a code snippet from EmailOctopus straight into Webflow, and you’re done. As with all the other services, your design customization options are limited, and you’ll need to play around to get it close enough to your style. - Connect EmailOctopus using Webflow Logic
This option gives you full control over your form design. - Connect EmailOctopus using Zapier
For more advanced integrations that connect multiple apps besides EmailOctopus and Webflow, I recommend using Make.com or Zapier. The downside is that it’s another service you must maintain and potentially pay for (depending on the flow complexity and traffic).
Conclusion
Ok, so let’s summarize the key points. Webflow doesn’t offer a native newsletter service. They integrate with many popular newsletter platforms. In this guide, I’ve covered the most popular services - MailChimp, ConvertKit, Substack, Beehiiv, MailerLite, and EmailOctopus.
They all offer a basic form embed that’s easy to integrate but doesn’t offer full design customization options. Where these services differ in terms of integrating with Webflow is creating custom newsletter sign up forms. They range from no option (Substack) to multiple options (MailChimp, ConvertKit).
If you are starting your newsletter, consider the Webflow integration options they offer. If you’re already committed to a platform, review all the options I’ve listed to pick the one that fits you best.
As always, if you have any questions, you can contact me on Twitter/X.
👋 Subscribe to Flowletter
Hi, Ondrej here. Every week, I write about growing my Webflow freelance business, sharing freelance tips, Webflow skills, and learnings from the community.
If this is your first time reading Flowletter and you’re not subscribed, here’s what you missed in the past weeks:
