In Pardot

How To Use UTM Parameters to Capture Lead Source in Pardot Part 2

3 Mins Read

Newer post available

Hi there, you are viewing an old post that is a bit outdated. Click here to view the post with the latest instructions.

In part 1, I covered how to use UTM parameters to capture lead source when you are embedding a Pardot form on a Pardot landing page. In this post, I will cover how to implement the same method using an iFramed form on a web page.

Note: step 1 and step 2 are the same as the instructions outlined in part 1.

Step 1: Create new fields and add them to your forms

The first thing you need to do is create 2 new fields in Salesforce and in Pardot and map them. You don’t need to create a field for utm_source, we will use the standard source field in Pardot.

  1. utm_medium
  2. utm_campaign

hidden-fields-in-forms-2

Next, add the fields to your Pardot form. All 3 fields should be hidden and not marked as required.

Step 2: Add Some Code to Your Landing Page Templates

This piece of code will parse the URL parameters and put the values into the hidden fields within your form. This code can be placed within your landing page template or within your form in the below form section.

Note: If you don’t use the field names outlined in this tutorial, you might need to update the JavaScript to include the correct field names.

Step 3: Embed your form on your web page

Use the standard iFrame code Pardot provides to embed your form on your webpage.

Step 4: Give your iFrame and ID and add the JavaScript

Since we will be adding some JavaScript to the web page in order to pass the parameters to the iFrame, we need to give the iFrame an ID. Here’s what my iFrame code looks like after adding the ID called “myiframe”.

Add the JavaScript to your web page that will pass the URL paramters from the parent page to the embedded Pardot iFrame form.

If you used a different ID for your iFrame, other than “myiframe”, you will need to update the ID within the JavaScript.

Create URLs and Test

Now you’re ready to start creating URLs and testing your form. Use this handy URL builder to create your links and then fill out the form to see if the values go into Pardot.

Questions?

Send me a tweet @jennamolby, leave a comment below, or book a Peer Chat.

Author

I'm a Freelance Marketing Operations Consultant With 15 years of experience in Marketing Operations, I’ve worked with a wide range of tools including Salesforce, Marketing Cloud Account Engagement (Pardot), Marketo, and many other sales and marketing platforms. I help teams optimize their tech stacks, improve processes, and get accurate, actionable reporting. Whether it’s setting up your Marketing Automation Platform, building Salesforce reports, managing lead lifecycles, tracking attribution, or integrating your tech stack, I ensure everything is aligned to drive real results.

19 Comments

  1. Christiane Reply

    Hi Jenna, thanks a lot for your brillant tutorials. Everything I try works like a charme.

    But now I´m running into an issue. I have to built lots of forms with different campaigns. If I use just one ID like “myiframe” the other UTM campaigns are empty. So I have to change this javascript to something like this:

    var iframe = document.getElementById(‘myid1’);
    var iframe = document.getElementById(‘myid2’);
    var iframe = document.getElementById(‘myid3’);
    iframe.src = iframe.src + window.location.search;

    Does it work or is there a more elegant way to solve this without using this script in every modul of the posts? We build with WordPress and Divi Theme, so I put this script in the Theme Integrations in the
    Thanks for help. Christiane

    • Jenna Molby Post Author

      Hi Christiane, You’re welcome 🙂 Are you embedding more than one form on a single webpage? If not, you should not have to give your iframes different IDs. If the UTMs are coming in blank it could be a setting within the form.

  2. Tara Reply

    So both javascripts from Step 2 and Step 4 go on your landing page?

    • Jenna Molby Post Author

      Hi Tara, the Javascript from Step 2 goes on your Pardot form or Layout Template. The Javascript from Step 4 goes on your web page.

  3. Tara Picaro Reply

    I’m getting confused at step 4? Where do you name the iframe?

    • Jenna Molby Post Author

      Hi Tara, the name of the iFrame is the ID for the iFrame (id=”myiframe”).

      <iframe src="http://go.pardot.com/l/xxxx/xxxx-xx-xxx/xxxxx&#x22; width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0" id="myiframe"></iframe>

      The ID can be anything you want. You can even leave it as myiframe, like the example. It just has to match the Javascript code.

  4. Siva Reply

    I was trying to implement utm parameters on an iframe. I was able to get all the utm parameters except the source.

    Can you help me on this please?

    • Jenna Molby Post Author

      Hi Siva, Please send me the link to your page and I can help troubleshoot.

    • Jenna Molby Post Author

      Hi Hector, Yes, this can be done with form handlers. You would have to update the query selectors within the javascript to use the IDs or Classes you used in the HTML for your form, though. Cheers, Jenna

Write A Comment