6 Ways to Use JavaScript to Enhance Your Pardot Forms

In:

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.



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”.

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.



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.




What is your favourite tip?

View Results

Loading ... Loading …

Related Posts

  • 25/07/2018
    2 Free Pardot Landing Page Templates You Can Use for Your Next Event

    Create beautiful, responsive landing pages in Pardot by using one of these 2 free Pardot layout templates. These landing page templates are designed specifically for events such as webinars or trade shows, but they will work well with any landing page that contains a form.

  • 18/07/2018
    The Best Way to Create a 2 Column Pardot Form

    In this tutorial, I’ll show you the best way to create a two-column Pardot form. This is a follow up on my original post How to Create a 2 Column Pardot Form. By popular request, this new method includes a way to make certain form fields full width. All you have to do is add CSS classes to your form fields and copy & paste the CSS provided into Pardot.

  • 11/07/2018
    How To Use UTM Parameters to Capture Lead Source in Pardot

    You might already be using UTM parameters to track your marketing campaigns with Google Analytics, but are you capturing that information when a prospect is created in Pardot? Capturing this data is critical in order to assess the value of your marketing campaign and is a lead management best practice.

6 comment(s)
  • Brian

    08/08/2018 at 3:44 pm
    Reply

    Jenna, Thanks for the great info. Any thoughts on how to leverage the 'Passing URL Parameters to a Form' within an iframe? Thx Brian

    • Jenna Molby
      to Brian

      08/08/2018 at 4:06 pm
      Reply

      Hi Brian, you would need to add a piece of JavaScript to the parent page that will pass the parameters to the iFrame. You would still need to include the JavaScript in this post to your Pardot form. var loc = window.location.toString(), params = loc.split('?')[1], iframe = document.getElementById('pardot-form'); iframe.src = iframe.src + '?' + params;​​​​​​​​​​​​​​​​

  • Jordan

    20/06/2018 at 11:24 pm
    Reply

    Hello, Jenna. I've been using your Landing Pages a lot. I really appreciate that. About these tips, is it possible to get URL or title of the parent page when I use form as an iframe form? If it's impossible, what's the case to use these scripts to get URL or titles while we could use Completion Action to change the field instead?

    • Jenna Molby
      to Jordan

      22/06/2018 at 1:38 pm
      Reply

      Hi Jordan, I haven't tried it myself, but this article should help you https://www.nczonline.net/blog/2013/04/16/getting-the-url-of-an-iframes-parent/ Cheers, Jenna

  • Mardi

    13/06/2018 at 12:05 am
    Reply

    How do you go about implementing these features for Pardot Form Handlers? Have a good now at trying to capture the page URL with an existing form handler but not having much luck.

    • Jenna Molby
      to Mardi

      13/06/2018 at 12:18 pm
      Reply

      Hi Mardi, Great question! You would need to figure out what the selector is for your hidden field. It should have an ID or Class which you can use to target the field. Then you would add this script document.querySelector(".get-page-url input").value = window.location.href; to your page and replace .get-page-url input with the selector of your hidden field. Cheers, Jenna

Leave A Comment

Your email address will not be published. Required fields are marked *

About Me

Welcome to my blog, where I share, tips, tricks, thoughts and solutions that I learn in my daily life as a sales and marketing professional.

LEARN MORE

Categories
Most Commented
Popular Posts