How I Connect Webflow & ActiveCampaign for Free!

Tired of relying on tools like Zapier or Pipedream to connect ActiveCampaign and Webflow?

Same.

So I figured out a way to send form submissions from native Webflow forms directly to ActiveCampaign WITHOUT any other tools.

Here's the gist of this workflow:

• You create a native form in Webflow
• Somebody fills out the form
• Webflow Logic will add that person to ActiveCampaign along with tags

So we won't need to integrate Webflow API as we aren't leaving Webflow at all. Rather we'll be setting up an automation sequence directly inside Webflow using Logic.

Webform Logic to The Rescue

Love the Webflow way of doing things? The super smooth and powerful UI to build your website?

Well Webflow knocked it out of the park again with Webflow Logic, a UI that lets you configure "triggers" and "actions".

For example, when there is a new form submission (trigger) then call an external API (action).

Heads up! This involves some technical knowledge, or just a solid ability to follow step-by-step instructions 😜

My Thoughts on Logic – Already a Really Great Tool, But Looking Forward to More Features

If you care to know what this stranger things about Webflow Logic...

I love it. It's absolutely an awesome development to carry out logic directly inside Webflow. They are developing an ecosystem (kind of like Apple) that's very intuitive and keeps everything simple and in one platform.

After working in it for my first Logic flow, I saw some immediate ways it can be improved.

But the fact is I was successfully able to send Webflow Form Submissions to ActiveCampaign.

Here are some things I would like to see:

• Publish directly (instead of staging, backing out, then publishing)
• See history in more detail (you can see historical runs, but not the output of each action)
• Duplicate actions (would have saved me a bunch of time)
• Pick up custom hidden HTML fields (I used them to populate the form with info from the CMS although I don't this feature will ever be made)

All in all, I got it to work well, but used some workarounds which I'll cover.

Oh and BTW, if you're wondering how fast this works, it seemed like it was instant. Maybe even faster than relying on a third-party tool as the entire flow happens without leaving Webflow.

An Outline of What I Built And What I Am Demoing

I have a CMS collection of free offerings ("lead magnets") that have an opt-in form.

When there is a new form submission, I need the email along with some information from the CMS record to send to ActiveCampaign.

The CMS record carries info about the free offering so we can add a certain tag to the contact to kickstart an ActiveCampaign Automation.

For example if they download Offering A, send the email to ActiveCampaign and tag them with "Offering A".

Note: If your form isn't a part of a collection/there is no dynamic info needed, this tutorial will still work for you.

Step-By-Step Tutorial On Sending Webflow Form Submissions to ActiveCampaign

Alright, let's get this sick Webflow ActiveCampaign setup!

I'll be walking you through my setup which I think is a bit advanced, but this should cover most use cases, even simpler ones.

Step 1: Add a New Flow in Webflow

Head over to the icons on the left and select Logic.

Create a new one.

Step 1 done.

Step 2: Add a trigger so when the form is submitted your flow will run

In this case we want to add a "Form Submission" trigger.

Do that and select the form you want to trigger this flow.

Step 2 done.

Step 3: Add an action to call the ActiveCampaign API to Add/Update the contact

I'm going to first show the simple setup (that is no conditions, no tagging, just adding the contact).

In order to add or update contact info in ActiveCampaign, we need to call their API.

So add the "Make HTTP Request" action to your flow.

ActiveCampaign has different endpoints/URLs to call depending on what you want to do.

First we need to call the contact sync endpoint which is super handy. In one go, it'll either create a new contact or update the contact if it already exists.

I'll lay out the steps but first I want to explain in plain english what we are doing...

We are going to send data to your ActiveCampaign URL by configuring the action to call the URL with your  API Key and the email from the form submission.

And here's what the final product will look like:

Here's how to create that:

1. Give your action a name such as "ActiveCampaign - Add/Update Contact"
2. Set Authentication to "API Token"
3. Set "Add to" as "header" (meaning we'll pass the API key as a header)
4. Set the header to "Api-Token"
5. Add your ActiveCampaign API key which can be found by going to Settings > Developer (the url is in the format https://YOURURL.activehosted.com/app/settings/developer)
6. Set "Request Method" to POST
7. Set URL to the URL that is on the ActiveCampaign Developer page
8. Add two headers (Accept: application/json, Content-Type: application/json)
9. Lastly add the body. To just add the email you'll use this format:

{
  "contact": {
    "email": "INSERT_EMAIL_VARIABLE"
  }
}

Note: You'll need to add your dynamic email variable by clicking the purple dot and finding the email field. Ensure you keep the quotes around it.

Okay, now you can test it by clicking the blue button and entering in a test email. Then go to ActiveCampaign to see if that email was added.

The next steps are optional. I did them because I needed to tag my contact with additional info.

Step 4: Add an action to call the ActiveCampaign API to tag the new contact

One of the nice things about Logic is you can use the returned values from previous actions.

So when you call to ActiveCampaign API to create/update the contact, the API returns the contact ID (which is necessary to tag the contact).

Next we are going to add an action of the type "Make HTTP Request" and call a different ActiveCampaign URL dedicated to tagging contacts.

The "Authentication" section is the same as before. The "General" section is different.

1. For the URL use: https://YOURURL.api-us1.com/api/3/contactTags
2. Use the same headers (Accept: application/json, Content-Type: application/json)
3. And add the following for the body while changing out your variables

{
  "contactTag": {
    "contact": "id",
    "tag": "Tag ID (Primary)"
  }
}

If you want to add more tags, repeat this step. You can only add one tag per API call.

Step 5: Add Email Notification

You can put this at any step (maybe start out with it).

Heads up! Once you add a Logic flow for a form submission, you will no longer receive the default notifications.

I added all the info I wanted plus the link to the contact in ActiveCampaign.

I did this by entering in the following:

https://YOURURL.activehosted.com/app/contacts/{{ id }}

You'll need to select the ID from the purple dot.

More Info Regarding Webflow ActiveCampaign Integrations

Is there a native ActiveCampaign Webflow integration?

Without Logic, no. If you Google how to integrate ActiveCampaign with Webflow you'll find many third-party tools such as Zapier, Pipedream, and Make (just a few examples). All these services require you to signup for another integration platform and often pay for them. These services do have additional functionality beyond what Logic can do if you find yourself running into an issue. My favorite app out of those three is Pipedream.

With Logic I think we can call it native. You don't need to leave the platform or rely on other tools. Although it requires some custom building so maybe it's not native (technically).

How fast is this ActiveCampaign integration?

Super fast. As soon as I test it by creating a new form submission and refresh ActiveCampaign, my information is already present.

The performance of Logic might be faster than the traditional method of waiting for an event from the Webflow API then sending that information to the ActiveCampaign API. By removing an intermediary system, we remove a level of latency.

What are some advantages of using an integration platform like Pipedream?

Using Logic isn't 100% the best solution. It's what I'm doing and it's working for me but let's shed light on several of the advantages of using Pipedream (or another integration platform).

• Don't have to mess with different API endpoints
• Can add much more complex flows with conditions, manipulation, and data stores
• Can easily add other apps to your automation sequence with just a few clicks (save time)
• Can view the history in a much more granular way (view every output of each step)
• Better tools to monitor your integrations
• Can add custom code

There are endless possibilities that can be efficiently added by using a third-party tool to handle your integrations.

However, I chose to connect ActiveCampaign and Webflow using Logic as it's built-in, costs nothing more, and can automate exactly what I needed.

How do I do more with the ActiveCampaign API?

Want to integrate with different ActiveCampaign lists? Or create a new deal?

Checkout the ActiveCampaign API docs here.

They are a bit basic, but I used ChatGPT to help out.

You can continue adding actions to your workflows and even call other apps mapping each returned value to the next action.