Activate your Pardot Form with Custom JavaScript

IMPORTANT: This code is required to complete the setup of your Pardot Form. At this time, Walnut does not support auto-dismissal of Pardot forms upon submission. A Thank You message Completion Action is required.

------------------------------------------------------------------------------------------------------

This guide will assist you in integrating custom JavaScript snippets into your Pardot form. These scripts are designed to capture the email address from the form submission and send a success message to a parent window upon completion.

Please note: To add this Custom Javascript it is important that you have experience navigating Pardot's form settings, as well as edit access for your Pardot forms.

Step 1: Accessing Your Form

• Log in to your Pardot account
• Navigate to the form you wish to edit
• Go to the form's settings

Step 2: Edit the Form's Look and Feel

• In the form settings, navigate to step 3: Look and Feel and then select Below Form
• Click on 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; // Break the loop once the email is found
        }
       }
       window.parent.postMessage({ message: "PARDOT_DATA_READY", email: email }, "*");
});
}
</script>

Step 3: Adding Script to "Completion Actions"

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

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

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

Step 4: Saving Your Changes

• After inserting both scripts, exit the source code mode by clicking step 5: Confirm & Save
• Save your changes to the form
  

Your Pardot form is now equipped with custom JavaScript to enhance data handling and communication! The first script captures the email address, and the second script sends a success message upon form completion.