Pardot

Webflow forms store submissions in Site settings and email your team. Account Engagement (formerly Pardot) adds lead scoring and grading plus nurture programs on top of a prospect database. That database can tie pricing-page visits to known prospects and pass those signals to Salesforce.

Connecting Account Engagement with Webflow routes form data and browsing activity into that prospect database. Native Webflow forms can post to Account Engagement form handlers, while Code Embed renders Account Engagement forms on selected pages. Webflow's page custom code settings carry the tracking code to the pages you want tracked.

Demand generation managers use this setup to gate resource libraries and register webinar attendees without leaving Webflow. Marketing operations and Salesforce admins own the form handler mapping and tracker domain that keep prospect data clean. Webflow developers keep full CSS control over lead forms. Sales reps then see Webflow engagement history on the Salesforce lead record before they call.

How to integrate Account Engagement (formerly Pardot) with Webflow

What is Account Engagement (formerly Pardot)? Account Engagement is the B2B marketing automation product Salesforce sold as Pardot until it announced the Account Engagement name on April 6, 2022. Its full name is Marketing Cloud Account Engagement. It turns visitors into prospects through its own forms and landing pages, or through form handlers that accept external forms, and then scores and grades them. Prospect records sync with Salesforce every 2 to 4 minutes, and Engagement Studio runs nurture programs from that data.

Teams pair the two when the marketing site lives in Webflow and pipeline reporting lives in Salesforce. Agency Alpha Tango moved Flowsparks from WordPress to Webflow, migrating more than 400 pages in four languages, and kept the existing Pardot integration, according to the Flowsparks announcement. The BRIX Agency showcase on Made in Webflow demonstrates a Pardot method for connecting styled Webflow forms to Salesforce.

The integration supports four approaches:

• Form Connector app: A third-party Marketplace app from the agency Candid Leap routes Webflow form submissions to Salesforce Pardot without code.
• Native connections: Form handlers and Code Embed iframes connect native Webflow forms to Account Engagement, and the tracking code covers page visits.
• Zapier: Webflow's Zapier integration turns Webflow form submissions into Account Engagement prospects and list memberships.
• APIs: Server-side code calling the Webflow Data API and the Account Engagement API gets full control over prospect upserts and Webflow CMS writes.

Choose or combine these methods based on the complexity of the setup.

Install the Form Connector app

Salesforce doesn't offer an official Webflow app, so Webflow's Salesforce integration guide points to third-party apps for quick setup. Form Connector, published by the agency Candid Leap rather than by Webflow or Salesforce, lists Salesforce Pardot as a destination. It suits teams that want Webflow forms routed to Account Engagement without writing code.

To set up the integration:

1. Install Form Connector on your site from its Marketplace listing.
2. Add Salesforce Pardot as a destination and follow the app's setup flow to connect your forms.

The app also lists Salesforce and Salesforce Marketing Cloud as destinations. Its listing uses the legacy Salesforce Pardot name and doesn't state a required Account Engagement edition. Use the native methods below for direct field mapping or visitor tracking.

Connect Account Engagement with form handlers and custom code

Code Embed and the tracking code both rely on custom code, which needs an active Site plan or a Core, Growth, Agency, or Freelancer Workspace. Choose the form path based on whether you need Webflow styling or Account Engagement's own form features.

Post a native Webflow form to an Account Engagement form handler

A form handler accepts POST data from an external form and matches prospects by email. You keep your Webflow classes and interactions because the form stays on your page. Salesforce's form handler considerations note that conditional fields aren't available on form handlers, so forms that need them belong on the embedded path.

To connect a Webflow form to a form handler:

1. In the Account Engagement Lightning app, select Content > Form Handlers, click + Add Form Handler, and follow the Create a Form Handler steps. Set a success location and an error location.
2. Map each field. The External Field Name must match the name attribute of the Webflow input exactly, and the match is case-sensitive.
3. Copy the form handler's endpoint URL from View form handler code.
4. In Webflow, select the form and open the Settings panel. Remove the Webflow and Email notifications destinations, because neither can be combined with a custom action. Click the add icon next to Send to, choose Custom action, paste the URL, set the method to POST, and save. The Webflow forms guide walks through each control.
5. Add a hidden honeypot field named pardot_extra_field to the Webflow form. Account Engagement rejects any submission that contains a value in it.
6. Publish the site and submit a test. A valid submission redirects to your success location.

