Pardot

How to integrate Pardot with Webflow

Pardot integration with Webflow enables B2B marketing teams to capture leads, track visitor behavior, and trigger nurture campaigns based on site interactions. Marketing automation workflows run automatically when prospects submit forms, download content, or engage with specific pages, turning your Webflow site into a lead qualification engine that identifies sales-ready prospects through engagement scoring and behavioral tracking.

You can integrate Pardot with Webflow through Form Handlers, tracking code, iframe embeds, or API implementations. Form Handlers submit form data directly to Pardot endpoints while keeping your Webflow design intact.

Pardot Form Handlers

Form Handlers give you complete design control in Webflow while capturing lead data in Pardot. Your forms look exactly like your site because they are your site with no iframe styling conflicts or responsive behavior issues. This method works by setting your Webflow form's action attribute to post directly to a Pardot Form Handler endpoint, though it requires precise field name matching (case-sensitive) and can fail silently if configuration is incorrect.

According to implementation guidance from Salesforce partners, Form Handlers are the recommended approach when design consistency matters more than advanced form features like progressive profiling.

Configure Form Handlers with these steps:

1. Create a Form Handler in Pardot under Marketing > Forms > Form Handlers
2. Map Pardot prospect fields to external field names (these must match your Webflow field names exactly, including capitalization)
3. Copy the endpoint URL from your Form Handler configuration
4. In Webflow, set your form's Action to the endpoint URL (must use HTTPS) and Method to POST
5. Set each form field's Name attribute to match the exact external field name from Pardot (case-sensitive matching is critical)

Form Handlers don't support progressive profiling (showing different form fields based on what Pardot already knows about a prospect) or native bot protection. Forms redirect to success/error URLs by default, so you need custom JavaScript for inline messaging. Additionally, Form Handlers do not support file uploads. If you require file upload functionality (with a 50 MB limit), you must use native Pardot embedded forms instead. Read the Form Handler troubleshooting guide for common configuration issues.

Pardot tracking code

Tracking code monitors visitor behavior across your Webflow site and feeds behavioral data into Pardot's scoring algorithms. The JavaScript snippet tracks page visits and identifies returning prospects for campaign attribution and engagement scoring.

Install tracking code with these steps:

1. Get your tracking JavaScript from Pardot under Marketing > Campaigns, select the relevant campaign, and click View Tracking Code
2. In Webflow, navigate to Site Settings > Custom Code
3. Paste the tracking code in the Footer Code section (before the closing </body> tag)
4. Publish your site to activate tracking

The first-party tracking implementation guide specifies footer placement for proper cookie management. Preview mode won't execute tracking scripts, so you must publish to test. For GDPR compliance, integrate with Pardot's Tracking & Consent JavaScript API to control tracking activation based on user consent.

Add tracking code in Webflow through custom code capabilities in site settings or per-page custom code sections.

Iframe form embedding

Embed Pardot forms directly using iframe code to access native features like progressive profiling and file uploads (with a 50 MB size limit per upload). This approach trades design flexibility for automation capabilities. Forms display Pardot's styling rather than your Webflow design, and the iframe height may require adjustment to prevent scrollbars when progressive profiling or dependent fields change form height dynamically.

Get iframe embed code from Pardot's form configuration page. In Webflow, drag a Code Embed element to your page and paste the iframe code. Note that while iframe embedding is technically possible, Form Handlers are the recommended approach for better design control and responsive behavior.

According to best practices documented in integration guides, Form Handlers keep your Webflow design aesthetics and remove styling conflicts, whereas iframe embedding can create responsive design issues and limits your design flexibility. For detailed guidance on configuring Form Handlers as the primary integration method, refer to Pardot Form Handler setup documentation.

When using iframe-embedded Pardot forms, height changes dynamically with form fields, though this can create responsive design challenges with unpredictable height adjustments.

However, you sacrifice design consistency and must style forms through Pardot's layout templates rather than Webflow. Alternatively, using Pardot Form Handlers keeps complete design control in Webflow but removes progressive profiling support and file upload functionality. Review the forms deployment documentation for iframe requirements and HTTPS protocols.

Build with Webflow and Pardot APIs

API integration supports more complex automation workflows than simple form embedding, but with important architectural constraints. Use APIs when you need bidirectional data sync (with delays for polling), dynamic content personalization based on engagement scores, or automated list membership updates.

However, API-based integrations require development expertise and don't provide instant automation. Pardot lacks traditional outbound webhooks. Instead, Pardot uses External Actions, which are invocable actions that must be explicitly placed within Engagement Studio programs rather than automatically triggering on prospect activities. External Actions are subject to a 100,000 daily limit per Business Unit.

