Populating Form Fields with JavaScript

---

Often times, we want to reuse a single Pardot form on multiple pages of our website, or on multiple sites altogether. It’s important to understand which pages or websites are working the best for capturing conversions. Rather than creating duplicate forms for each page, did you know we can use some JavaScript to let us know which page our Prospect was on when they completed the form?

By creating a hidden field on your Pardot form, you can use JavaScript to capture the Webpage URL (or other data from your Prospect’s browser)

Before Jumping into the code itself, let’s get a better understanding of JavaScript.

In JavaScript, we can ask for specific information from the computer accessing our websites. This can be extremely helpful for marketers, ops, and developers to understand the ways our Prospects engage with our site and content. The more of this ΓÇÿhidden’ information we can gather, the better we can tailor and optimize our business strategy based on what’s working the best.

JavaScript BOM

First, let’s take a look at the JavaScript BOM, or Browser Object Model: The BOM, allows JavaScript to ΓÇÿtalk to’ the browser. Within the BOM, we have requests we can use to capture information from the visitor. While there is a collection of BOM objects we can speak to, let’s focus on a few that can be helpful to us as marketers.

• Location: Can be used to get the current page address (URL) – Try it out!
• History: Contains information about the visitor’s previous page history
• Navigator: Contains information about the visitor’s browser and computer – Try it out!

Now that we know some of the information we can capture from JavaScript, let’s add it to our Pardot form!

Populating Pardot forms with JavaScript BOM Data

Follow these steps to add your JavaScript BOM data to your Pardot forms:

1. IN PARDOT, create a new custom field for each of the values you want to create in JavaScript.

Note: If you’ll be using this info as a variable tag, we recommend using “Last Form Submission URL”, instead of the ΓÇÿRecord and display multiple responses’. Once multiple values is set up on a field, it cannot be used as a variable tag

2. IN PARDOT, Create and Edit your form using the Pardot Form Wizard. Add your Custom Field(s) to the Form as HIDDEN fields. Once you’ve completed your form SAVE.

This will generate a Pardot form URL

3. Rather than using the standard HTML provided by Pardot’s form builder, copy and paste the following HTML code in your webpage where you’d like the Pardot form to appear.

Note: Review the Sections of the script below that are marked with the //.

In JavaScript, ΓÇÿ//’ means the line is ΓÇÿcommented out’. The script won’t recognize it, but it’s still visible for humans. When you deploy this script, you may remove the comments, or keep them for future notes.

HERE’S THE CODE (you can copy and paste the following section, in it’s entirety):

<script type="text/javascript">

// Update the Custom_Field_ID portion below.
// var fieldId = "Custom_Field_ID"; 
// The Field ID of the new custom hidden field you just created.

var fieldId = "Custom_Field_ID";

// Update the var = formurl with your Pardot Form URL below.
// var formUrl = "http://go.your-pardot-tracker-url.com/12345/ABCDE";
// This will be where you link to the Pardot form.

var formUrl = "http://cname.company.com/12345/ABCDE";

//Using encodeURI(document.title) will return the title of the Current Webpage.
// You could also use document.URL, or one of the other BOM objects

var title = encodeURI(document.title);

//Now we create the Iframe of our Pardot form.  You can adjust the width and height in the first document.write line of the code below
//Note: we take the formURL variable created above and set that as the iframe src

document.write('<iframe width="100%" height="300" frameborder="0" style="border: 0;" src="' + formUrl);

// On this line, we're adding a query string to the formUrl.
// You can append additional variables as well, if you're looking to capture more browser data in Pardot.

document.write('?' + fieldId + '=' + title);

//This line closes out the Iframe

document.write('"></iframe>');
</script>

What does this do?

The Pardot Form URL creates an Iframe that you can copy and paste into your website.

The code provided above builds the same Iframe, but also includes JavaScript that grabs information from our visitor’s browser and pulls it into the hidden fields of the form.

With this trick, you can pull in multiple ΓÇÿhidden’ fields based on the visitor’s browser. This data can be used in Pardot & Salesforce for segmentation, qualification and gathering more insights for your marketing attribution.

Are you working towards your Pardot Certification, or just want to be a better Pardot Admin? Attend our 2-day Pardot Admin Bootcamp! Space is limited!

Happy Pardoting!