Leadpages

Site design, CMS-driven content, and hosting are well covered in Webflow, but conversion-focused campaigns often need an extra tool for landing-page testing, pop-ups, text replacement, or lead enrichment. Leadpages fills that role, letting you embed pop-ups and alert bars, publish campaign pages on a branded subdomain, and sync lead data into Webflow CMS collections via Zapier or the Webflow Data API.

This integration delivers the most value to growth marketers running paid campaigns, agencies managing multi-client campaign pages, and solo founders who need A/B-tested lead capture without code. SaaS teams, e-commerce brands, and coaches building email lists also benefit from combining the two platforms.

How to integrate Leadpages with Webflow

What is Leadpages? Leadpages is a conversion-focused platform for building landing pages, pop-ups, alert bars, and lead capture forms. It has A/B testing, text replacement for ad keyword matching, and heatmaps on higher-tier plans. It also connects natively with CRMs, email tools, and ad platforms. Leadpages has operated since 2012 and serves over 1.3 million businesses.

Teams often pair Leadpages with Webflow when they need conversion-specific tools not available natively. A common setup puts the brand site, blog, and documentation on Webflow. Leadpages handles campaign landing pages, exit-intent pop-ups, and A/B tests. Design control stays in Webflow, while Leadpages handles conversion testing.

Leadpages connects to Webflow in three ways:

• Leadpages embed code lets you add pop-ups, alert bars, and Lead Agent embeds to Webflow pages by pasting JavaScript snippets into custom code in head and body tags or Code Embed elements.
• Zapier automation syncs Leadpages form submissions into Webflow CMS collections without writing code.
• The Webflow Data API and Leadpages webhooks give you full control over lead data routing, CMS item creation, and site publishing. They require server-side development.

Most implementations use two or more of these methods based on the setup.

Add Leadpages pop-ups and alert bars with embed code

Leadpages generates JavaScript embed snippets for pop-ups, alert bars, and Lead Agent embeds. You paste these snippets into the custom code fields or Code Embed elements. The Leadpages components load on your published pages. It is the fastest integration method and does not require Zapier or API development. A paid site plan or a qualifying Workspace plan is required because free Starter plans cannot use custom code. Any paid Leadpages plan works.

Leadpages provides four embeddable component types, each with a different placement in Webflow:

• Pop-ups with timed or exit-intent triggers go in your site-wide footer code
• Click-triggered pop-ups that need to appear at a specific position go in a Code Embed element
• Alert bars (sticky announcement banners) go in your site-wide footer code
• Lead Agent embeds go in footer code or page-level custom code

Each method follows the same pattern: generate the embed code in Leadpages, then paste it into the correct Webflow code field.

Embed a site-wide pop-up

Timed and exit-intent pop-ups use invisible trigger code that fires automatically. Placing the snippet in your site-wide footer code activates the pop-up on every page.

To add a site-wide pop-up:

1. In Leadpages, go to Conversion Tools > Pop-Ups and open the actions menu for your pop-up
2. Click Publishing Options, select your trigger type (timed, exit-intent, click, or other), and click Get Code
3. Copy the full snippet, which includes both the JavaScript loader and the trigger code
4. In Webflow, go to Site Settings > Custom Code and paste the snippet into the Footer code field
5. Click Save Changes and then Publish your site

The pop-up will not appear in the Designer canvas. Custom code renders only on the published site. Verify by opening your live page in a browser and triggering the pop-up condition.

Embed a click-triggered pop-up on a single page

Standard (click-triggered) pop-ups render a visible button or link at a specific position on the page. A Code Embed element places the trigger exactly where you need it in the layout.

To add a click-triggered pop-up:

1. In Leadpages, go to Conversion Tools > Pop-Ups, click the actions menu (⋯) for your pop-up, select Publishing Options, choose the Standard trigger type, and click Get Code
2. In Webflow, open the target page and drag a Code Embed element from the Add Panel to the desired position on the canvas
3. Double-click the Code Embed element to open the code editor, paste the full Leadpages snippet, and click Save & Close
4. Publish your site

To confirm the embed is working after publishing, open the page in a browser. Right-click, select View Page Source, and search for "leadbox" to locate the Leadpages code.

Embed an alert bar

Alert bars are sticky banners that appear at the top of the page on desktop and the bottom on mobile. They support opt-in forms, buttons, text links, and plain announcements.

To add an alert bar:

1. In Leadpages, go to Conversion Tools > Alert Bars and open the actions menu for your alert bar
2. Click Publishing Options > Copy Code
3. In Webflow, go to Site Settings > Custom Code and paste the snippet into the Footer code field
4. Click Save Changes and Publish

The alert bar stays visible on scroll and reappears on page reload. It appears on every page where the embed code is present.

Publish Leadpages to a branded subdomain

You can skip embed code entirely by publishing Leadpages to a subdomain of your domain (for example, offers.yourdomain.com). Webflow runs on the root domain. The two platforms operate independently, and visitors see the same brand domain throughout.

To set up a Leadpages subdomain:

1. In Leadpages, click your account name (top right) > Custom Domains > Connect Domain
2. Enter your subdomain URL (for example, offers.yourdomain.com) and note the CNAME record Leadpages provides
3. At your domain registrar, add the CNAME record pointing the subdomain to Leadpages
4. Wait for DNS propagation (minutes to 48 hours), then publish pages to the subdomain in Leadpages

