Make your life easier by using these Pardot code snippets to kickstart your next Pardot landing page, email template or form project.
Catalogue
Landing Pages & Landing Page Templates
Landing Page Variable Tags
Title
Use this snippet to populate the name of the Pardot landing page.
|
1 |
%%title%% |
Content
Place this snippet where you would like the form, site search results, or landing page general content to appear within your design.
|
1 |
%%content%% |
Content Regions
A Link
Use this snippet to make a link in your landing page template editable.
|
1 |
<a href="https://jennamolby.com" pardot-region="editable-link" pardot-region-type="link">My Link</a> |
An Image
Use this snippet to make an image in your landing page template editable.
|
1 |
<img src="image/my-image.png" pardot-region="editable-image" pardot-region-type="image" /> |
HTML
Use this snippet to display HTML code on you landing page.
|
1 |
< your code here> |
Simple
Use this snippet to make HTML elements editable. You can use it on the following tags: address, b, big, blockquote, caption, cite, del, dfn, em, h1, h2, h3, h4, h5, h6, i, ins, kbd, p q, s, samp, span, small, strike, strong, sub, sup, u var
|
1 |
<p pardot-region="simple-text" pardot-region-type="simple">Your text here</p> |
WYSIWYG Editor
Use this snippet to make HTML elements editable. You can use it on the following tags: article, aside, div, dt, dd, figure, figcaption, li, footer, header, main, section, td.
|
1 |
<div pardot-region="pardot"><h3>My Header</h3></div> |
Emails
View in Browser
To add a view in browser link to your email add the following snippet.
|
1 |
%%view_online%% |
Unsubscribe
To add a unsubscribe link to your email add the following snippet.
|
1 |
%%unsubscribe%% |
Email Templates
Email Content Regions
Pardot will automatically make every table cell or paragraph editable, however, if you want to “lock down” your template so only some areas are editable, you can use these snippets.
Editable Content
Add this snippet to a table cell to make it editable.
|
1 |
<td pardot-region></td> |
Repeatable Content
Pardot allows you to specify repeatable content blocks within an email template. This is great for scenarios where you need 3 content sections for 1 email but only 2 for another email.
|
1 2 3 4 5 6 7 |
<div pardot-repeatable> <div pardot-region> <h1>Title</h1> A paragraph of text <a href="#">Read More</a> </div> </div> |
Forms
Change a form submit button to an image
Place this snippet in the Look and Feel step in the form wizard to change it to a image. Remember to remove all the text in the Submit Button field.
|
1 2 3 4 5 6 7 8 9 10 11 |
<style type="text/css"> form.form p.submit input { margin: 0; padding: 0; text-align: right; border: none; background: url(http://www.site.com/submit.gif) no-repeat left top; width:100px; height:100px; cursor: pointer; } </style> |
Trigger a download after successful form submission
Use this snippet to automatically start an asset (like a whitepaper) to download upon successful form submission. Place this code under the Thank You Code tab in the form wizard.
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> var howLongToWait = 10; //number of seconds to wait var urlOfDownloadContent = 'http://www.example.com/whitepaper.pdf'; // URL of your piece of content function triggerDownload() { window.location = urlOfDownloadContent; } setTimeout('triggerDownload()', howLongToWait * 1000); </script> |
What are your favourite Pardot snippets?
Email me, send me a tweet @jennamolby, or leave a comment so I can add them to the list.
Hi Jenna,
Is there a relevant Pardot-region=”button” for Layout templates, we have button on landing pages but the regions will only let us change the text and not the link.
When we do use pardot-region=”wysiwyg” it breaks the button.
Or is there a work around for editable buttons on landing pages?
Many Thanks
AP
Hi Allistair, Make sure your editable region is within a div, table, td, or tr NOT a paragraph tag or a link. This will force the WYSIWYG editor to appear instead of the plain text editor. Cheers, Jenna
Hi Jenna, I’d like to build personalised landing page using variable tags.
Can you please tell me how (and where) to add them into the layout template? My intention is to show people what information we have about them (name, email address, phone number) on the left of my page, and provide a form for them to update that information on the right.
Thanks!
I am finding that last snippet INCREDIBLY useful. I market to CEOs of hospitals, and to be able to just have them click and go on our factsheets is exactly what we want to have happen. Why that isn’t a clickable box option within Pardot itself is beyond my comprehension.
I tried the trigger download script but the file is never downloaded automatically. Do you have any solutions to that? I added the link to the file in the thank you section once the form is submitted. But I’m sure it’s better if the file is automatically downloaded once the form is submitted.
Thank you for your article. It is very informative and easy to understand. I have one question: if I have background-image properties in the css should I also change their directory to a pardot file (like you did with the![]()
tags in the html).