How can I use Pardot form handlers to direct form data to our marketing automation software in Webflow while still using our error/success page versions built in Webflow?

TL;DR

Create a Pardot Form Handler, note the endpoint URL, and configure success/error redirects (they'll be overridden).
Build a Webflow form matching Pardot field names, set method to POST, and action to the Pardot endpoint.
Add JavaScript to intercept form submission, send data via fetch with no-cors, and display Webflow's built-in success/error messages.

To integrate Pardot form handlers with your Webflow site while continuing to use Webflow’s built-in success/error page styles, you'll need to submit the form data from Webflow to Pardot’s form handler endpoint using a hidden form action, and then handle redirection manually to show success or error states.

1. Create a Form Handler in Pardot

Log into Pardot (via Salesforce) and navigate to Marketing > Forms > Form Handlers.
Click + Add Form Handler.
Fill in required details like Name, Campaign, and choose fields you’ll be accepting.
Set the Success Location and Error Location to temporary URLs (these will be overridden by Webflow later).
Note the form handler endpoint URL for use in Webflow (e.g., https://go.pardot.com/l/123456/2024-01-01/abc123).

2. Build Form in Webflow

In your Webflow project, add a Form Block and create form fields that exactly match your Pardot field names.
In the Form settings, do the following:
Form Method: POST
Form Action: Paste your Pardot Form Handler endpoint URL
Ensure field names in Webflow's form inputs (under the “Name” attribute) exactly match the Pardot Form Handler field names.

3. Prevent Default Redirect & Display Webflow's Success/Error

Webflow automatically handles success/error messages by showing/hiding w-form-done and w-form-fail elements.
To use these instead of Pardot’s redirect, you need custom JavaScript to:
Intercept the form’s default submit
Send data via fetch to Pardot
Show Webflow’s built-in success or error divs based on the result

4. Add Custom Code for Submission Handling

Use Webflow's Page Settings > Before </body> custom code section and insert JavaScript like this:

<script>
document.addEventListener("DOMContentLoaded", function () {
  const form = document.querySelector("form");

  form.addEventListener("submit", function (e) {
    e.preventDefault();

    const formData = new FormData(form);

    fetch(form.action, {
      method: "POST",
      mode: "no-cors", // Pardot doesn’t support CORS; use no-cors to avoid browser block
      body: formData
    })
    .then(() => {
      // Show Webflow success message
      form.style.display = "none";
      document.querySelector(".w-form-done").style.display = "block";
    })
    .catch(() => {
      // Show Webflow error message
      document.querySelector(".w-form-fail").style.display = "block";
    });
  });
});
</script>

This intercepts the submit event and sends the data to Pardot, bypassing native redirects.
Since no-cors mode won’t return an actual response, assume success on .then() and trigger error only if .catch() occurs (e.g., user offline or JS error).

5. Test Form Submission

Test in Incognito Mode after publishing to avoid cached scripts.
Make sure Pardot is capturing submissions correctly.
Confirm that Webflow’s success/error messages visually work as expected.

Summary

Use a Webflow form styled as you like and point it to your Pardot form handler endpoint using POST. Add custom JavaScript to disable native redirect behavior and display Webflow success/error messages instead. All form data will be received by Pardot while preserving your frontend experience.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer