Creating Pardot Layout Templates

For styling forms and landing pages

1
Page 2

Introduction
Layout templates are used to format custom forms and landing pages. Think of them as
reusable blocks of code that give your marketing assets a defined structure and style.
Layout templates are a great solution if you want to enhance your forms and landing pages
with styling options that are not available using default Pardot functionality.

In this guide, we show you how to create Pardot layout templates and how you can use them
to control the look and feel of your marketing assets.

Note: Using layout templates requires knowledge of front-end coding languages like HTML,
CSS, and JavaScript. Consult a developer for help as needed. Pardot Customer Success is
unable to assist with creating custom code or troubleshooting any custom development.

Table of Contents
Using the Layout Template Builder 3

Styling Forms with Layout Templates 5

Styling Landing Pages with Layout Templates 7

How Layout Templates, Forms, and Landing Pages Work Together 11

Additional Resources 12

2
Page 3

Using the Layout Template Builder

Finding the Layout Template Builder
In Pardot Lightning App, go to Content > Layout Templates. In Pardot Classic, go to
Marketing > Forms > Layout Templates or Marketing > Landing Pages > Layout Templates.
Both paths will take you to the same layout template builder.

Layout Template Tabs

The layout template builder has three tabs: Form, Layout, and Site Search.

• The Layout tab controls the look and feel of your forms and landing pages.
You will frequently modify this tab.

• The Form tab controls the structure your forms. It makes sure that your fields, labels,
and submit buttons all show up in the right order. You will rarely modify this tab.

• The Site Search tab previously powered Pardot Site Search, a feature that has been
deprecated. You will not use this tab.

Using the Layout Tab

The Layout tab controls the look and feel of your forms and landing pages. Add your
custom code to this tab to style your assets.

Continued on next page >

3
Page 4

Some important variable tags must be included in this code to make sure your layout
template works in the Pardot landing page builder.

Variable Tag Definition

%%title%% • Adds a title to your landing page.

• When you use this template to create a landing page, Pardot
will prompt you to add a title. The title helps search engines
understand the contents of your landing page.
• The title is visible to prospects in search results and on their
browser tab.

%%description%% • Adds a meta description to your landing page.

• When you use this template to create a landing page, Pardot
will prompt you to add a description. The description gives
search engines even more detail about the contents of your
landing page.
• The description is visible to prospects in search engine results.

%%content%% • Adds a form and/or opening general content to your landing

page. Opening general content may be text, images, HTML, or
other content that you specify in the landing page builder.
• When you use this template to style a form or a landing page,
this tag tells Pardot where the form and/or opening general
content should appear on the page.

Using the Form Tab

The Form tab controls the structure of your forms. It contains variable tags like %%form-
field-input%% that tell Pardot how to arrange form elements in the browser.

You should only modify this tab if you need to rearrange or remove certain form elements.
For example, you could move %%form-field-input%% above %%form-if-field-label%%
if you want your field labels to appear below your form fields.

For more: Layout Template Form Code

4
Page 5

Styling Forms with Layout Templates

Before You Begin

First, ask yourself: will the form be embedded on your website or on a Pardot landing page?

If you are embedding a form on a Pardot landing page, your template can contain code that
styles both the form and the landing page at the same time. That way, one template does all
of the work. We’ll cover this method on Page 7.

If you are embedding a form on your website, it’s best to create a very simple layout template
that uses CSS to style your form and little else. That way, you won’t see any extra content
appear in the form’s iframe when you add it to your site.

Creating your Layout Template

1. In Pardot Lightning App, go to Content > Layout Templates. In Pardot Classic, go to

Marketing > Forms > Layout Templates or Marketing > Landing Pages > Layout Templates.
Both paths will take you to the same layout template builder.

2. Click + Add Layout Template.

3. Give your template a Name, Folder, and Tags. These features will help you stay organized
and find the right layout template quickly when you build forms.

4. From the Layout tab, add CSS above the </head> tag. Learn more about form styling on
the next page.

5. Make changes in the Form tab, if needed.

6. Click Save.

5
Page 6

Styling your Form with CSS

By default, Pardot forms are styled using a default style sheet. To disable these styles and start
from scratch with your own custom styling, deselect the Include default CSS stylesheet and
style your forms by adding CSS to the head of your layout template. You can use inline CSS or
link to an external style sheet.

Each part of your Pardot form has its own CSS element. Review the Form CSS Classes and
Examples documentation to understand how to target each part of the form.

In this example, we use inline CSS to make the font of form field descriptions Arial, size 12px,
and navy blue. Here’s the code and the output:

If you don’t have much experience with CSS, use the Form Style Generator from Jenna
Molby (Salesforce Certified Pardot Specialist) to automatically create CSS to style your
Pardot forms. Simply input your desired styles into a WYSIWYG interface and the generator
provides the CSS you need to add to your template.

Applying your Template

