In Pardot

6 Ways to Use JavaScript to Enhance Your Pardot Forms

3 Mins Read

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.

Author

I'm a Freelance Marketing Operations Consultant With 15 years of experience in Marketing Operations, I’ve worked with a wide range of tools including Salesforce, Marketing Cloud Account Engagement (Pardot), Marketo, and many other sales and marketing platforms. I help teams optimize their tech stacks, improve processes, and get accurate, actionable reporting. Whether it’s setting up your Marketing Automation Platform, building Salesforce reports, managing lead lifecycles, tracking attribution, or integrating your tech stack, I ensure everything is aligned to drive real results.

81 Comments

  1. Stephen Stouffer Reply

    For the document.location redirects I would actually do top.location.href. I ran into a few issues with ONLY the iframe redirecting and not the entire Page. 🙂

  2. David L Reply

    Hey Jenna Molby, thanks for the Form style generator you made for Pardot forms! They work great and thanks for the info on this article also.

    My end-users are often hitting submit numerous times because the form is waiting to hear back from the Pardot servers – which is messing up our data, causing errors, sending duplicate emails, etc. Is there a way to have the submit button disappear after it’s clicked? Or possibly show a loading time animation like the one seen here? https://codepen.io/TimLamber/pen/wBMmYq . Or perhaps there’s a simpler way to accomplish this goal? Thanks.

  3. Shravanti Patil Reply

    Hi Jenna,

    Using Hidden fields to capture page name and page URL doesn’t seem to be working for me. I added the script in the “Below Form” source page like so:

    and made sure to add the CSS class name to the fields. Am I missing something? While I’m not seeing any value for the page name, the page URL sometimes populates the form link.
    Thank you!

    • Jenna Molby Post Author

      Hello, Are you embedding your form using the iFrame method? The method will only work for forms embedded on Pardot landing pages.

    • Jenna Molby Post Author

      Hi Tressa, Yes, you can add formatting to the form text/section headers by adding some CSS. Here’s an example:

      Cheers, Jenna

  5. Bruce B. Reply

    Do you have any experience posting Pardot form data to third-party endpoints? Specifically ones that might require Authorization via custom headers? I’ve googled endlessly with little-to-no luck.

Write A Comment