Category

Emails & Templates

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
    • Variable Tags
      • title
      • Content
    • Content Regions
      • Link Region
      • Image Region
      • HTML Region
      • Simple Region
      • WYSIWYG Editor
  • Emails
    • View in Browser
    • Unsubscribe
  • Email Templates
    • Editable Content Regions
    • Editable Content
    • Repeatable Content
  • Forms
    • Change a form submit button to an image
    • Trigger a download after successful form submission

Landing Pages & Landing Page Templates

Landing Page Variable Tags

Title

Use this snippet to populate the name of the Pardot landing page.

%%title%% 

Content

Place this snippet where you would like the form, site search results, or landing page general content to appear within your design.

%%content%% 

Content Regions

A Link

Use this snippet to make a link in your landing page template editable.

<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.

<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.

	
&lt; your code here&gt;

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

<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.

<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.

%%view_online%%

Unsubscribe

To add a unsubscribe link to your email add the following snippet.

%%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.

<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.

<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.

<style type="text/css">
  form.form p.submit input {
  margin: 0;
  padding: 0;
  text-align: right;
  border: none;
  background: url(https://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.

<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 favorite Pardot snippets?

Send me a tweet @jennamolby to tell me about your favorites, or contact the Sercante team for help.

The issue

Some versions of Outlook are defaulting the font to Times New Roman, even if the font family fallback is defined in the code.

font-family:'Roboto',Arial,Verdana,Sans-serif;"

This only happens when using custom, non-websafe fonts.

The fix

Outlook will not render your non-websafe font, but you can force it to use your fallback font. Copy and paste this code into the HEAD section of your email. Update the font-family with whatever your fallback font is.

<!--[if mso]>
 
<style>
    span, td, table, div {
      font-family: Arial, serif !important;
    }
</style>
 
<![endif]-->

Now your email should display the fallback font in every version of Outlook.

Questions?
Send me a tweet @jennamolby, or contact the Sercante team for help.

No more posts to show