Legacy: Implement the Identify Call with Pardot Forms
Last Updated: January 12, 2024
🔍 Please note: this article is for customers on Standard Bundle, Enrichment, or Clearbit Platform plans.
Pardot forms are tucked away in an <iframe>
and don't provide an easy way to access submission data through their API in the same way HubSpot and Marketo does. As such, using Google Tag Manager's built-in form listener won't work. Neither will trying to tap into elements through DOM query selectors.
The following guide will walk you through setting up the identify call through a mix of Pardot's form builder and Google Tag Manager. While there are many possible variations to this solution, this one is guaranteed to work.
Skip Ahead to:
- Capture the Email Submitted by Using Custom Code in the Pardot Form Builder
- Verify the Form was Submitted Successfully by Using Custom Code in the Pardot Form Builder
- Create a Custom HTML Tag in Google Tag Manager that Listens for our Message Events and Pushes the Submitted Email to the Data Layer
- Create a Data Layer Variable to Store the Submitted Email
- Create a Custom Trigger Equal to the Data Layer Event from Step 3
- Create a Custom HTML Tag that Fires on our Custom Trigger and Calls the Identify Method on Clearbit with the Submitted Email
Capture the Email Submitted by Using Custom Code in the Pardot Form Builder
- Log in to your Pardot account and navigate to your form (Marketing > Forms > Forms).
- Choose your form and click Edit form in the top right corner of the screen to access the form builder.
- Click on the third step of the form builder, Look and Feel.
- Click on the Below Form tab and afterwards on the Source (<>) icon inside the editor.
- Copy and paste the code snippet below and hit the Confirm & Save button. This option allows us to inject code within the <iframe> that will target the Pardot form on the page, save the email after a submission takes place, and send that email outside of the <iframe> along with a success message for our website to pick up on.
<script type="text/javascript">
var formID = "#pardot-form";
var form = document.querySelector(formID);
form.addEventListener('submit', function (event) {
var form = event.target;
var email = '';
// Grab the email field's values entered in the form
for (var i = 0, len = form.elements.length; i < len; i++) {
var element = form.elements[i];
if (element.value.includes("@")) {
email = element.value;
}
}
window.parent.postMessage({
message: "PARDOT_DATA_READY",
email: email
}, "https://your-main-website-domain");
});
</script>
Verify the Form was Submitted Successfully by Using Custom Code in the Pardot Form Builder
- Once again, click Edit form in the top right corner of the screen to access the form builder.
- Now click on the fourth step of the form builder, Completion Actions.
- Click on the Thank You Code tab and check the Always display form after submission box.
- Copy and paste the following code snippet and hit the Confirm & Save button.
<script>
window.parent.postMessage({
message: "PARDOT_FORM_SUCCESS",
}, "https://your-main-website-domain");
// This bottom line is optional if you want to redirect to thank you page after
form submission. Do not check the "Redirect to the following URL instead of
showing the form's Thank You Content" box. The code will not fire if you do so.
top.location.href = "https://domain-where-you-want-to-redirect"
</script>
Create a Custom HTML Tag in Google Tag Manager that Listens for our Message Events and Pushes the Submitted Email to the Data Layer
<script>
var email = "";
//Listen to Pardot events coming from the form builder
window.addEventListener("message", function (event) {
// Once form data is ready, update email
if ( event.data && event.data.message === "PARDOT_DATA_READY" && event.data.email ) {
email = event.data.email;
}
// Once form is submitted and validated, send event and email to data layer
if (event.data && event.data.message === "PARDOT_FORM_SUCCESS") {
window.dataLayer.push({
"event": "pardot-form-submitted",
"pardot-form-email": email
});
};
});
</script>
Create a Data Layer Variable to Store the Submitted Email
The data layer variable name should be "pardot-form-email".
Create a Custom Trigger Equal to the Data Layer Event from Step 3
The event name should be "pardot-form-submitted."
Create a Custom HTML Tag that Fires on our Custom Trigger and Calls the Identify Method on Clearbit with the Submitted Email
<script>
var email = {{
Pardot Form Email
}};
clearbit.identify(email, {
"email": email
});
</script>
Once you've completed all of these steps, you can test your Google Tag Manager through Preview mode or submit your changes and test your newly implemented identify call live. 🎉🥳