A custom action bypasses Webflow's built-in form handling, so submissions aren't stored in Site settings and Webflow sends no notification emails. The honeypot is the only spam control Account Engagement offers for form handlers, so Salesforce suggests adding your own CAPTCHA or relaying submissions through a server. Account Engagement doesn't support CORS or JSONP for form handlers, so submit with a normal form POST rather than an AJAX request. Salesforce also asks for a <meta name="referrer" content="no-referrer-when-downgrade" /> tag in the head of any page that references a form handler, which you can add in that page's custom code settings.

The Zapier and webhook paths below keep submissions in Webflow as well as Account Engagement.

Embed an Account Engagement form with a Code Embed element

Account Engagement forms carry built-in bot protection: a honeypot and a conditional CAPTCHA that only visitors from IP addresses known for spam see, with reCAPTCHA available as an option. Paste the form's iframe code into a Code Embed element to render it on your Webflow page. You configure completion actions, such as adding the prospect to a list, in Account Engagement. The trade-off is styling, which the host page cannot touch.

To embed an Account Engagement form:

1. Check your iframing setting. In Account Engagement Settings, open the Account tab, click Edit, and review the Iframed Assets option described in Restrict or Limit Iframing. If iframing is limited to specific domains, add your Webflow domain, because iframed forms display only on listed domains.
2. Open the form in Account Engagement and copy its iframe embed code. The default iframe is 100% wide, 500px tall, so adjust the height before pasting.
3. In Webflow, add a Code Embed element where the form belongs, paste the code, and save.
4. Publish the site and submit a test from the live page.

The iframe keeps the form separate from your Webflow CSS. Style it through layout templates under Content > Layout Templates, and keep the required %%title%%, %%content%%, and %%description%% tags. Keep every link in the layout template on HTTPS to avoid a mixed content warning. Safari 13.1 and later also blocks cross-domain iframe cookies by default, so Safari visitors may submit without being cookied.

Add the Account Engagement tracking code to page custom code

The tracking code records page visits against a prospect's cookie, which feeds prospect activity and page actions. Administrator and Marketing roles can view it in every edition. Each campaign has its own tracking code, and Salesforce's Implement Tracking Code guide recommends high-value pages only, such as landing pages or specific product listings, rather than general pages like the home page. Business units created after February 13, 2023 use first-party tracking by default, and first-party tracking doesn't use the default go.pardot.com domain. First-party cookies only track across subdomains of one root domain, so www.yoursite.com needs a tracker domain like go.yoursite.com.

To install the tracking code:

1. In Account Engagement Settings > Domain Management, add a tracker domain on your Webflow site's root domain. Point its CNAME record to go.pardot.com, add the validation key to your root domain's TXT record, and click Validate once DNS propagates, which can take up to 24 hours. Business units created after February 15, 2021 use HTTPS automatically. Older business units enable SSL per tracker domain, and the certificate is typically ready within 15 minutes.
2. Scroll to the Tracking Code Generator, select the tracker domain, optionally override the campaign, and copy the code.
3. In Webflow, open Page settings for each high-value page, paste the snippet into the Before </body> tag field under Custom code, and save. Site-wide Footer code in Site settings also works, but it loads the code on every page, including the general pages Salesforce advises against.
4. Publish the site. Custom code goes live when you publish.
5. Check the tracking opt-in preferences in Account Engagement. If you request opt-in for visitors from specific countries but select no countries, tracking is disabled.

To handle tracking consent through a third-party cookie management tool, Salesforce points teams to its Tracking and Consent API. Webflow's site tracking consent guide covers consent management apps such as DataGrail and OneTrust on the Webflow side. Then configure page actions that apply a completion action when a known prospect views a pricing or demo page.

