How to integrate ConvertKit with Webflow using Webflow Logic

An illustration showing the integration of ConvertKit and Webflow

Two popular ways of integrating ConvertKit with Webflow are to embed ConvertKit’s signup form or to point a Webflow form to your ConvertKit form using the form action field. But what if you need an advanced integration. Let's say you'd like to segment your audience based on an option they chose in your form.

Today, I want to show you how to get this done, without using 3rd party solutions like Make.com or Zapier, but rather by using Webflow's own Logic feature.

What is Webflow Logic?

Webflow introduced its native automation solution called Webflow Logic in September 2022. Yet, I don’t see many people fully taking advantage of it when connecting third-party services. We still rely on Zapier or Make.com.

Webflow Logic lets you set up ‘flows’ to automate specific actions within and between Webflow and 3rd party apps. For example, you can create CMS items when a user fills out a form, send email notifications, or manage users in Webflow memberships.

But for me, the coolest action is making HTTP requests to other apps. This lets you use APIs to send data from Webflow to apps like ConvertKit without relying on (and paying for) an integration app like Zapier or Make.  

Why use Webflow Logic when integrating ConvertKit?

Using ConvertKit’s embed allows you to create advanced form with dropdown options to segment your audience. However, you have less design control over how your signup looks. You must also have a paid Webflow site plan to add embeds to your website.

If you build a native Webflow form and integrate it using Zapier or Make, you have one more app to manage. You might also have to pay for those services depending on how many signups you have or how complex your integration is.

This is why I think Webflow Logic is a good alternative. You have full design control over your sign-up form; you don’t have to manage and pay for another service. And if you are on a tight budget, it also works with a free Webflow plan.

But, before you move on, there are two downside I have to mention. First, at the moment, you can only use a dropdown selector in your form to segment your audience. Checkboxes, or multiple choice options won't work. Secondly, if you use ConvertKit’s Recommendation Network and want to show recommendations to another newsletter when someone signs up for yours, you must use ConvertKit’s embed. There’s no API support for this at the moment.

A screenshot of the FlowLetter newsletter issue.
Are you a Webflow Developer? Join my newsletter!

Every week I share how to guides, resources, design inspiration and stories from the world of Webflow. Join 100+ other Webflow developers and let's grow together.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

How to integrate ConvertKit with Webflow using Webflow Logic

Step 1: Create a Webflow signup form

Grab a Form element from the element selector and drag it into your design. Style it as needed. Give your form a name. I’ve named mine newsletter-signup-form.

My form has an email field, name field and a dropdown for segmenting my audience based on the topic of their interest.

Screenshot from my Newsletter Form in Webflow's Designer

You can name your email and name field as you'd like.

Now, let's configure the Select Field settings (dropdown). For this tutorial, I'm assuming you've already created tags in ConvertKit for segmenting your audience. Each option has a Name and Value field. You can name them as you'd like. To match each option to a ConvertKit Tag we'll need to grab the Tag ID and insert it in the Value field.

You'll find it in ConvertKit by navigating to Grow → Subscribers and clicking on a Tag in the right hand panel next to your Subscribers list. Look at the URL and the number following subscribable_ids= is your Tag ID.

How to find the ConvertKit Tag ID in the tag URL

Your Select Field settings should look like this:

Configuration of Dropdown options in Webflow

Step 2: Create a new Webflow Logic flow

This is where it gets a little technical, but don’t worry; follow these steps, and you’ll be set up quickly.

First, we’ll create a new flow inside Webflow Logic. In the left menu panel, click on the Logic icon and then click on Flows. In Flows, click on the New flow button.

Screenshot of the Webflow designer showing how to create a new Webflow Logic flow

Step 3: Setup your flow

In the right-hand panel, give your flow a name. I’ve named mine ConvertKit Signup.

Next, click Select a trigger to start this form button in the center of your screen and select Form Submission.

Screenshot of Webflow showing how to setup your flow

Next, you’ll select your form from the dropdown in the right-hand panel.

Screenshot of Webflow showing how to select your form

Step 4: Add and configure the HTTP request block

1. In the left-hand panel, select Make HTTP request.

Screenshot of Webflow showing how to add an HTTP reuest action

2. Next, in the right-hand panel, give your block a name. Something like ConvertKit Integration.

3. Under Authentication, select API token, and under Add to select Query params.

4. In the Header field, paste the following: api_key

5. Next, we’ll set up your Credential. Click on Select a credential and Add new credential. Give your credential a name like ConvertKit.

6. In the type dropdown, leave the API token option selected.

7. Now, we’ll need to grab your ConvertKit public API key. To do so, go to your ConvertKit dashboard, click on your profile picture in the top left-hand corner, and go to SettingsAdvanced. Copy Your API key. Do not copy your API Secret!

8. Now paste your API key in the Token field in Webflow. The result should look like this, and you can click Create.

Screenshot of Webflow showing how to create new credentials

9. Under Request method, select POST.

10. Next, we’ll need to grab the Form ID from your ConvertKit form. This is confusing, but ConvertKit requires you to create a form, even if you won’t embed it on your website. In ConvertKit, go to GrowLanding Pages & Forms and click Create new. Now select Form and Inline. Pick a theme; it doesn’t matter which one, as we won’t display this form. If you’d like to use additional fields other than email, add them to your form.

11. Now we’ll grab the Form ID. In ConvertKit, go to the URL and copy the numerical string. This is your Form ID.

Screenshot of URL from ConvertKit showing how to get the Form ID

12. Now paste your Form ID in this URL template:

https://api.convertkit.com/v3/forms/{form_id}/subscribe

So the result for me looked like this:

‍https://api.convertkit.com/v3/forms/6088435/subscribe

13. Grab this URL and paste it in Webflow in the URL field in the left-hand panel.

14. Add a new header in the Headers section, and paste Content-Type in the Name field. In Value paste: application/json

15. We’re almost there. Now paste the following into the Body field:

‍ {
"email": "Insert Form Variable",
"first_name": "Insert Form Variable",
"tags": "Insert Form Variable"
}

Where it says Insert Form Value, click the Insert Variable option (purple + button in the right-hand corner of the Body field) and go to Form fields → email. Repeat this for each field you want to send. Your settings should look like this:

Screenshot of Webflow showing the final configuration of the Make HTTP request action

16. Now, test your flow by clicking Run test to complete setup.

17. Enter a testing email address and hit Run test. You should now see a new subscriber in ConvertKit.

18. You're done! You can celebrate and kick back, knowing your integration is working smoothly.

Conclusion

There you have it: a way to segment my audience in ConvertKit from a native Webflow form. All this without relying on 3rd party apps like Zapier or Make.

The beauty of Webflow Logic is that you can build more complex automations. As in my example, I can segment people in ConvertKit based on a selected option in the signup form. You can send additional attributes with each form such as custom fields (ie. Company name etc). Here's the full ConvertKit API specification for adding new subscribers.

I hope this tutorial was helpful. If you have any questions, feel free to send me a DM on Twitter/X.

A screenshot of the FlowLetter newsletter issue.
Are you a Webflow Developer? Join my newsletter!

Every week I share how to guides, resources, design inspiration and stories from the world of Webflow. Join 100+ other Webflow developers and let's grow together.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.