Customizing Pardot form behavior with JavaScript

Pardot is an excellent tool for marketing automation, however, sometimes we run into situations that aren’t natively handled by the platform and we get to put our thinking caps on! We recently worked with a client with an existing, rather complex business case.

Several pages on their website displayed an identical form that would send the user to a different page of resources depending on what product they were interested in. However, the indicated product wasn’t based on a form field, rather the preference was indicated by which page the user was on when they submitted the form.

Here’s a not nonprofit-y example. Let’s pretend a website has unique pages for several different kinds of sports. If you’re reading about baseball and want to download the baseball resource package (go O’s, then Dodgers – it’s my blog so I get to choose!), you would submit the form and then be redirected to a page with the desired baseball resources. If you were on a page about football, you’d follow the same process, fill out an identical form, but you’d be redirected to the football resources page upon submission.

Now, in this case, our client had 40 unique resources and that meant 40 form embeds. They wanted to move away from the form builder they were using in favor of native Pardot forms, but if we couldn’t recreate this experience, the alternative would have been developing and maintaining 40 Pardot forms. Ugh.

Enter Javascript integration in Pardot forms! We leveraged the opportunity to inject JavaScript into the “Thank You Code” and “Thank You Content” sections within Pardot’s form builder.

The first step was to create a hidden field on the form called “link to use,” which was mapped to a custom field on the prospect record of the same name. When the user clicks on the form link from any of the 40 possible pages, the script populates this hidden form field with the URL of the embedded form page. 

Then the JavaScript uses the “link to use” value to set the proper URL address for the “Download Your Resources,” link in the form’s thank you content. Back to our sports analogy, baseball users get baseball content, football users get football content, and so on. All with only one form to maintain!

So what’s that Javascript look like?

<script type="text/javascript">
let link = '#';
let cookiename = '';

switch('%%Link_to_use{js}%%') {
    case ‘Baseball’:
        link = 'https://www.fionta.com/baseball';
        cookiename = ‘baseball;
        break;
    case ‘Football’:
        link = 'https://www.fionta.com/football';
        cookiename = ‘football;
        break;
    case ‘Basketball’:
        link = 'https://www.fionta.com/basketball';
        cookiename = ‘basketball’;
        break;
case ‘Hockey’:
        link = 'https://www.fionta.com/hockey';
        cookiename = ‘hockey’;
        break;

default: 
link = 'https://www.fionta.com/';

} 

if (cookiename != '') {
        var now = new Date();
        now.setFullYear(now.getFullYear() + 1);
        document.cookie = cookiename + '=1;expires=' + now.toGMTString() + ';path=/;domain=.fionta.com;';
}

document.querySelector('.correct-guide-link a').setAttribute("href", link);
</script>

Can you think of any similar use cases for your nonprofit or association? Feel free to use the code above or reach out to us for further customizations.