Activate your Pardot Form with Custom JavaScript

Updated March 30, 2026 14:45

Overview

This guide walks through how to add custom JavaScript to a Pardot form so Walnut can capture the submitted email address and detect when the form has been successfully completed.

This setup is commonly used to support better session identification, lead capture workflows, and engagement tracking when Pardot forms are embedded into Walnut experiences.

Important: This code is required to complete the setup of your Pardot form. A Thank You Code Completion Action must be added for the success message to fire properly.

To add this custom JavaScript, you should be comfortable navigating Pardot form settings and have edit access to the Pardot form you want to update.

In This Guide

In this article, you’ll learn how to:

Access and edit your Pardot form
Add a custom script to capture the form submitter’s email
Add a completion action script to send a success signal
Save and confirm your updated form setup

Step 1: Access Your Pardot Form

Log in to your Pardot account
Navigate to the form you want to edit
Open the form’s settings

Step 2: Add the Email Capture Script

The first script captures the submitted email address and sends it to the parent window. This allows Walnut to identify the visitor and use that information for downstream workflows.

In the form settings, navigate to Step 3: Look and Feel and select Below Form
Click the Source icon to switch to code mode in the text editor

Copy and paste the following JavaScript snippet into the editor:

<script type="text/javascript">
var form = document.querySelector("#pardot-form");
  if (form) {
  form.addEventListener('submit', function (event) {
    var email = '';
    for (var i = 0, len = event.target.elements.length; i < len; i++) {
       var element = event.target.elements[i];
       if (element.value.includes("@")) {
          email = element.value;
          break;
        }
       }
       window.parent.postMessage({ message: "PARDOT_DATA_READY", email: email }, "*");
});
}
</script>

What this does: This script looks for the email field on submit, captures the value, and sends it to the parent window using postMessage.

Step 3: Add the Success Script to Completion Actions

The second script sends a success message after the Pardot form has been submitted successfully. This step is required for Walnut to recognize that the form submission is complete.

Proceed to Step 4: Completion Actions in the form settings and locate the Thank You Code tab

Click the Source button to enable code editing and insert the following script:

<script>
window.parent.postMessage({ message: "PARDOT_FORM_SUCCESS" }, "*");
</script>

Why this matters: Without this completion action, Walnut will not receive the final success event, which can interrupt lead capture and submission tracking workflows.

Step 4: Save and Confirm Your Changes

Exit source code mode and click Confirm & Save
Save your changes to the form

Your Pardot form is now equipped with the custom JavaScript needed to support email capture and form completion messaging.

The Result

The form can pass the submitted email address to Walnut
Walnut can detect when the form has been completed successfully
Your Pardot form is ready for embedded lead capture and tracked engagement workflows

Explore More: Pardot + Walnut

Looking to go further? Explore these related resources: