Speaker 0: Hi, everybody. This is Mike. Um, good to see you today. Welcome to ParDreaming. I’m this is set day two, and, uh, we’re looking forward to helping you out today. Katie, Karen is with me today, and we’re going to talk about, uh, customizing form behavior in Pardot. I’m going to give it just a few more minutes before we get moving here to make sure everyone can get in the session. So, uh, hold tight. Um, we’ll also be, like, taking your questions and answers. So we’ll use the time provided at the end of the session. Alright. But, Karen, I think we’re right about time now. So if you’re ready to go, I will hand it over to you, and we’ll start the presentation.

Speaker 1: Okay. Great. Thank you, Mike. Hi. Good morning, everyone. Welcome to Customizing Pardot Form Behavior with JavaScript. Let me get my screen up for you. Wonderful. Mike, can you just confirm you’re seeing my screen?

Speaker 0: It’s coming across the line. I see it.

Speaker 1: Thank you. Um, well, good morning or good afternoon depending on on where you might be right now. I am at Tahoe Dreaming, so I’m actually double dreaming today. You know? What a life we get to lead. So excuse the fact that there is a hotel, uh, bed background behind me. Also, I think that my video might be a little choppy. I am at the behest of hotel Wi Fi. So I think after this, I’m going to turn my video off just to make sure that you have the cleanest stream here, but I I did want to I wanted you to see who I who I am here. Alright. I’ll move to the next slide, and then I’ll pop my video off. Great. Okay. Well, my name is Karen Tracy. I’m the VP of Marketing for a company called Fionta. It’s like Fiona, but with a T in there, Fionta. We were founded in March 2001, so we just celebrated our twentieth anniversary. We were founded, uh, 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. And we’ve 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, honored 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, uh, 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 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 the career section. I am an East Coast transplant. I am currently living my best sunny life in Los Angeles with my husband and a rescue menagerie. And outside of work, you will find me hiking, crafting, binging dark dramas, and eating more popcorn recent Pardot 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 parity with the functionality they had become used to in Marketo. They had migrated to Salesforce about three or four years prior. They 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 Marketo slide. Uh, so a lot of the all of the cleanup work really was on Marketo side, making sure that when we brought what we brought into Pardot was organized clean, and then we could allow the power of Salesforce really to drive that marketing functionality. So during discovery, as we were cataloging assets that we would need to recreate, like email templates and layout templates and the like. We learned about what they called their EHR resource library, and this library consisted of, at the time, 40 downloadable PDFs. They were, um, research documents, and one Marketo form embedded on, well, you guessed it, 40 separate pages of their member portal, which, by the way, is Experience Cloud. The 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 non-profity example for you. A couple 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, sewing, and embroidery. I love all of this. So 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 elements 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, um, the efficacy or the, uh, engagement, sorry, with the individual PDF files. So here’s where the power of injected JavaScript in Pardot form comes in. Without JavaScript, LeadingAge would have had to create and maintain 40 Pardot forms and more because they often add resources. We we help them launch with 40. I think they’re at 49 or something at this point. Um, so they would have had to create these forms, maintain these forms. Any one change that they would have wanted to make that they needed to make, they would have had to make to all. So, um, that was a hard no from everyone, including us. Um, 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. Oh, what I just said. Cue sounds of magic and delight. Everyone was excited. So 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. In the thank you code, we have a call to action. Um, oopsie doodles. Sorry, guys. I skipped ahead. Um, I skipped the most important part. So 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 form’s 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, you know, took there was some copy pasting. Right? What each one of these chunks is one individual download, and you’ll see that we’re saying, let the link equal pound by cookie name equal. And in our example, the case is EHR. The link that we are that we want the redirect to be is injected here. And so 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. Oopsie. Oops. Sorry, guys. Super sensitive mouse. Um, in the thank you code, we have this call to action that 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 pound. And at the very bottom of our JavaScript, I don’t actually have it in the screenshot, but I do have the code, um, if anyone is interested in it. At the bottom of that JavaScript, we have a line that says set attribute href comma link for the a tag as long as, um, the a tag is within the style that’s called correct-guide-hyphen-link. So the JavaScript, um, instead of rendering the placeholder pound tag when it loads on the front end, the desired download link is displayed for the user. I shouldn’t say display. It is the link. It’s not displayed because 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 want to let good gathered data go to waste. Remember that that hidden field called link to use, um, LeadingAge now knows what page the user was on when they filled out the form, excuse me, 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 the user, um, or they can reach back out to the user and maybe send them additional, like, you may also like kinds of soft sells. Though, of course, none of this information costs anything for the members. Um, they can build lists for each area of interest. So quickly spin up a segmented list, uh, segmentation list, um, static or dynamic, looking for this particular resource, CellToolMed, because, um, 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, um, 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, you know, take any additional, um, do any additional functionality off that tag. They can send notifications to users, users, you know, with a capital U, Salesforce users, when the field is populated when the field is populated with a particular resource, um, for LeadingAge and some of these resources fell into cert like, certain areas, um, of specialty that were managed by different Salesforce users. They can so users can receive notifications, say, when linked use is filled with CellToolMed. 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. Um, a certain Charlie Campbell said JavaScript is the duct tape of the Internet. And when I shared that on Slack with my developers, there was a there were a lot of emojis that, uh, indicated agreement there. I also come from a family where we use duct tape to fix practically everything in our home as well. So, um, 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 what we did and what I just demoed, uh, but the result and 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 that on the button to do the 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 to the 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 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 comp excuse me, 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 and improved user experience. I’m sorry. I don’t know if you hear children screaming in the hotel hallway next to me, but I do. Um, 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 are annoyingly underscore fionta. We’re Fionta on LinkedIn. And, uh, you’re welcome to reach out to me directly at ktracy@fionta.com. Um, we we definitely have some time for some chat, um, for some questions if anyone has. And and, truthfully, I I 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 and maybe you could share that in the chat too.

