8 Advanced Pardot Form Techniques

Want to do something with your Pardot form that is not available in the editor? Try using JavaScript! Enhance your forms by using these 6 advanced Pardot form techniques. Learn how to add text between form fields, how to capture URL parameters in hidden fields and more.

Adding JavaScript to your Pardot forms

Custom JavaScript can be placed within your Pardot forms under Look and Feel > Below Form. Click on the HTML button within the WYSIWYG editor and add in the JavaScript.

1. Add text between form fields

Edit the form field you want to add the text before in the form editor. Click on the advanced tab and add a CSS class with the name “add-text-before”.

Once the class has been added to the form field, you can add the following JS to your form and update the message.

<script type="text/javascript">
function insertBefore(el, referenceNode) {
    referenceNode.parentNode.insertBefore(el, referenceNode);
}

var newEl = document.createElement('div');
// replace this line with your message
newEl.innerHTML = 'ENTER YOUR TEXT HERE';

var ref = document.querySelector('.add-text-before');

insertBefore(newEl, ref);
</script>

function insertBefore(el, referenceNode) {

referenceNode.parentNode.insertBefore(el, referenceNode);

}

var newEl = document.createElement('div');

// replace this line with your message

newEl.innerHTML = 'ENTER YOUR TEXT HERE';

var ref = document.querySelector('.add-text-before');

insertBefore(newEl, ref);

</script>

2. Redirect to a thank you page based on field values

This tip is from the Pardot Help Docs, but with a couple updates. The article recommends using JavaScript-encoding for variable tags using {js}. I’ve never had success while using this method. Instead using this JavaScript does the trick.

<script type="text/javascript">
  switch('%%Free_Trial_Live_Demo%%') {
  case 'Free Trial':
  document.location='http://www.yoursite.com/thank-you-free-trial/';
  break;
  case 'Live Demo':
  document.location='http://www.yoursite.com/thank-you-live-demo/';
  break;
  }
</script>

switch('%%Free_Trial_Live_Demo%%') {

case 'Free Trial':

document.location='http://www.yoursite.com/thank-you-free-trial/';

break;

case 'Live Demo':

document.location='http://www.yoursite.com/thank-you-live-demo/';

break;

}

</script>

3. Use a hidden field to capture page url

Edit the hidden form field, click on the advanced tab and add a CSS class with the name “get-page-url”.

Insert this JS into your form to capture the page url in the hidden field.

<script>
document.querySelector(".get-page-url input").value = window.location.href;
</script>

document.querySelector(".get-page-url input").value = window.location.href;

</script>

4. Use a Hidden field to capture page name

Edit the hidden form field, click on the advanced tab and add a CSS class with the name “get-page-name”.

Insert this JS into your form to capture the page url in the hidden field.

<script>
document.querySelector(".get-page-name input").value = document.title;
</script>

document.querySelector(".get-page-name input").value = document.title;

</script>

5. Pass URL parameters to a Pardot form

You can use this script to parse out URL parameters and put them into fields within your Pardot form. In this example, I’m passing utm_source, utm_medium and utm_campaign into hidden form fields.

<script>
// Parse the URL
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
// Give the URL parameters variable names
var source = getParameterByName('utm_source');
var medium = getParameterByName('utm_medium');
var campaign = getParameterByName('utm_campaign');
 
// Put the variable names into the hidden fields in the form. selector should be "p.YOURFIELDNAME input"
document.querySelector("p.source input").value = source;
document.querySelector("p.medium input").value = medium;
document.querySelector("p.campaign input").value = campaign;
</script>

// Parse the URL

function getParameterByName(name) {

name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");

var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),

results = regex.exec(location.search);

return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));

}

// Give the URL parameters variable names

var source = getParameterByName('utm_source');

var medium = getParameterByName('utm_medium');

var campaign = getParameterByName('utm_campaign');

// Put the variable names into the hidden fields in the form. selector should be "p.YOURFIELDNAME input"

document.querySelector("p.source input").value = source;

document.querySelector("p.medium input").value = medium;

document.querySelector("p.campaign input").value = campaign;

</script>

6. Turn your form labels into placeholder text

There’s currently no feature for Pardot forms that allow you to use placeholder text instead of the label text. So, in this tutorial, I will show you how to add a bit of JavaScript to your Pardot forms to use the field labels as placeholders.

Loading …

47 comment(s)

Jaime López

08/10/2018 at 12:35 am
Reply

Hi Jenna! Your blog is a real gold mine for a Pardot admin :) Thanks for all the work you put in! I was wondering, would you know how to write a script to validate input for a Phone number field form? I would want to force prospects to input their phone number as +123456789, and prevent submission if any other format is used. Thanks!
- Jenna Molby
  
  to Jaime López
  
  09/10/2018 at 11:29 am
  Reply
  
  Hi Jaime, So happy you love my blog! It's certainly possible to force prospects to input their phone number in a particular format, but I haven't tried it myself, yet. Cheers, Jenna
- Joe Martinez
  
  to Jenna Molby
  
  14/01/2019 at 2:49 pm
  Reply
  
  Hi Jenna, I was wondering if you could point me to any resources to handle the phone validation that Jaime Lopez commented about. Any help would be appreciated. Thank you!