Connect with Zapier

Webflow keeps the submission while a Zap sends it to Account Engagement, and Zapier's prospect Zap template sets up that workflow. Webflow handles the form first, so its own reCAPTCHA validation still applies. Zapier labels Pardot a premium app, and its Pardot setup guide asks for your Business Unit ID, which begins with 0Uv and is 18 characters long. Check your edition's daily API allowance on Salesforce's pricing page before you build.

The available pairings include:

• Find or Create Prospect: A Webflow New Form Submission can look up a prospect by email and create one when none exists.
• Add Prospect to List: A submission can add an existing prospect to a list for segment-specific nurture.
• Update Prospect: A submission can enrich an existing prospect record with new field values.
• New Order: Webflow's New Order trigger can create a prospect or add one to a list when someone buys.

In the other direction, Pardot triggers such as Prospect Added to List and New or Updated Prospect can drive Webflow actions like Create Live Item and Update Item. Webflow's triggers start a Zap instantly, while Zapier polls Pardot triggers, every 15 minutes on the Free plan.

Build with the Webflow and Account Engagement APIs

A server you control can sit between Webflow and Account Engagement to upsert prospects and write Webflow CMS items from Account Engagement data. It suits developers who need deduplication logic or two-way sync beyond what form handlers do. Every Account Engagement API call authenticates through Salesforce OAuth as a user who can sign in to Account Engagement through Salesforce.

The relevant APIs are:

• Account Engagement API: The current API version reads and updates prospects, lists, form handlers, and visitor activity.
• Export API: The Export API returns large data sets, such as prospects and visitor activity, as CSV files.
• Webflow Data API: The Webflow Data API handles CMS collections and form submissions.
• Webflow webhooks: A form_submission webhook sends each submission to your endpoint as it happens.

Together these cover both directions of the sync.

Authentication starts with Salesforce OAuth, and the connected app must include the pardot_api scope. Find your Business Unit ID in Salesforce Setup by entering Business Unit Setup in the Quick Find box. Every request then carries two headers: Authorization: Bearer <access_token> and Pardot-Business-Unit-Id: <business_unit_id>. Production accounts authenticate at login.salesforce.com and call pi.pardot.com. Sandboxes authenticate at test.salesforce.com and call pi.demo.pardot.com. Build against Webflow's v2 API because the Webflow v1 API was deprecated on March 31, 2025.

Upsert prospects from a form_submission webhook

A form_submission webhook delivers each submission to your endpoint as it happens, with the submission still stored in Webflow. Your function then calls upsertLatestByEmail. When several prospects share an email, it updates the one with the most recent activity. An unmatched email creates a prospect.

To implement the webhook flow:

1. Register the webhook with the sites:write scope and filter it to one form. Only form_submission supports a name filter at registration. You can also add a webhook from the form's Settings panel under Send to, which shows its secret key once.

POST https://api.webflow.com/v2/sites/{site_id}/webhooks
Authorization: Bearer <token>
Content-Type: application/json

{
  "triggerType": "form_submission",
  "url": "https://your-function.example.com/webflow-webhook",
  "filter": { "name": "Contact Us" }
}

2. Verify each delivery with Webflow's signature check. Concatenate the x-webflow-timestamp value and the request body with a colon, sign the result with HMAC-SHA256, and compare it to the x-webflow-signature header. The signing key is your OAuth app's client secret, or the webhook's own secret key when no OAuth app created it. Reject any request more than 5 minutes old.
3. Read payload.data, which holds the submitted values keyed by field name, plus payload.formId and payload.submittedAt.
4. Call the prospect upsert with the mapped fields.

POST https://pi.pardot.com/api/v5/objects/prospects/do/upsertLatestByEmail
Authorization: Bearer <access_token>
Pardot-Business-Unit-Id: <business_unit_id>
Content-Type: application/json