No changes are needed in Webflow. Link to your Leadpages subdomain pages using standard buttons or navigation links in Webflow. This approach works well for teams that want campaign pages with A/B testing and Smart Traffic. It also avoids modifying site code in Webflow.

If the pop-up or alert bar embed stops working after changes in Leadpages, re-publish the component in Leadpages to generate a fresh embed code. Then re-paste it into the corresponding Webflow code field. The embed code updates every time you change trigger options in Leadpages. Deleting a pop-up in Leadpages does not remove the embed code from Webflow. Always clean up the Webflow code field first to avoid broken JavaScript on the live site.

Connect Leadpages and Webflow with Zapier

Zapier has a direct Leadpages-to-Webflow connection. It lets you automatically create Webflow CMS items from Leadpages form submissions without writing code. This is useful for building a leads database, testimonials collection, or registration list directly in the CMS and displaying them in a Collection List.

Zapier provides one pre-built template for this integration: Create Webflow items from new Leadpages form submissions. You can also build a custom Zap from scratch.

To set up the Zapier integration:

1. Log into Zapier and click Create Zap
2. For the trigger, select Leadpages and choose its form-submission trigger, then connect your Leadpages account via OAuth
3. For the action, select Webflow and choose Create Item, then connect your Webflow account via OAuth
4. Select your site and the target CMS collection (for example, a "Leads" collection)
5. Map each Leadpages form field (name, email, phone) to the corresponding CMS collection field
6. Click Test to run a sample submission, verify the CMS item was created, and click Turn On

Zapier supports these Leadpages triggers and Webflow actions:

• Leadpages form-submission trigger paired with Webflow Create Item or Create Live Item actions
• Webflow Find Item search for checking duplicates before creating new CMS items
• Webflow Update Item action for updating existing leads with new submission data

These actions cover the most common no-code workflows: simple lead logging, duplicate checks, and record updates.

The Leadpages trigger fires instantly on form submission. Plan your collection capacity accordingly if you expect high submission volume.

Build with the Webflow and Leadpages APIs

Teams that need full control over data routing can use a direct webhook-to-API approach instead of a third-party dependency like Zapier. Leadpages sends form submission data as a signed JSON payload to any HTTPS endpoint.

A server-side application receives that payload, transforms the data, and writes it to the CMS via the Webflow Data API. This path requires a developer who can build and maintain a lightweight middleware service.

Relevant APIs and developer resources include:

• The Leadpages developer hub is live but marked coming soon, with partial documentation available
• The Data API v2 handles CMS collections, collection items, form submissions, and site publishing
• Leadpages webhooks fire real-time form submitted, page published, page updated, and page deleted events to any HTTPS endpoint

These resources cover the core pieces of a custom Leadpages-to-Webflow data pipeline.

Webhooks are available on Leadpages plans and do not count toward the active integration limit.

Sync form submissions to Webflow CMS via webhook

A common API setup routes Leadpages form submissions directly into a Webflow CMS collection. Every submission fires a signed HTTP POST to your endpoint. Your middleware creates a corresponding CMS item.

To implement this:

1. Create a CMS collection in Webflow with fields matching your Leadpages form (for example, Name as plain text, Email as plain text, Source as plain text)
2. Build an HTTPS endpoint on your server that accepts POST requests and parses JSON
3. In Leadpages, go to your form's integration settings, paste your endpoint URL, and map the fields you want included in the webhook payload
4. When a submission arrives, your middleware sends a POST request to https://api.webflow.com/v2/collections/{collection_id}/items/live with the mapped field values and a Bearer token for authentication
5. Validate the webhook signature using HMAC-SHA256 to verify the request came from Leadpages

Each Leadpages webhook payload includes form field data, page metadata, and UTM parameters. The payload is configurable per webhook endpoint, so you choose which fields to include. To inspect the exact field names and nesting structure before building your middleware, point the webhook URL at webhook.site and submit a test form.

For sites that need CMS items to appear immediately without a manual publish step, use the /items/live endpoints. For items that should go through a review workflow, use the standard /items endpoints to create drafts. Then publish them separately via POST /v2/collections/{collection_id}/items/publish.

What you can build with the Leadpages Webflow integration

Integrating Leadpages with Webflow lets you run high-converting campaigns alongside a design-controlled brand site without rebuilding pages in a second platform.

• A/B-tested landing pages for paid search: Publish Leadpages campaign pages on a branded subdomain with text replacement that matches ad keywords to page headlines. Your Webflow site handles organic and brand traffic. Leadpages runs ad-specific pages with Smart Traffic routing visitors to the highest-converting variant.
• Exit-intent lead capture on blog posts: Embed Leadpages pop-ups on Webflow blog pages that trigger when a visitor moves to leave. The pop-up collects email addresses and routes them to your email platform: Klaviyo, Mailchimp, or ActiveCampaign. Zapier creates a CMS item in a "Subscribers" collection for display on your site.
• Product launch funnels with embedded checkout: Build a waitlist page, launch day sales page, and post-purchase upsell page in Leadpages with Stripe checkout embedded directly. Link to these pages from your Webflow storefront. The full funnel stays on your branded domain through a subdomain setup.
• Agency campaign page delivery at scale: Manage client brand sites in Webflow and use Leadpages for ongoing campaign pages, seasonal promotions, and event registrations. The Leadpages Scale plan supports workspaces and audit logs for multi-client management. A/B testing runs independently from the Webflow site.

If you need more control over lead data routing or CMS item creation logic, the API integration path covers those cases.