Pardot

How to integrate Pardot with Webflow

Pardot captures form submissions, tracks visitor behavior, and scores prospect engagement for B2B marketing teams. Integrating Pardot with Webflow lets you route leads directly to Pardot while keeping your custom form designs and site structure.

Use Form Handlers to capture leads through Webflow forms that post data directly to Pardot endpoints, and add tracking code to monitor visitor behavior. Embed Pardot forms via iframe if you need progressive profiling. For bidirectional data sync or automated workflows, build custom integrations with the Webflow and Pardot APIs.

Pardot Form Handlers and tracking code

Integrate Pardot with Webflow using Form Handlers and tracking code. Form Handlers post form data to Pardot endpoints while keeping your Webflow design. Set your form's action attribute to the Form Handler endpoint URL.

Configure Form Handlers through these steps:

1. Create a Form Handler in Pardot under Marketing > Forms > Form Handlers

2. Map Pardot prospect fields to external field names (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 (if Pardot shows "firstName", your Webflow field name must be "firstName", not "FirstName" or "firstname")

Form Handlers don't support progressive profiling (showing different fields based on what Pardot knows about a prospect) or native bot protection. Forms redirect to success or error URLs by default, and you need custom JavaScript for inline messaging. Neither Form Handlers nor native Pardot forms support file uploads. Both methods require third-party solutions like Dropbox file requests or Box.com upload widgets.

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 through 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

Preview mode won't execute tracking scripts; you must publish to test. For GDPR compliance, consider setting up a first-party tracking domain and integrating with Pardot's Tracking & Consent JavaScript API to control tracking activation based on user consent.

Iframe form embedding

Embed Pardot forms via iframe to access progressive profiling features. This trades design flexibility for automation, as the forms display Pardot's styling. The iframe height may need adjustment when progressive profiling dynamically changes form height.

Get iframe code from Pardot's form configuration and paste it into the Webflow Code Embed element.

The tradeoffs between methods include:

• Iframe-embedded Pardot forms: Height changes dynamically with form fields, creating responsive design challenges. You style forms through Pardot's layout templates rather than Webflow.
• Pardot Form Handlers: Maintain complete design control in Webflow, but don't support progressive profiling or file uploads.

Build with Webflow and Pardot APIs

Build custom integrations using Webflow API v2 and Pardot API v5 for bidirectional sync, engagement-based dynamic content, or automated list updates. Pardot syncs with Salesforce every 2-4 minutes. Pardot requires Business Unit ID headers; Webflow uses site tokens or OAuth.

Automated lead capture from form submissions

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

The implementation steps include:

1. Set your Webflow form's Action attribute directly to your Pardot Form Handler endpoint URL
2. Map form field names exactly to Pardot prospect fields (case-sensitive matching required)
3. Use POST /api/v5/objects/prospects/do/upsertByEmail to create or update prospects for deduplication, which creates new records if the email doesn't exist or updates existing prospects
4. Store prospect IDs returned from API responses for future updates

The upsert endpoint prevents duplicate records by updating existing prospects when email addresses match.

Engagement score synchronization

Sync Pardot prospect scores to Webflow CMS collections to display content based on engagement levels. This requires custom development and does not sync in real time. Webflow lacks native conditional rendering for prospects, so you'll need custom JavaScript or server-side logic to show different CTAs, case studies, or product recommendations based on score data.

The implementation steps are as follows:

1. Query prospects by score using GET /api/v5/objects/prospects with score filters to retrieve prospects above engagement thresholds
2. Update Webflow CMS by creating collection items using POST /v2/collections/{collectionid}/items
3. Map Pardot prospect scores to content variations
4. Store last sync timestamps to retrieve only updated prospects in subsequent API calls

External Actions in Pardot are outbound webhook triggers that must be manually placed within Engagement Studio programs. They don't automatically trigger on prospect activities.

List membership management

Automatically add prospects to Pardot lists based on Webflow form submissions and tracked interactions. This segmentation supports targeted nurture campaigns for specific interest areas. Custom API integration is required to map Webflow page interactions to Pardot list membership actions.

The implementation steps include:

1. Create list memberships using POST /api/v5/objects/list-memberships with listId and prospectId to add prospects to specific lists
2. Query list members via GET /api/v5/objects/list-memberships with the listId parameter to retrieve all prospects in a specific list
3. Export list membership data to Webflow CMS to display Pardot list members on your site for member directories, event attendee lists, or customer galleries

Integrate Webflow visitor actions through form submissions and custom JavaScript to manage list memberships through Pardot's API based on form data and behavioral triggers.

Behavioral tagging

Track and score prospects based on Webflow interactions. Form submissions work directly with Pardot's API, but tracking content downloads and product feature engagement requires custom JavaScript to emit events.

To implement behavioral tagging:

1. Create and document tags in Pardot before implementation. Tags should align with your marketing automation workflows and prospect segmentation strategy
2. Add tags to prospects using POST /api/v5/objects/prospects/{id}/do/addTag with tagId in the request payload
3. Remove tags using POST /api/v5/objects/prospects/{id}/do/removeTag
4. Implement client-side or server-side tracking of Webflow interactions with custom JavaScript
5. Call Pardot's API through middleware to apply tags based on specific pages, forms, or content that prospects engage with

What you can build

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

• Resource libraries with gated content: Create content hubs where prospects submit forms to access resources. Pardot tracks downloads, scores engagement, and triggers nurture sequences based on content consumption patterns
• Event registration and post-event nurture: Build event landing pages with registration forms that create Pardot prospects and assign them to event-specific lists. Track attendance and engagement, then trigger follow-up sequences based on activity levels
• Product trial signup with behavioral scoring: Create trial signup flows that let prospects register via Webflow forms and receive automated onboarding from Pardot. Track trial activity and feature usage to score conversion likelihood and identify expansion-ready users
• Account-based marketing portals: Build dedicated microsites for target accounts with tailored content and role-based resources. Pardot tracks engagement across multiple stakeholders, identifies champions, and coordinates sales follow-up