Skip to content
Fíonta
  • Nonprofits
        • Solutions
          • Fundraising / Donor Management
          • Program / Case Management
          • Grants Management
          • Outbound Funds Module
          • Manage Your Volunteers With Volunteers for Salesforce
          • Membership Management
          • Stakeholder Engagement
          • Impact and Reporting
        • Areas of Expertise
          • Salesforce Nonprofit Success Pack (NPSP)
          • Experience Cloud
          • CRM Analytics (Tableau)
          • Marketing Automation
          • Web Design, Development, and Support
        • Packages and Managed Services
          • Nonprofit Success Pack (NPSP)
          • Case Management
          • CRM Analytics
          • Functional Portals
          • Virtual Events
          • Marketing Automation
          • A Little Spring Cleaning of Your Data Goes a Long Way

            Read Story
  • Associations
        • Solutions
          • Memberships and Renewals
          • Conferences and Events
          • Chapters
          • Donations and E-Commerce
          • Education and Certification
          • Artificial Intelligence
        • Areas of Expertise
          • Salesforce for Associations
          • Experience Cloud
          • Marketing Automation
          • Web Design, Development, and Support
          • Fonteva
          • Nimble AMS
        • Packages and Managed Services
          • Sales Cloud
          • Community Portals
          • Fonteva AMS
          • Marketing Automation
          • Virtual Conferences
          • CRM Analytics
          • A Little Spring Cleaning of Your Data Goes a Long Way

            Read Story
  • About Fíonta
    • Team
    • Clients
    • Partners
    • Events
  • Our Work
  • Blog
  • Careers
    • Open Positions
    • Life at Fionta
  • Contact
Salesforce Cloud
Nonprofits Associations About
/ Blog / Customizing Pardot Form Behavior with JavaScript

Customizing Pardot Form Behavior with JavaScript

Published: February 9, 2021Last Updated: November 11, 2022Author: Karin TracyCategory: Marketing Cloud Account Engagement (Pardot)
Using JavaScript in Pardot Forms

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.

Author
Karin Tracy
Karin Tracy

Post navigation

6 Ways Ensure a Successful Fonteva Implementation
All About…Pardot: February 2021
Salesforce Consulting Partner 2020 Salesforce Partner Great Place To Work Certified 2021-2022

We are always interested in individuals who want to leverage their expert technical abilities towards making a positive difference in the world.

Join our team

Fíonta takes your privacy seriously. Review our privacy policy and learn what cookies this website uses. © Copyright 2023 Fíonta. All rights reserved.

Want a monthly newsletter filled with info for nonprofits and associations?