Pardot forms are fast and easy to set up since they require no coding knowledge. That being said, Pardot forms can be supercharged with JavaScript to fulfill unique business cases.
In this short presentation from ParDreamin’ 2021, Karin Tracy covers how Fíonta worked with client LeadingAge to combine a Pardot form with Javascript to turn 40 forms into one!
Transcript
Karin:
Welcome to Customizing Pardot Form Behavior with JavaScript. Let me get my screen up for you.
Well, good morning or good afternoon, depending on where you might be right now. I am at Tahoe Dreamin’, so I’m actually double dreaming today. What a life we get to lead!
I’m the VP of Marketing for a company called Fíonta. It’s like Fiona, but with a T in there, Fíonta. We were founded in March 2001, so we just celebrated our 20th anniversary. We were founded with the express intent of serving nonprofits and associations with best-in-class solutions and software. And it didn’t take us too long to determine that Salesforce was our technology of choice. We been in the partner ecosystem since 2006. And for the last several years, we have been a Salesforce.org Premium Partner. We have been lucky to have worked with over a thousand nonprofits, associations, and foundations in that time. We are women-owned, majority-women across the board, including our leadership and executive teams, which makes my heart swell. In 2020, we were certified as a Great Place to Work. And I think we certainly proved that to be true. When we heard our employees asking to stay a remote and we officially became a remote-first company earlier this year. And by the way, we are hiring. So if anyone is interested in being a Salesforce consultant, please check out our website in a career section. I am an east coast transplant. I am currently living my best sunny life in Los Angeles, my husband, and a rescue menagerie and outside of work, you will find me hiking, crafting, binging dark dramas, and eating more popcorn than you would imagine one person could eat.
So enough about me. Let’s talk about a recent product client and project. We get to work with this wonderful organization, DC-based org called LeadingAge. They are a member-based association who represent over 5,000 nonprofit aging services providers. And as you probably know, the aging community in the United States is enormous and growing every day. And LeadingAge is a true example of helping those who help others.
We worked closely with LeadingAge’s internal Salesforce team and their marketing department to migrate them from Marketo to Pardot, sync all of their marketing data with Salesforce, build lists, create email templates and landing pages, all of the normal elements of a project to bring their new Pardot instance into parody with the functionality they had become used to in Marketo. They had migrated to Salesforce about three or four years prior and had a really strong internal team. It was a delight to work with because the data in Salesforce was organized, well thought out, the structure was spot on. They had let their data in Marketo slide some so all of the cleanup work really was on the Marketo side, making sure that what we brought into Pardot was organized, clean, and then we could allow the power of Salesforce really to drive that marketing functionality.
During discovery, as we were cataloging assets that we would need to recreate like email templates and layout templates, and we learned about what they called their EHR resource library. And this library consisted of at the time 40 downloadable PDFs, they were research documents and in Marketo forms embedded on, well, you guessed it 40 separate pages of their member portal, which by the way, is experience cloud. The key functional element here was that the form automatically sent the user to download the resource that was associated with the web page that the form was embedded on.
So I have a non, nonprofit example for you. A couple of minutes ago I told you that I love to craft and I do a ton of online shopping for patterns and yarn and so on. So let’s imagine a crafting website with three sections- knitting, selling, and embroidery, and I love all of it. Each section has multiple projects and then each project has a PDF pattern download. So wouldn’t it be easier to have one form embedded on every page that collects the information needed, including the URL of the embedded form page so that when changes need to be made, say a form element or labels or completion actions you’re doing it once? And then as far as the analysis goes, both the form completions can be measured, the one form completion, as well as measuring the efficacy or the engagement, with the individual PDF file. So here’s where the power of injected JavaScript in Pardot form comes in. Without JavaScript, LeadingAge would’ve had to create and maintain 40 Pardot forms and more because they often add resources. We help them launch with 40, I think they’re at 49 or something at this point.
So they would’ve had to create these forms, maintain these forms, any one change that they would’ve wanted to make, that they needed to make, they would’ve had to make to all. So that was a hard no, from everyone (including us!) with JavaScript, we were able to create one Pardot form with 40 redirects and built-in flexibility to add and remove resource redirects as needed. Okay. What I just said, cue sounds of magic and delight. Everyone was excited. Let’s look under the hood. We created the form just as you normally will, as you normally would in Pardot form builder. We got all of our fields and labels in the desired order. And then we added a hidden field and we mapped this field to a custom field that we created on the prospect record. And in this example, we called it Link_To_Use. So we’ll use JavaScript to populate that hidden field with the URL of the referring page, i.e. the resource page, the resource that the user indicated that they were interested in. So you’ll see on the screenshot here, we’ve got our form here onto the left and Link_To_Use parentheses hidden. So the script populates that hidden field with the URL.
The javascript then uses the Link_To_Use value, to set the proper URL address for the download, your resources link, which shows up in the forms Thank You Content. So you’ll see this yellow highlighted code that represents one resource, what they call their EHR interactive guide. So we duplicated this chunk of code from case through the end of the highlighted area, 39 times. So the build took, there was some copy-pasting, right? What each one of these chunks is one individual download. And you’ll see that we are saying, let the link equal # like cookie name equal. And in our example, the case is EHR. The link that we want the redirect to be is injected here. And then in the Thank You Code, we have a call to action that reads access the guide, and it’s surrounded.
Let me show you here. In the Thank You Code, we have this call to action that reads on the front end, access the guide. And on the back end here, in the code, it’s surrounded by an href tag with this placeholder #. And at the very bottom of our JavaScript, I don’t actually have it in this screenshot, but I do have the code. If anyone is interested in it at the bottom of that JavaScript, we have a line that says set attribute href/link for the ‘a’ tag. As long as the ‘a’ tag is within the style, that’s called correct-guide-link. So the JavaScript, instead of rendering the placeholder # tag, when it loads on the front end, the desired download link is displayed for the user. I shouldn’t say displayed. It is the link. It’s not displayed cause it’s not on the front end, but it says access the guide that link then takes the user seamlessly to the page to download the resource that they wanted from the very beginning. And the user is none the wiser that all this stuff was happening in the background and that anyone trying to access any of the resources is going through this exact same form and process.
So never one to let good gathered data, go to waste. Remember that that hidden field called Link_To_Use, Leading Age now knows what page the user was on, when they filled out the form, for the resource. And they can use that gathered info in myriad ways. Few examples, they can follow up with the user and gather feedback about the particular resource. So how helpful was this particular guide? They can follow up with a user or they can reach back out to the user and maybe send them additional. Like you may also like because you downloaded X, you may find Y interesting kinds of, soft cells of course, none of this information cost anything with the members. They can build lists for each area of interest. So quickly spin up a segmented list, a segmentation list, static or dynamic looking for this particular resource seltoolmed, because they will continue to market to people who are interested in this particular resource.
They can create an automation rule to add a tag based on that field data. We actually ended up doing this in a Completion Action on the form so that every resource downloaded did automatically become a tag that was added to the prospect record so that they could then do any additional functionality off that tag. They can send notifications to users, with the ‘U’ Salesforce users, when the field is populated, when the field is populated with a particular resource for Leading Age. So of these resources fell into certain areas of specialty that were managed by different Salesforce users. Users can receive notifications say when linked uses filled with seltoolmed, and then of course they could adjust the prospect score or grade based on the data in that field.
So lastly, I wanted to leave you with some other ways that you could use JavaScript to supercharge your Pardot forms. A certain Charlie Campbell said JavaScript is the duct tape of the internet. And when I shared that on slack with my developers, there were a lot of emojis that indicated agreement there. I also come from a family where we use duct tape to fix practically everything in our home as well. So for example, you could change the Thank You message itself to display different versions based on grade, score, referring URL, other known data. You could change the redirect URL. So this is similar to what we did and when I just demoed. But the result in action is visiting another page rather than force downloading a resource like we did. You could add different UTM codes to redirect URLs based on actual selections within the form.
You can even change the text on a button depending on the asset type. So in a particular form, someone might sign up to watch a prerecorded webinar or download a resource. And the label on the button to do the thing could say, watch now, if they had selected a webinar, download now, if they had selected a resource. So really catering and personalizing the interaction and the engagement to exactly what the prospect is looking for. And because our Pardot community is both super smart and super generous, I’m happy to be able to share a couple of other ideas here from the spot for Pardot and Jenna Mobley. The spot for Pardot shared a super clever way to allow prospects, to register for multiple webinar events in one form, essentially to add multiple completion actions to a form that are tied to specific form elements. And then Jenna describes a way to really improve the overall look of your forms by hiding the labels above the form fields and adding placeholder labels within the field itself, which is a much cleaner design improved user experience.
And anyway, so with that, I would like to thank you for joining me here today. If you’d like to get in touch with me or Fionta we’re fionta.com. On Twitter, we’re annoyingly _Fionta. We’re Fionta on LinkedIn. And you’re welcome to reach out to me directly at ktracy@fionta.com. We definitely have some time for some chat, for some questions if anyone has, and truthfully, this is a space for us all to learn. So if you have done something super rad with JavaScript, I would love to hear about it. And maybe you could share that in the chat too.
ParDreamin’
Well, Karin, thank you very much of a great presentation. As you mentioned, we do have a couple minutes for questions, if there are any. One question that did come into shut side chair, Karin was asking for the code that you’ve shared. Several people have said, they’d love to see that code. So that’s something we can post. That would be excellent. If not, we can send it out later, but that would be a great thing to share.
Karin
I see Jay has asked a question. How much of this can and clients maintain on their own? I will give full props to my Leading Age clients that they are pretty darn savvy. That being said, you saw the area that I highlighted in yellow. So with just a modicum of training, essentially take this section, copy paste, replace these three little elements. And they already had a really strong taxonomy in place. So every resource guide had a name that matched the URL etc. But really any client, regardless of their tech savviness, as long as they can just look at code for two seconds and not freak out absolutely can maintain this and they have done. So, like I said, I think they’re up to 48 resources now.
And a question about learning more about using JavaScript. Where’s a good place to learn. I think I would put that out to others. My I’m not the deepest code developer. And honestly, one of my developers here at Fionta was the one who helped us develop this. So I don’t have a great answer for you about general places to learn.
ParDreamin’
I know fellow Sercante employee there, Marco through W3Schools and there is a resource and that’s I’ve used before too. That is a great source.
Karin
Yes. Thank you. Absolutely. That’s how I learned HTML in 1999!
I just saw another question. Oh, code academy. Yes, of course. W3. Yes. Yes. I did see a questionnaire we’re using Pardot form on the third party website. Do we put JavaScript in Pardot or on the website? Let’s see if you’re using a true Pardot form, not a Pardot form handler, the JavaScript goes right in the Pardot form handler. It’s on the fourth tab, I believe when you’re creating the form in, on the completion actions page. The bottom half is completion tab. I should say the bottom half is completion actions. The top half is Thank You Code. And that’s where the JavaScript goes.
