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
I’m so glad I found your blog! Not many people write blogs about Pardot and my work have been using it since before I started here.
Hi Jenna, thanks for all this amazing stuff!
I’d like to use the ‘Redirect to a thank you page based on field values’ tip to redirect people who have not left a particular text field blank. Can you help?
Hi Jenna, do you know if there’s a way to expose form tags in the form markup? For example: you tag a form as a “webinar” form or a “brochure download” form, and you want to expose the form’s classification for third-party analytics (such as Google Tag Manager). Is there a way to get “webinar” or “brochure” into any part of the form classes or ids? We’re considering the work-around of using a hidden fields (e.g., adding a field called “webinar” to webinar-related forms), but that feels like a hack. Any guidance you can offer is appreciated. Thanks.
Thanks for the great code. Its working for me however I have noticed that If a user make a mistake while filling up the form, the form gets reloaded and the “pr” is lost from the URL. How can I handle this situation.
For the first tip on how to add text to the form above a field, I would like to know how to edit the text format. It would be ideal to make the text bold and black. Thank you for any help
Hi Brian, You can add some CSS to the page to add formatting. An example of changing the font color would look like this .add-text-before {color:#000000;}. Hope that helps! Cheers, Jenna