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 with correct field mappings and set success/error URLs to Webflow pages.
- In Webflow, set the form’s action to the Pardot endpoint with method POST, match field names, and rely on Pardot for redirect behavior.
To integrate Pardot form handlers with Webflow while maintaining your custom success/error pages, you need to connect your Webflow form to the form handler endpoint and control redirection behavior after submission.
1. Create a Pardot Form Handler
- Log in to Pardot, go to Marketing > Forms > Form Handlers.
- Create a new form handler, and configure:
- Campaign
- Success Location URL (e.g., your Webflow page:
/thank-you) - Error Location URL (e.g., your Webflow page:
/form-error) - Add the form fields, ensuring their names match the input “name” fields you’ll use in Webflow.
2. Set Up Your Webflow Form
- In Webflow Designer, select your form element.
- In the Form Settings panel, under Form Action, enter your Pardot endpoint URL (e.g.,
https://go.pardot.com/l/123456/2022-09-01/abc123). - Change the Form Method to POST.
3. Match Field Names
- Ensure every Webflow form field has a Name attribute that matches what Pardot expects. For example:
- First Name input:
name="first_name" - Email input:
name="email" - These should match the External Field Names in your Pardot form handler configuration.
4. Handle Redirects in Pardot, Not Webflow
- Pardot controls the redirect after submission, so your Pardot form handler settings determine the destination for success and error.
- In Webflow, do not use the built-in success message; instead:
- Leave the default success/error message blocks empty or hidden.
- Rely on Pardot to redirect the browser to the appropriate Webflow URL.
5. Optional: Use Hidden Fields for Tracking
- In Webflow, add Hidden Input fields for tracking parameters (like UTM values or referrer), and map them to matching Pardot fields.
- Set these via custom JavaScript or Webflow’s built-in field settings.
6. Test Thoroughly
- Publish your Webflow site.
- Submit a test form ensuring:
- The data reaches Pardot correctly.
- You're redirected to
/thank-youor/form-error, depending on the outcome.
Summary
To use Pardot form handlers with Webflow while keeping your custom success and error pages, post Webflow form data to the Pardot form handler URL, configure correct field names, and set the success/error redirects in Pardot to your Webflow pages. This keeps the backend in Pardot while preserving full frontend control with Webflow.