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.
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.
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.
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.
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
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.
81 Comments
Jenna great content! I have a question have you figured out how to add a field for file upload?
Hi Jamile, Thank you! I cover this question in this blog post: https://jennamolby.com/creating-pardot-forms-common-questions-answers/.
Where do you add the javascript if you want the text to be above the submit button for a privacy statement?
This is from your Pardreamin form presentation:
function insertBefore(el, referenceNode) {
referenceNode.parentNode.insertBefore(el,
referenceNode);
}
var newEl = document.createElement(‘div’);
// replace this line with your message
newEl.innerHTML = ‘By
registering I confirm that I have read and agree to
the Privacy Statement.‘;
var ref = document.querySelector(‘p.submit’);
insertBefore(newEl, ref);
I tried the html in the below form but that did not work, then I tried adding it to the body of the form template, still no luck.
Hi Brian, This article explains how to add a privacy policy statement above the submit button https://jennamolby.com/how-to-add-an-opt-in-message-and-privacy-policy-message-to-pardot-forms/.
Merry Xmas Jenna! by chance, do you know how to use JS to change the input type from text to email?
From <input type="text" … to <input type="email"
I was trying to validate the data before it is sent, but I am still not sure how to get it
Hi Jaime, You could use this JS to change the input type to email document.querySelector(‘.YOURFIELDNAME input’).type = ’email’;
Hi Jenna,
Great resources here! I’m having trouble using a hidden field to capture a page name (I thought at first it was because my form was within a modal, but then I tried putting the form inline on the page and it yielded the same result–blank entry into Pardot). Any thoughts on what I might be missing? Thanks!
Hi Mike, Thank you! DM me with the link to your page and I can take a look to ensure everything is set up correctly 🙂
Hi Jenna,
Weird thing I came across in Google Search Console, not sure if you would know the fix. I added the functionality on my forms to capture the page title where the form was submitted, but now Google is Indexing each of those urls as “Indexed, not submitted in sitemap”. I’m concerned it may be hurting our SEO performance. Any example of the URL is below. Everything before the “?” links to my Pardot form. It’s strange because none of my Pardot assets get indexed besides these form submissions after I added Page Title capture functionality.
https://info.protossecurity.com/l/836413/2021-04-09/2x6rn?Webpage_Submission_From=LiveView Technologies | Security Devices | Protos Security
Any idea?
Thanks!
Hi Teddy, hmm interesting I have not come across this before, sorry.
Teddy, your example landing page is set to allow search engines to index it. There is a Landing Page setting in Pardot called “Hide from search engine indexing” that you can check in order to exclude your pages from search.
The solution might be to go over all your new forms to make sure this setting is checked off.