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
Hello Jenna, thanks a lot for all your precious resources for enhancing Pardot assets.
Got a tricky question on Pardot forms for you: we’d like to use one single Pardot contact form in several ext. web pages (one web page = one city with their relevant office locations). The form iframe code will contain the parameter Field_ID=NameOftheCity + as a hidden field in the form. Do you know if this is possible to show the form field “office locations” with restricted ad-hoc values based on the offices of that specific city, by adding some scripts? Many thanks, Alexandra
Hi Alexandra, I haven’t tried it myself, but yes, that is possible. You would just need some javascript that would take the Field_ID=NameOftheCity parameter from the iFrame URL and place it within your hidden form field. Cheers, Jenna
Hi there, I’m trying to use a hidden field to capture a page url in combination with passing URL parameters (UTM’s) to a Pardot form. Is it possible to merge these two together? I will be using iframe to embed these forms on various websites. Thanks, Tammy
Hi Tammy, Yes, it’s possible. Just add both pieces of javascript to your page. Cheers, Jenna
Hi Jenna – Is there any way to style the add-text-before text? I’d like to add padding and change the font weight. Thanks!
Hi Kelsey, Yes you would add CSS like this: .add-text-before {padding:5px;font-weight:bold;}. Cheers, Jenna
Thank you! For me, that styles the text within the field, not the text above the field. I’m trying to change the Enter Your Text Here line.
Jenna, you are an outstanding resource. I would never have made it this far as a Pardot admin without your blog. This article is so helpful. I just used your tip for adding text before a form field, and it worked like a charm. I was wondering: If I wanted to add unique text before more than one of my form fields, is there a way to do that? What would I put in the CSS Class in the Pardot form and how would the JavaScript block change to support the multiple different text options?
Hi Teryl, So happy you find my blog helpful. To add text before more than one form field you would need to add a class with a unique name and then duplicate part of the code. Here’s what the code would look like if the class was named “add-text-before-2”: var newEl2 = document.createElement(‘div’);
// replace this line with your message
newEl2.innerHTML = ‘ENTER YOUR TEXT HERE 2’;
var ref2 = document.querySelector(‘.add-text-before-2’);
insertBefore(newEl2, ref2); Hope that helps. Cheers, Jenna
Love the tip about displaying text between fields. Any idea how I can style that text? I need it indented to match the rest of my form, but I’m not sure how to style the text. Thanks!
Hi Lydia, Yes, you can style the text between fields by adding some CSS to your form like this .add-text-before {color:red;}. Hope that helps. Cheers, Jenna