6 Ways to Use JavaScript to Enhance Your Pardot Forms

September 3, 2021
Pardot Forms

Pardot-Form-Tricks-With-Javascript-Add-CSS-Class-URL

Refreshed and republished on September 3, 2021

This post was originally published on May 29, 2018 and has been revamped and updated for accuracy and comprehensiveness.

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.

<br /><br /><br />
<script type=”text/javascript”><br /><br /><br />
function insertBefore(el, referenceNode) {<br /><br /><br />
    referenceNode.parentNode.insertBefore(el, referenceNode);<br /><br /><br />
}</p><br /><br />
<p>var newEl = document.createElement(‘div’);<br /><br /><br />
// replace this line with your message<br /><br /><br />
newEl.innerHTML = ‘ENTER YOUR TEXT HERE’;</p><br /><br />
<p>var ref = document.querySelector(‘.add-text-before’);</p><br /><br />
<p>insertBefore(newEl, ref);<br /><br /><br />
</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);

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.

<br /><br /><br />
<script type=”text/javascript”><br /><br /><br />
  switch(‘%%Free_Trial_Live_Demo%%’) {<br /><br /><br />
  case ‘Free Trial’:<br /><br /><br />
  document.location=’http://www.yoursite.com/thank-you-free-trial/’;<br /><br /><br />
  break;<br /><br /><br />
  case ‘Live Demo’:<br /><br /><br />
  document.location=’http://www.yoursite.com/thank-you-live-demo/’;<br /><br /><br />
  break;<br /><br /><br />
  }<br /><br /><br />
</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;

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.

Note: This will not work if you have a iFramed form on a web page.

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

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

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”.

Note: This will not work if you have a iFramed form on a web page.

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

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

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

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.

Learn more about UTM parameters in Pardot in this post

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

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.

This Pardot article written by:

Jenna Molby

Jenna is a Salesforce Certified Pardot Specialist, Salesforce Certified Pardot Consultant and Salesforce Marketing Champion 2020. Jenna is a marketing operations leader with over ten years of B2B and B2C experience working on both the agency and client-side.

Original Pardot Article: https://jennamolby.com/6-ways-to-use-javascript-to-enhance-your-pardot-forms/

Find more great Pardot articles at https://jennamolby.com/

Pardot Experts Blog

We have categorized all the different Pardot articles by topics.

Jenna Molby

Original Pardot Article: https://jennamolby.com/6-ways-to-use-javascript-to-enhance-your-pardot-forms/

Find more great Pardot articles at https://jennamolby.com/

6 Ways to Use JavaScript to Enhance Your Pardot Forms

Refreshed and republished on September 3, 2021

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

Jenna Molby

Pardot Experts Blog

Pardot Topic Categories

More Pardot Articles

Data Cloud & Account Engagement – What you need to know

Marketing Cloud Growth vs Account Engagement (Pardot)

Summer ’24 Broke Lead Assignment Notifications in Account Engagement

Using Engagement Studio Programs for Lead Assignment

How to generate content with Einstein Assistant in Pardot

Increase productivity with Sales Engagement Basic

Account Engagement’s Email Builder – New Email Experience

How to work with Person Accounts in Pardot

Jenna Molby

Pardot School

6 Ways to Use JavaScript to Enhance Your Pardot Forms

Refreshed and republished on September 3, 2021

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

Receive my latest posts directly to your inbox

Jenna Molby

Pardot Experts Blog

Pardot Topic Categories

More Pardot Articles

Jenna Molby

Pardot School