ActiveCampaign

How to integrate ActiveCampaign with Webflow

Integrate ActiveCampaign with Webflow to capture leads from Webflow forms and automatically add them to ActiveCampaign email campaigns without manual data entry. This integration can also track how visitors interact with your site to trigger personalized automations based on behavior. And sync contact data between platforms to keep your marketing lists current.

Connect Webflow and ActiveCampaign through the native marketplace app for no-code form syncing and event tracking. You can also set up direct embed codes for ActiveCampaign's native forms or build custom workflows using both platforms’ APIs. The ActiveCampaign API and Webflow API support bidirectional data sync when you need advanced automation logic.

Use the ActiveCampaign app

Install the ActiveCampaign app directly from Webflow's App marketplace.

Or, go to the Apps panel from your Webflow dashboard, connect using your ActiveCampaign URL and API key, then map existing Webflow forms to ActiveCampaign lists.

The app handles field mapping, contact creation, and site tracking. You can also embed ActiveCampaign forms directly using inline, floating bar, floating box, or modal formats.

The app provides these capabilities:

• Map Webflow form fields to ActiveCampaign contact fields, custom fields, lists, and tags through a visual interface
• Insert pre-built ActiveCampaign forms without field mapping requirements
• Track clicks, element visibility, and time on page to trigger automations
• Create lists, tags, and custom fields directly in Webflow

With an ActiveCampaign Enterprise plan, the Custom Objects feature records all historical form submissions for each contact in their contact record.

Note: The app requires publishing your Webflow site before sync configurations activate. The app's visual event tracking configuration doesn't work when setting up tracking for clicks or visibility in Navigation or Footer sections, though ActiveCampaign's general site tracking code can be placed in the footer.

Direct embeds and widgets

ActiveCampaign provides embed codes when you need their native form styling or want to bypass Webflow form limitations.

Create forms in ActiveCampaign's form builder, customize styling, then copy the embed code. Add an Embed element to your Webflow page and paste the code.

ActiveCampaign offers these embed options:

• Simple Embed: Single JavaScript tag that loads forms asynchronously
• Full HTML Embed: Complete form markup for custom styling control

Forms display in multiple formats:

• Inline (embedded in content)
• Floating bar (persistent header/footer)
• Floating box (corner overlay)
• Modal (pop-up)

Direct embeds bypass field mapping but give you less control over form styling within Webflow. Forms submit directly to ActiveCampaign without Webflow form submission records.

Build with Webflow and ActiveCampaign APIs

The ActiveCampaign API and Webflow API enable bidirectional data sync, custom automation triggers, and integrations with external systems.

API integrations require authentication:

• ActiveCampaign uses API keys with Api-Token headers
• Webflow uses Bearer tokens for authentication

Sync form submissions to contacts

Webflow's Forms API retrieves form submissions via GET /forms/{formId}/submissions.

ActiveCampaign's Contact Sync API creates or updates contacts via POST /api/3/contact/sync.

Set up Webflow webhooks with triggerType: "form_submission" to receive real-time notifications when forms submit. Parse webhook payloads and call ActiveCampaign's contact sync endpoint to create contacts with mapped field data.

Implementation pattern:

{
  "contact": {
    "email": "user@example.com",
    "firstName": "John",
    "lastName": "Doe",
    "fieldValues": [
      {"field": "1", "value": "Custom field data"}
    ]
  }
}

Webflow webhooks deliver to HTTPS endpoints only. ActiveCampaign's contact sync endpoint upserts by email so that existing contacts update and new contacts create.

Track site events and trigger automations

ActiveCampaign's Event Tracking API records custom events via POST https://trackcmp.net/event.

Send event data from Webflow pages using client-side JavaScript or serverless functions. Events trigger automations in ActiveCampaign based on visitor behavior like page views, button clicks, or custom interactions. The API accepts event names, custom data objects, and contact identifiers.

Event tracking payload:

{
  "event": "viewed_pricing",
  "eventData": {"plan": "enterprise"},
  "email": "user@example.com"
}

Events link to contacts by email address. Use JavaScript on Webflow pages to capture interactions and send event data to your serverless function, which calls ActiveCampaign's API.

Sync CMS data with webhooks

ActiveCampaign webhooks send real-time notifications for contact updates, list changes, and campaign activity. Create webhooks via POST /api/3/webhooks with your endpoint URL and event types. Supported events include subscribe, unsubscribe, update, contact_tag_added, and deal_add. Receive webhook payloads at your endpoint and update Webflow CMS collections via POST /collections/{id}/items.

Webhook configuration:

{
  "webhook": {
    "name": "WebflowSync",
    "events": ["subscribe", "update"],
    "url": "https://your-endpoint.com/webhook"
  }
}

ActiveCampaign webhooks guarantee at-least-once delivery but may send duplicates. Implement idempotent processing to handle duplicate webhooks safely. Implement monitoring and error handling for webhook delivery.

What you can build

Integrating ActiveCampaign with Webflow supports automated lead capture, behavioral marketing campaigns, contact lifecycle management, and cross-platform data synchronization.

• Automated lead nurturing workflows — Sync Webflow form submissions to ActiveCampaign lists, automatically assign tags based on form content, and trigger multi-step email sequences for product trials or consultation requests
• Behavioral automation triggers — Track visitor interactions like pricing page views or demo video watches, send event data to ActiveCampaign, and trigger personalized follow-up campaigns based on engagement patterns
• E-commerce customer journeys — Capture Webflow order data through forms or webhooks, sync purchase information to ActiveCampaign custom fields, and automate cart abandonment sequences or repeat purchase campaigns
• Agency client dashboards — Build client-facing sites in Webflow with embedded ActiveCampaign campaign performance data by syncing contact growth metrics to Webflow CMS collections through regular API polling or webhook-triggered updates (requires significant custom development and ActiveCampaign reporting APIs)