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.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
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.
1 2 3 4 5 6 7 8 9 10 |
<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> |
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.
1 2 3 |
<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”.
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.
1 2 3 |
<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.
Learn more about UTM parameters in Pardot in this post
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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.
Questions?
Send me a tweet @jennamolby, leave a comment below, or book a Peer Chat.
Hi Jenna,
Love these tips and your site. For adding text before fields, is there a way to style them? Currently they’re showing up super tiny above my fields, which isn’t super helpful. I’ve tried a few things, but so far the things I’ve tried have ended up removing my text all together.
Thanks!
Hi Alli, Yes, you can add some CSS to style the text before the form fields like this:
.add-text-before {
font-size:20px;
}
Hi Jenna, for the hidden field to capture the page the form was submitted on, it worked great for me the first time, but will not update when I tested on a second page, using the same test email (test prospect). It kept the original page that I tested on first, and did not update when I submitted the second time on a different page. Also, the hidden field and value was shown in the first submission email that Pardot sent me, but the field dropped off in the email Pardot sent me for the second form test submission. Is there anyway to get the hidden field to update each time a form is submitted from a different page for the same prospect? And I imagine if that field updated each time, that field would also stay in the notification email from Pardot.
Hi Teddy, In your form field settings, ensure that “always display if previously completed” is CHECKED and “maintain the initial value upon subsequent form submissions” is UNCHECKED.
Hi Jenna, for option 3 “Use a hidden field to capture page url”, the field is working but it’s pulling in the URL of the form, not the url of the page. Any suggestions?
The site is still in staging at this time.
Hi Mike, Sounds like you might be using an iFramed form? In that case, the code wouldn’t work.
Hi Jenna, I’m having trouble pulling in the page url into hidden fields, its pulling in the thank you page that we are redirecting to instead of the page that the form is on. I put the JS on the html in the below form code. What am I doing wrong?
Hi Lauren, That’s strange. Email me your landing page URL and I can take a look.
Hi Jenna,
Is there any way to add a variable tag in the Thank You content to capture the name of the person submitting the form?
Hello! Yes, you can use the first name variable tag on the thank you page to display the prospect’s first name.