Both platforms use OAuth 2.0 authentication for Pardot and Bearer token authentication for Webflow. Pardot requires a Business Unit ID header in every request. Webflow supports site tokens for single-site access or OAuth for multi-site implementations.

Review the complete Pardot API v5 documentation and Webflow API v2 reference for endpoint specifications and authentication requirements. Note that Pardot API v5 uses OAuth 2.0 authentication with the base URL https://pi.pardot.com/api/v5/ and requires a Pardot-Business-Unit-Id header in every request, while Webflow API v2 uses Bearer token authentication with the base URL https://api.webflow.com/v2/.

Automated lead capture from form submissions

Configure Webflow forms to submit directly to a Pardot Form Handler endpoint for prospect creation. This method removes manual data entry while maintaining your custom form designs.

Implementation flow includes these steps:

1. Use Webflow's webhook functionality for form submissions by sending POST to https://api.webflow.com/v2/sites/{site_id}/webhooks with form_submission trigger type
2. Map form field names exactly to Pardot prospect fields (case-sensitive matching required)
3. Create or update prospects using POST /api/v5/objects/prospects/do/upsertByEmail for deduplication, which creates new records if email doesn't exist or updates existing prospects
4. Alternatively, POST directly to Pardot Form Handler endpoint https://go.pardot.com/l/{campaign_id}/{form_handler_id} for prospect creation without requiring OAuth authentication
5. Store prospect IDs returned from API responses for future updates or reference in subsequent workflows

The upsert endpoint prevents duplicate records by updating existing prospects when email addresses match. Webflow provides webhook functionality for form submissions with the webhook trigger pattern. However, Pardot does not provide traditional outbound webhooks for syncing data back to Webflow, requiring manual polling with timestamp-based filtering for bidirectional synchronization workflows.

List membership management

Automatically add prospects to Pardot lists based on Webflow form submissions and tracked interactions. This segmentation approach supports targeted nurture campaigns for specific interest areas, though it requires custom API integration to map Webflow page interactions to Pardot list membership actions.

Create list memberships by using POST /api/v5/objects/list-memberships with listId and prospectId to add prospects to specific lists. According to the List API v5 documentation, this endpoint creates the membership relationship between a prospect and a segmentation list.

Export list membership data to Webflow CMS using the List Membership API endpoints. According to the List API v5 documentation, you can query list memberships via GET /api/v5/objects/list-memberships with the listId parameter to retrieve all prospects in a specific list. This lets you display Pardot list members on your Webflow site for member directories, event attendee lists, or customer galleries by syncing prospect data to Webflow CMS collections.

Integrate Webflow visitor actions through form submissions and custom code, capture prospect emails via forms, and manage list memberships through Pardot's API based on form submission data and behavioral triggers you configure.

Behavioral tagging

Track and score prospects based on Webflow interactions, then use engagement data to inform sales conversations and trigger marketing automation workflows. Monitor prospect behavior across your site, including form submissions, content downloads, and product feature engagement, to identify sales-ready leads and automatically activate nurture campaigns tailored to their demonstrated interests.

Add tags to prospects by using POST /api/v5/objects/prospects/{id}/do/addTag with tagId in the request payload. Remove tags using the corresponding POST /api/v5/objects/prospects/{id}/do/removeTag endpoint. Both endpoints are documented in the Salesforce Pardot Prospect API v5 guide.

Create and document tags in Pardot for your integration with proper configuration before implementation. According to Pardot integration best practices, tags should align with your marketing automation workflows and prospect segmentation strategy. Document each tag ID in a configuration spreadsheet for reference during integration code mapping. Tags can support various classification schemes such as content engagement tracking, prospect attributes, or campaign associations, depending on your specific use case and Pardot configuration.

Implement client-side or server-side tracking of Webflow interactions, then call Pardot's API through middleware to apply tags based on the specific pages, forms, or content prospects engage with.

What you can build

Integrating Pardot with Webflow supports B2B marketing workflows that combine design flexibility with enterprise automation capabilities.

• Resource libraries with gated content: Create content hubs where prospects submit forms to download whitepapers, case studies, or templates, then track which resources each prospect accesses, score engagement, and trigger nurture sequences based on content consumption patterns
• Event registration and post-event nurture: Build event landing pages in Webflow with registration forms that create Pardot prospects and assign them to event-specific lists, then track session attendance and engagement to trigger automated follow-up sequences based on participation levels
• Product trial signup with behavioral scoring: Create product trial signup flows where prospects register through Webflow forms and receive automated onboarding emails from Pardot, then track trial activity and feature usage patterns to score conversion likelihood and coordinate sales outreach timing
• Account-based marketing portals: Build dedicated microsites for target accounts with industry-specific content and company-tailored messaging where Pardot tracks engagement across multiple stakeholders within accounts to identify champions and coordinate sales follow-up during complex sales processes