If you plan on using layout templates with forms, please note that styling is controlled by the outermost containing element, so:To create a layout template:
- If you have a form by itself, the layout template for that form will be displayed.
- If you have a form on a landing page, the landing page layout template will be displayed.
- If you have a form on a landing page built using the landing page builder, it will use no layout template at all.
- Navigate to Marketing > Landing Pages > Layout Templates.
- Click + Add Layout Template.
- Enter a Name. This is internal-only. Use something descriptive like "Site Search Results Layout" if you plan to use multiple layout templates.
- The Layout tab controls the look and feel of your marketing elements using HTML and CSS. Enter a variable tags to pull information into your template. See Variable Tags below for more details. You can also add content regions here.
- You can also import your styling by clicking Import layout from URL. Simply enter the URL and click Import now. You will need to edit the output by qualifying any URLs as they will all need to be absolute instead of relative (e.g., change "/images/image.gif" to something like "http://www.site.com/images/image.gif").
- The Form and Site Search tabs consist of Pardot substitution logic statements, illustrating how the various form fields, content, and other elements will be displayed. Advanced users can customize this logic based on their business needs.
Variable TagsThere are three Pardot variable tags you may add to your layout template:
- %%title%% -- The %%title%% variable tag will pull in the title for the page. For landing pages, the title entered in step 1 when creating a landing page will replace the %%title%%. Pardot will fill in the title for your unsubscribe and email preference center pages.
- %%content%% -- Enter the %%content%% variable tag where you would like the form, site search results, or landing page opening general content to appear within your design. Please do not place the %%content%% tag inside of a <p></p> tag -- doing so affects the styling of the form in different Internet browsers.