Speaker 0: Well, Karen, thank you very much for the great presentation. As you mentioned, we do have a couple minutes for questions if there are any. Um, one question that did come up inside chat, Karen, was asking for the code that you’ve shared. Um, several people have said they’d love to see that code. So if that’s something we can post, that would be excellent. If not, we can, uh, send it out later in the but that would be a great thing to share.

Speaker 1: Yeah. I will hold on just one second. I can put in a link right now with it.

Speaker 0: And we do have probably about five minutes or so. So if anybody has any other questions, please feel free to put them in chat, and, uh, we can address them now. I know this is an excellent solution. I mean, the idea of going from forty forty different Pardot forms to one is just, um, fabulous. So thank you so much for sharing that with us.

Speaker 1: Oh, you’re welcome. Thank you so much. Um, I wonder how do I do I have access to the chat? Let’s see.

Speaker 0: You should be able to chat.

Speaker 1: I I just put, um, the link to a blog we wrote about this, which has the code in there.

Speaker 0: Okay. Perfect. But I

Speaker 1: didn’t see it show up. Does does everyone see that? I’m sorry. I think my interface is a little bit different. Um, I see Jay asked a question. How much of this can clients maintain on their own? I will give full props to my LeadingAge clients that they are pretty darn savvy. That being said, you saw the 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 they already had a really strong taxonomy in place. So every resource guide had a name that that that matched the URL, etcetera. Um, 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, um, learning more about using JavaScript. Uh, where’s a good place to learn? I think I would put that out to to others. Um, my I’m not the deepest code developer, um, and 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, um, uh, places to learn.

Speaker 0: I know fellow, uh, Cercante employee there, Marco, through W3 Schools in there as a as a resource, and that’s the one I’ve used before too. So that is a great source.

Speaker 1: Yes. Thank you. Absolutely. That’s how I learned HTML in, uh, 1999.

Speaker 0: Karen, that blog link still did not come across.

Speaker 1: I I put I’m so sorry. I put it in the left column, Mike, of the of the interface I have. But I don’t seem to have the ability I

Speaker 0: hear it. I got it.

Speaker 1: Oh, you got it? Okay. Can you share that?

Speaker 0: Absolutely.

Speaker 1: Ah, wonderful. Thank you so much.

Speaker 0: Awesome. Well, great. Any other questions out there?

Speaker 1: About two thirds of the way, um, down the page, the full code is there.

Speaker 0: Perfect. Well, thank you again for joining us today. Karen, great presentation, great solution. Um, I’m sure we can all benefit from from using that. Uh, there are there there you go.

Speaker 1: No. I just saw another question. Um, oh, Codecademy, yes, of course. W three, yes. Yes. Um, I I did see a question here. We’re using Pardot form on the third party website. Do we put JavaScript in Pardot or on the website? Um, let’s see. If you’re using a a true Pardot form, not a Pardot form handler, the JavaScript goes right in the Pardot form handler. It’s on the the fourth tab, I believe, when you’re creating the form in, um, 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 is thank you code, and that’s where the JavaScript

Speaker 0: goes. Alright. Before we run, I did want to, um, can give a shout to our sponsors. This park green’s been a great event. I’ve had a great couple days. I’m I sure hope you all have as well, but we couldn’t do without our sponsors. So if you haven’t yet, um, please take a moment to drop by the booths, say hi, check out the resources and solutions they have. You can also get some grid points for your, uh, scavenger hunts and stuff that you’re working on as well. Also, this afternoon, be sure to drop drop in our Birds of a Feather event. There’s about 10 different Birds of a Feather out there, so there’s something for everybody out there. So no matter how specific your need is, there’s a group out there for you. So please be sure to join us today. With that, we will close the session. Karen, again, thank you very much, and, uh, enjoy the rest of your day, everyone.

Speaker 1: Thank you all. Bye bye now.