When your template is finished, go to Forms and apply it to a new or existing form using the
Form Builder. In Step 3, Look and Feel, select your template from the Layout Template box to
apply the styles. After saving your form, click View Online to view the styled form in your
browser.

Note: Applying a new template to an existing form will automatically update the form’s styling
on all websites that contain the form’s iframe. As a best practice, start by applying the
template to a test form to make sure the styling renders as desired.
6
Page 7

Styling Landing Pages with Layout Templates

Before You Begin
Figure out whether you will use your own custom code or start from one of Pardot’s
responsive layouts.

Using Your Own Custom Code

1. In Pardot Lightning App, go to Content > Layout Templates. In Pardot Classic, go to

Marketing > Forms > Layout Templates or Marketing > Landing Pages > Layout Templates.
Both paths will take you to the same layout template builder.

2. Click + Add Layout Template.

3. Give your template a Name, Folder, and Tags. These features will help you stay organized
and find the right layout template quickly when you build landing pages.

4. From the Layout tab:

• Delete the default code and replace it with your own custom code, or
• Use the Import Layout dropdown to automatically overwrite the default code by
importing code from a URL.

5. Add the required %%title%%, %%description%%, and %%content%% variable

tags.

6. Add content regions to make your layout template editable in the Pardot landing page
WYSIWYG editor. Learn more about content regions on the next page.

7. Style your form by adding CSS above the </head> tag.

8. Make changes in the Form tab, if needed.

9. Click Save.

7
Page 8

Using Content Regions

Content regions are HTML attributes that make components of your layout templates editable in
the Pardot landing page builder. By adding content regions to your layout template, your users
can easily change out text and images in your template using a WYSIWYG interface. Without
regions, changing content requires coding.

To make sections of your page editable, add pardot-region attributes to the HTML:

Editable sections are outlined with dotted lines in the landing page builder. Sections without a
region attribute will not be editable.

Editable Not editable

8
Page 9

You can add content regions to different types of HTML elements in order to provide different
editing experiences in the landing page builder.

Users Can Edit HTML Element

A hyperlink a

An image img

HTML code, pre

Text 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
Text, images, HTML, and more article, aside, div, dt, dd, figure,
figcaption, li, footer, header, main,
section, td

For more: Control Which Landing Page Content Users Can Change

Starting from a Responsive Layout

If you don’t want to create a completely custom layout template, you can start from one of
Pardot’s five responsive layouts. These layouts already contain all of the necessary variable
tags, code for basic form and landing page styling, and content regions for an easy editing
experience. Edit the code to add your own colors, fonts, logos, and more to customize the
template for your business.

Continued on next page >

9
Page 10

1. In Pardot Lightning App, go to Content > Layout Templates. In Pardot Classic, go to Marketing
> Forms > Layout Templates or Marketing > Landing Pages > Layout Templates. Both paths
will take you to the same layout template builder.

2. Click + Add Layout Template.

3. Give your template a Name, Folder, and Tags. These features will help you stay organized and
find the right layout template quickly when building future forms.

4. From the Layout tab, select a responsive layout from the Import Layout dropdown and click
Import Now.

5. Customize the template code for your business needs. You may consider editing the page
structure, page styling, content regions, and form styling.

6. Make changes in the Form tab, if needed.

7. Click Save.

As you make edits, click Preview Changes to see a live mock-up of the edits in your browser.

Applying your Template

When your template is finished, go to Landing Pages and apply it to a new or existing landing
page. In Step 3, Content Layout, select your template.

10
Page 11

How Layout Templates, Forms, and Landing Pages Work Together

Now that you know how to style forms and landing pages using layout templates, we can take
a final look at how all of those pieces fit together to create a full web experience. .

Form
Includes form fields, above form
content, and below form content..

Landing Page
Includes your chosen form,
landing page content, and
opening general content.

Layout Template
Includes the code that gives your forms and landing pages their look
and feel. Also includes the %%content%% variable tag, which tells
Pardot where to import the form attached to your landing page.

11
Page 12

Additional Resources
Documentation
• Engaging Visitors with Landing Pages
• Customizing Forms
• Jenna Molby’s Form Style Generator

Accelerators
Accelerators are 1:1, consultative engagements designed to help you overcome your
business challenges. If you are a Pardot Premier customer, you can request an Accelerator
through the Help & Training portal. If you are not a Pardot Premier customer, contact your
Account Executive for more information about Salesforce Success Plans.
• How to: Pardot: Use Forms and Landing Pages

Success Resources
• Explore Pardot training modules on Trailhead.
• Browse the Pardot Customer Hub for quick links to additional resources.
• Post questions in the B2B Marketing Automation Trailblazer Community.
• Join Ask an Expert office hours to discuss best practices and strategy with Pardot
Specialists.
• Contact Pardot Support for technical assistance or troubleshooting.

Partners
Need hands-on help designing forms or landing pages? Pardot has a wide network of
partners who can assist with custom development. Find a partner on the AppExchange or
contact your Account Executive for recommendations.

12