Overview

Layout Templates are flexible templates that can be used in Lead Liaison for globally styling web forms and landing pages or creating repeatable web page templates that mirror the entire look and feel of your company's website. The %%content%% placeholder should be inserted into your template. When the Layout Template is applied to a web form or landing page the form/landing page will be inserted into the contents of the Layout Template in place of the %%content%% placeholder.

Creating Layout Templates

To create a Layout Template do the following:

Go to Marketing > Layout Templates
Click the Add Layout Template button
Enter a Layout Name. The Layout Name is an internal name for the Layout Template.
Use the code editor to add your Layout Template code.

Keyboard Tips

Full Screen Mode: Click anywhere inside the editor and press F11 to view it in full screen mode. Press Esc to exit.

Search: Place your cursor inside the code editor and click Ctrl + F (PC) to search code within the editor.

Alternatively, pull in code from one of your existing web pages. Lead Liaison will automagically convert all relative URLs to absolute URLs for you. Click the gear and select the Import layout from URL option and enter in the URL of a web page you'd like to incorporate into your template. Once the code is pulled in you can freely customize it to your liking.

Include %%content%%

Make sure to include the %%content%% placeholder. Your landing page or web form will be inserted in place of this value in your Layout Template.

Keep your Layout Template Clean

It's recommended to strip down your layout template to get rid of any excess HTML tags or JavaScript code that might reside in the original page. For example, a <base> tag might be in the template, which would change all page links, or JavaScript code, which might redirect a user or introduce adverse behavior.

Default System Style Sheet

You can view the default system Style Sheet here: https://app.leadliaison.com/CSS/magic-form.css. To remove all styling from your Layout Template uncheck the box as shown in the screenshot below. Note, unchecking the box will remove all styling on the %%content%%. For example, when a webform is inserted into the %%content%% placeholder all default system styling on the web form will be removed.

Here's an example of a web form that was inserted into the %%content%% placeholder with the default system styling removed.

Managing Layout Templates

To manage your Layout Templates do the following:

Click Marketing > Layout Templates
Under the Actions column click the gear to see a list of options:
- Edit = Edit your Layout Template. All landing pages and web forms using this Layout Template will be updated with your changes once the Layout Template is saved.
- Preview = Opens a new browser tab and displays a preview of your Layout Template. This gives you an idea of how the template will look on the web and when used with your landing pages and/or web forms.
- Set as Default = Sets the Layout Template as the default system template. When creating a web form or HTML landing page the default template will be used.
- Delete = Deletes the Layout Template.

Applying Layout Templates

Layout Templates can be applied to your web forms or landing pages as follows:

Web Forms

Create your web form
On the web form designer click Form Properties
Choose your Layout Template from the Layout Template dropdown
The Default Layout Template is selected by default

Your web form will be inserted into the %%content%% placeholder in the Layout Template

Landing Pages

Create your landing page
For the Design Type, choose HTML
On Step 1 (Configure) select the Layout Template in the Template field

The content you create in Step 2 (Content) will be inserted into the %%content%% placeholder in the Layout Template