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.
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.
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.
Your Select Field settings should look like this:
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.
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.
Next, you’ll select your form from the dropdown in the right-hand panel.
Step 4: Add and configure the HTTP request block
1. In the left-hand panel, select Make HTTP request.
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 Settings → Advanced. 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.
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 Grow → Landing 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.
12. Now paste your Form ID in this URL template:
https://api.convertkit.com/v3/...{form_id}/subscribe
So the result for me looked like this:
https://api.convertkit.com/v3/...
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. Add another header in the Headers section, and paste meta charset in the Name field. In Value paste: UTF-8
16. 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:
17. Now, test your flow by clicking Run test to complete setup.
18. Enter a testing email address and hit Run test. You should now see a new subscriber in ConvertKit.
19. 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.
👋 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:
