Connect Webflow to ActiveCampaign

With ActiveCampaign's Webflow integration, you can connect multiple Webflow websites and forms to your ActiveCampaign account. The integration is built to support both single Webflow website customers to scaling agencies managing multiple end-client accounts.

With this integration, you can:

• Sync and map Webflow forms to ActiveCampaign.
• Embed ActiveCampaign forms with one click.
• Create lists, tags, and custom fields in Webflow without leaving your environment.
• Enable powerful site and event tracking with a few clicks — no coding needed.
• See all form history in your contact record (ActiveCampaign Enterprise plan only).

Take note

• This is a direct integration inside your Webflow workspace. Integration setup is completed within each Webflow website.
• This integration is available on all ActiveCampaign and Webflow plans.
• ActiveCampaign Enterprise Customers will have access to Custom Objects to capture multiple form submission from the same contact.
• Field mapping is available when integrated with a Webflow Form.
• Field mapping is not required when integrated with an ActiveCampaign Form.

Connect your Webflow account to ActiveCampaign

1. From your Webflow account, click on the Apps icon on the left menu.
2. Search for ActiveCampaign in the search bar at the top left.
3. Hover over ActiveCampaign in the list, then click the “Install” button that appears.
4. Once installed, hover over ActiveCampaign in the “Connected” section and click “Launch.”
5. In the ActiveCampaign login modal:
   
   • Enter your ActiveCampaign URL.
   • Enter your ActiveCampaign API Key.
   • (Optional) Give your ActiveCampaign account a Friendly Name to easily identify accounts in Webflow.
   • Click the “Add to this site” checkbox, and the connected ActiveCampaign account will be connected to this site only.
   • Click the “Add to workspace” checkbox, and the connected ActiveCampaign account will be accessible across all sites in your Webflow workspace.
6. Click "Sign in."
   
   

Sync Webflow forms with ActiveCampaign

Syncing your Webflow form allows you to map Webflow fields to ActiveCampaign fields, create new lists, tags, and custom fields, and retrieve existing lists, tags, and fields. Once field mapping is updated, all new submissions will reflect the new mapping rules.

1. From your Webflow account, click on the Apps icon on the left menu.
2. Search for ActiveCampaign in the search bar at the top left.
3. Hover over ActiveCampaign in the “Connected” section and click “Launch.”
4. Click on the ActiveCampaign account you want to work with.
5. Click “Sync Webflow forms with ActiveCampaign.”
6. Click the Webflow form you want to sync, then click "Set up form sync."
7. If there are multiple Webflow forms on your website, you can manually select the form for field mapping by clicking “Select Form Manually?”
8. From the “Select ActiveCampaign List” dropdown, either select an existing list or create a new list.
   
   • If you create a new list, complete the following fields:
     
     • List Name
     • Description
     • List URL (Company website URL for legal compliance)
     • Reminder Message
       
       

         Once the new list is created, it will be auto-selected in the “Select ActiveCampaign List” dropdown.

9. Once you select a list, click “Continue to Field Mapping.”
10. Review the sync configuration, then click “Save & Active Sync.”
11. Map Webflow fields to ActiveCampaign fields:
    
    • Sync additional fields by clicking Add Another Field Mapping
    • Create new ActiveCampaign custom fields by clicking Create New ActiveCampaign Field, then:
      
      1. Enter the name of the new custom field and field type.
      2. Click Create Field
    • If field types are misaligned, a warning message will appear. Learn more about field type warning alerts.
12. In the “Tags” field, you can include multiple existing or new tags to associate with a contact. To add tags:
    
    • Existing tags: you must type the entire tag name, then click the tag name when it appears below the field.
    • New tags: type in the name of the tag, then click “Create (tag name).”
13. After completing field mapping and tag selection, click “Start Sync.”
14. Important: Click “Publish Webflow Site.” Publishing your site will make the sync configuration active for form submissions.
15. To edit or delete your form sync, click “View All Syncs.”

Field Type Warning Alerts

Custom objects: record multiple submissions from contacts

Available on Enterprise.

• Learn how to upgrade your ActiveCampaign account or contact our customer experience team.
• For our agency or reseller partners, reach out to your Partner Manager.

If using an ActiveCampaign inline form:

You can add custom object fields to inline forms only. This lets you collect data from multiple form submissions from the same contact, and then display and take action on that information.

Learn how to build forms with Custom Objects to set this up.

If using a Webflow form:

ActiveCampaign will automatically create a historical record of each form submission from the same contact in our Webflow Custom Object section in your contact record.

To find the Webflow Custom Object in ActiveCampaign, click into a contact record, then scroll down to the section below the Tags, List, and Automations section:

• To name your custom object, update the Form settings section in Webflow.
• To see a list of fields related to your Webflow form and their field value, click the three dots > Details in the contact record custom object section, and a right panel will appear.
  
  

Learn more about how to use data from your Webflow Custom Object to automate triggers and email personalization in our custom objects overview.

Use contact custom objects with automations

You can use custom objects to trigger automations, as well as personalize your messaging and create conditions with the segment builder.

Here is a list of automation actions that you can use to reference custom object data.

You can also reference custom objects when creating list segments, advanced searches, campaigns, lead scores, and webhooks. Learn how to use custom objects with automations.

Embed an ActiveCampaign form in Webflow

You may search and embed any of your ActiveCampaign inline, floating bar, floating box, or modal forms to your Webflow site with one click.

Important:

• You will not see a preview of your ActiveCampaign form in your Webflow environment
• You do not need to map your ActiveCampaign form
• Form submissions will be recorded according to your standard and custom fields
• Multiple submissions of the same form from the same contact may be overwritten unless you have a Custom Object set up for the form. This is available for ActiveCampaign Enterprise customers
• If you use the “File Upload” block in your form, the file will not sync in your custom field or upload to ActiveCampaign
• Click “Publish Webflow Site.” Publishing your site will make the sync configuration active for form submissions

How to embed an ActiveCampaign form in Webflow:

1. From your Webflow account, click on the Apps icon on the left menu.
2. Search for ActiveCampaign in the search bar at the top left.
3. Hover over ActiveCampaign in the “Connected” section and click “Launch.”
4. Click on the ActiveCampaign account you want to work with.
5. Click “Embed ActiveCampaign forms in Webflow.”
6. Search for the ActiveCampaign form in the list.
   
   
   
   
7. In the Webflow environment, select the section of your form where you would like your form to be embedded.
8. Then, in the modal, click “Embed” next to the form you want to embed. A green success message will show at the top right when the form has been embedded.
9. To review the position of the form once it is embedded in Webflow, click the icon with three horizontal lines. You can also move the form to a different section from this area in Webflow.
   
   
   
   
10. Important: Click “Publish Webflow Site.”

Enable ActiveCampaign event tracking

Add event tracking to your Webflow site to capture user interactions and trigger automations in ActiveCampaign. The event types available for tracking include:

• Click: Track clicks for images, fields, buttons, etc for a known contact
• Element Visible: Track if known contact has reached or viewed different sections of the website.
• Time on Page: Measures the duration in seconds a known contact spends on a specific page in.

How to set up ActiveCampaign event tracking in Webflow:

1. From your Webflow account, click on the Apps icon on the left menu.
2. Search for ActiveCampaign in the search bar at the top left.
3. Hover over ActiveCampaign in the “Connected” section and click “Launch.”
4. Click on the ActiveCampaign account you want to work with.
5. Click “Enable ActiveCampaign event tracking.”
6. To retrieve your Event Key and Act ID, go to your ActiveCampaign account and click Website > Site tracking on the left menu. In the “Event Tracking” section, toggle to the on position:
   
   • Event Key is the information in the “Event Key” field.
   • Act ID: Click the “Event Tracking API” hyperlink. The Act ID is the number in the first bullet point.
7. In Webflow, enter your Event Key and Act ID.
8. Click “Save Credentials.” Once saved, your login will be recorded for future logins.

How to set up event tracking in your Webflow webpage:

1. Once event tracking is set up, from the event tracking modal, select any element in the Webflow Designer to add event tracking and monitor user interactions.
2. The modal will update with new options based on the element you select in the last step. Select an “Event Type” and an “ActiveCampaign Event” for the element.
3. To create a new ActiveCampaign Event: Click “Create New ActiveCampaign Event,” then type in an “Event Description” and “Event Name.” These will be displayed in the contact activity record:
   
   
   
   • “Event Description” - In the example below, the Event Description is “This event sends me to a 2nd page.”
   • “Event Name” - In the example below, the Event Name is “Button Text.”
     
     
     
     
4. Click “Create Event.” The newly created event will be in the dropdown and viewable in the Event Tracking section of your ActiveCampaign account.
5. IMPORTANT: Click “Publish Webflow Site. Publishing your site will make the sync configuration active for event tracking.
6. To delete event tracking from elements, click the trash can icon.

Time on Page event tracking

Tracking Time on Page events is a great way to gauge user engagement on your website. This metric measures the duration a user spends on a specific page, from the moment the page loads until they navigate away or close the browser. This data is invaluable for marketers looking to optimize their site for user experience and content relevance.

You will be able to track the event in the Recent Activities log in your contact record. The event can also act as a trigger to start an automation, personalization in emails, and be used for segmentation.

To enable Time on Page tracking, in the Event Tracking modal, click the toggle to the on position.

Enable ActiveCampaign site tracking

Site tracking connects your marketing and sales processes to your website activity. It allows ActiveCampaign to "see" and "react" in real-time as contacts visit your site and view specific categories and pages.

Activate site tracking across your entire Webflow site with one click, allowing you to monitor visitor behavior and enhance automation.

1. From your Webflow account, click on the Apps icon on the left menu.
2. Search for ActiveCampaign in the search bar at the top left.
3. Hover over ActiveCampaign in the “Connected” section and click “Launch.”
4. Click on the ActiveCampaign account you want to work with.
5. Click “Enable ActiveCampaign site tracking.”
6. Click the checkbox next to your Webflow website’s URL to turn on site tracking for your Webflow site.
7. To check the status of your white-listed domains: From ActiveCampaign, click Website > Site Tracking on the left menu and view the “Whitelist and Install Code section.”
8. IMPORTANT: Click "Publish Webflow Site.” Publishing your site will make the sync configuration active for site tracking.
9. Click “Disable site tracking” to remove.

ActiveCampaign does not display anonymous site tracking data for anonymous visitors. Site tracking will only work with known contacts. Learn more about how site tracking works.

Disconnect ActiveCampaign from Webflow 

1. From your Webflow account, click on the Apps icon on the left menu.
2. Search for ActiveCampaign in the search bar at the top left.
3. Hover over ActiveCampaign in the “Connected” section and click “Launch.”
4. Click on the trash can icon next to the ActiveCampaign account at the bottom of the login modal.
   
   
   
   
5. To prevent accidental removal of your account, you will be given the option to keep syncing your form even if your account is removed from the login screen.