- Skender
  
  to Jenna Molby
  
  04/05/2020 at 12:50 am
  Reply
  
  Hi Jenna, thank you for so much for this really useful website. While I understand how to insert css classes into a Pardot form, would be possible to insert also a URL link of a CSS file inside the form? The for will be embedded into an iframe. Thank you so much,
- Jenna Molby
  
  to Skender
  
  04/05/2020 at 10:59 am
  Reply
  
  Hi Skender, You're welcome! Yes, you can also insert a URL to link a CSS file within your form. Just make sure that if you are using https:// for your Pardot form that the CSS you use is also https://. Cheers, Jenna
John

11/09/2018 at 2:35 pm
Reply

js encoded fields is what broke the dynamic redirect for me as well, removing the js encoding from my field fixed it. Great tips here, will definitely make use of the url parameter hack! Thanks
Brian

08/08/2018 at 3:44 pm
Reply

Jenna, Thanks for the great info. Any thoughts on how to leverage the 'Passing URL Parameters to a Form' within an iframe? Thx Brian
- Jenna Molby
  
  to Brian
  
  08/08/2018 at 4:06 pm
  Reply
  
  Hi Brian, you would need to add a piece of JavaScript to the parent page that will pass the parameters to the iFrame. You would still need to include the JavaScript in this post to your Pardot form. var loc = window.location.toString(), params = loc.split('?')[1], iframe = document.getElementById('pardot-form'); iframe.src = iframe.src + '?' + params;
- Elisha
  
  to Jenna Molby
  
  31/01/2019 at 2:59 am
  Reply
  
  For anyone trying to pull through the Page URL when using an iframe and struggling to understand the complicated tech talk on the link above - simply follow Jenna's (super helpful!) steps above, but use this code in in your javascript instead: document.querySelector(".get-page-url input").value = document.referrer;
- MELISSA ALLISON
  
  to Elisha
  
  15/06/2020 at 11:02 pm
  Reply
  
  Thank you very much Jenna and Elisha. This solved a big issue for me.
- Ethan
  
  to Elisha
  
  25/08/2020 at 4:33 pm
  Reply
  
  Elisha, that is so helpful. Thank you! How would you modify the JS to pull in the page name with an iFrame form?
Jordan

20/06/2018 at 11:24 pm
Reply

Hello, Jenna. I've been using your Landing Pages a lot. I really appreciate that. About these tips, is it possible to get URL or title of the parent page when I use form as an iframe form? If it's impossible, what's the case to use these scripts to get URL or titles while we could use Completion Action to change the field instead?
- Jenna Molby
  
  to Jordan
  
  22/06/2018 at 1:38 pm
  Reply
  
  Hi Jordan, I haven't tried it myself, but this article should help you https://www.nczonline.net/blog/2013/04/16/getting-the-url-of-an-iframes-parent/ Cheers, Jenna
Mardi

13/06/2018 at 12:05 am
Reply

How do you go about implementing these features for Pardot Form Handlers? Have a good now at trying to capture the page URL with an existing form handler but not having much luck.
- Jenna Molby
  
  to Mardi
  
  13/06/2018 at 12:18 pm
  Reply
  
  Hi Mardi, Great question! You would need to figure out what the selector is for your hidden field. It should have an ID or Class which you can use to target the field. Then you would add this script document.querySelector(".get-page-url input").value = window.location.href; to your page and replace .get-page-url input with the selector of your hidden field. Cheers, Jenna

1 2 3 … 5 Older

6 Ways to Use JavaScript to Enhance Your Pardot Forms

Adding JavaScript to your Pardot forms

1. Add text between form fields

2. Redirect to a thank you page based on field values

3. Use a hidden field to capture page url

4. Use a Hidden field to capture page name

5. Pass URL parameters to a Pardot form

6. Turn your form labels into placeholder text

47 comment(s)

Jaime López

Jenna Molby

to Jaime López

Joe Martinez

to Jenna Molby

Skender

to Jenna Molby

Jenna Molby

to Skender

John

Brian

Jenna Molby

to Brian

Elisha

to Jenna Molby

MELISSA ALLISON

to Elisha

Ethan

to Elisha

Jordan

Jenna Molby

to Jordan

Mardi

Jenna Molby

to Mardi

Leave A Comment Cancel reply

About Me

Categories

Most Commented

Popular Posts

6 Ways to Use JavaScript to Enhance Your Pardot Forms

Adding JavaScript to your Pardot forms

1. Add text between form fields

2. Redirect to a thank you page based on field values

3. Use a hidden field to capture page url

4. Use a Hidden field to capture page name

5. Pass URL parameters to a Pardot form

6. Turn your form labels into placeholder text

Like This Article?

Related Posts

47 comment(s)

Jaime López

Jenna Molby

Joe Martinez

Jenna Molby

John

Jenna Molby

Elisha

MELISSA ALLISON

Ethan

Jordan

Jenna Molby

Jenna Molby

Leave A Comment Cancel reply

About Me

Categories

Most Commented

Popular Posts