{
  "matchEmail": "jane.doe@example.com",
  "prospect": {
    "email": "jane.doe@example.com",
    "firstName": "Jane",
    "lastName": "Doe"
  },
  "fields": ["id", "email", "firstName", "lastName"],
  "secondaryDeletedSearch": true
}

5. Add the prospect to a list with POST /api/v5/objects/list-memberships and a body of { "listId": 12345, "prospectId": 67890, "optedOut": false }.

The upsert issues a PATCH on a matched prospect, so only the fields you send change. Custom fields take the __c suffix, and omitting fields returns only id and email. Watch for error codes 4 (invalid prospect email address), 13 (missing required parameters), and 219 (deleted record, undelete first). Webflow retries a failed delivery up to 3 times at 10-minute intervals, per the same webhook guide, so make the handler idempotent. A server-side post leaves the visitor uncookied, so page tracking still depends on the tracking code.

Record Webflow interactions with the External Activities API

Video plays and calculator completions on a Webflow page fall outside native tracking. The External Activities API accepts them as prospect activities your automations can act on. This path suits known prospects whose email you already hold, because email is a required field, and it works only after your admin registers the extension and activity type.

To submit an activity:

1. Get the registered extension and type values from your Account Engagement admin.
2. From your server, post the event with the four required fields.

POST https://pi.pardot.com/api/v5/external-activities
Authorization: Bearer <access_token>
Pardot-Business-Unit-Id: <business_unit_id>
Content-Type: application/json

{
  "extension": "MyWebflowIntegration",
  "type": "Calculator Completed",
  "email": "prospect@example.com",
  "value": "pricing-calculator",
  "activityDate": "2026-09-28T10:00:00+00:00"
}

3. Use the activity in your automation rules.

The value field is capped at 100 characters, and activityDate defaults to the current time when omitted.

Write Account Engagement data into Webflow CMS items

For outbound sync, a scheduled job reads from Account Engagement and writes to Webflow. The Export API returns Prospect, List Membership, Visitor Activity, and other objects as CSV files. Prospect records carry score, grade, salesforceId, and lastActivityAt fields you can include in an export. Another option is a Salesforce record-triggered flow on Lead or Contact that calls the Webflow Data API through Flow HTTP Callout after the Account Engagement sync updates the record.

To sync exported data into a collection:

1. Create an export with POST /api/v5/exports, poll GET /api/v5/exports/{id} until it completes, and download GET /api/v5/exports/{id}/results.
2. For each record, check for an existing item with GET /v2/collections/{collection_id}/items/live?slug={slug}, which supports an exact slug filter.
3. If the item exists, update it with PATCH /v2/collections/{collection_id}/items/live.
4. Otherwise, create it with POST /v2/collections/{collection_id}/items/live. The request body needs fieldData.name and fieldData.slug at minimum, per the create item reference.

The slug lookup keeps a rerun from creating duplicates. Live endpoints publish immediately, so use the staged /items endpoints if an editor should review changes first.

What you can build with the Account Engagement Webflow integration

Webflow remains the page builder while Account Engagement scores and routes the B2B leads those pages capture.

• Gated resource library: Build the library as a Collection List of reports, each with a native Webflow form posting to a form handler. Create one form handler per report and set its success location to that report's PDF URL. Add completion actions that add the prospect to a topic list and send an autoresponder.
• Webinar and event registration pages: Register attendees through a Webflow form mapped to an event-specific form handler, with hidden fields carrying the event name. A completion action adds the prospect to the event list, and an Engagement Studio program sends reminders and follow-ups.
• Demo request routing to sales: Post a demo form to a form handler whose completion actions hand the prospect to sales. Once Engagement History is configured, the rep sees marketing engagement from your Webflow pages on the lead record after the next sync.
• Behavior-tracked pricing and product pages: Load the tracking code on pricing and integration pages and configure page actions for them. Send interactions outside the tracker's coverage, like a completed ROI calculator, through the External Activities API so your automation rules can act on them.

The API path gives you full control over pushing Account Engagement scores or list membership back into CMS items. Build a Zapier marketing automation hub to route these leads through the rest of your stack.