Pardot Forms Lead Capture

Contents

• Option #1 - Adding Callback Event
• Option #2 - Create Form Handler (Recommended)

Overview

Pardot forms added to Landing Pages by default don't always work with the Metadata Lead Capture script, depending on how the forms have been configured in the landing page.

This guide provides two methods to resolve this issue:

1. Adding a Callback Event to send form completion data to the parent page if the form is iframed
2. Creating a custom Form Handler to bypass iframe limitations

Option #1 - Adding Callback Event

This method is used if the form is iframed into the page which requires the Callback Event to be posted back to the parent page.

Add the following script to the Form Completion Actions Thank You Content in Pardot:

Script:

<p><script type="text/javascript">// <![CDATA[ 
console.log(document.hidden_form); 
try { 
  var postObject = JSON.stringify({ 
    event: 'ContactUsCallback', 
    email: "{{Recipient.Email}}", 
    firstname: "{{Recipient.FirstName}}", 
    lastname: "{{Recipient.LastName}}"
  }); 
  parent.postMessage(postObject, '*'); 
} catch(e) { 
  window.console && window.console.log(e); 
} 

// ]]> 
</script></p>

This script posts an event called "ContactUsCallback" to the parent page after completion of the form, including the user's contact information.

Metadata Lead Capture Script:

The Metadata Lead capture script already has the event listener added to it by default. If after adding the event to the Form via Pardot it still doesn't work, please reach out to [e-mail].

Option #2 - Create Form Handler

This method doesn't require the listener event since the form is directly embedded into the landing page using HTML.

1. Create a Form Handler in Pardot

1. Navigate to Marketing > Forms > Form Handlers
2. Click + Add Form Handler

2. Configure the basic settings:

• Name your form handler
• Select a folder
• Choose a completion action (redirect URL, display thank you message, etc.)
• Configure success/error locations

3. Map Form Fields

In the "Form Field Mappings" section, add each field your HTML form will contain.

For each field, specify:

• External field name (must exactly match the 'name' attribute in your HTML form)
• Pardot field to map to
• Whether the field is required

4. Get the Endpoint URL

After saving, you'll receive a unique endpoint URL for your form handler.

5. Create Your Custom HTML Form

<form action="[YOUR_ENDPOINT_URL]" method="post">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" required>
  
  <label for="firstName">First Name</label>
  <input type="text" name="firstName" id="firstName">
  
  <!-- Add additional fields as needed -->
  
  <input type="submit" value="Submit">
</form>

Getting Support

If you encounter any issues implementing these solutions, please contact [e-mail] for assistance.