Landing Page Templates are a great way to apply custom styles and formatting (such as your organization's color scheme and font) to landing pages to ensure a consistent appearance across all your landing page campaigns. Each landing page campaign can then be customized for its specific purpose while maintaining that consistent appearance.
Access your templates
To access and manage your landing page templates:
- Access the Admin interface.
- Click Landing Pages > Landing Page Templates.
TIP: On list pages, click a column header to sort on that column; click again to reverse the sort order. Click the columns count below the list to add and remove columns in the current view.
The Manage Landing Page Templates page displays your organization's landing page templates by name, numerically and alphabetically.
NOTE: All landing page template names that start with a number will be listed before those names that start with a letter. For example, 2019 Renewal and 2020 Welcome would appear earlier in the list than Renewal 2019 and Welcome 2020. Keep this in mind when creating/naming your landing page templates.
Locate Landing Page Templates
There are a few features that you can use to more quickly locate landing page templates.
- Use the column headers (click to sort on) if you know who created, modified, or published the landing page template or one of the date columns if you know that there was recent activity; this will re-order the list based on your selection. Click the same column header again to reverse the order.
NOTE: The Landing Pages column (not shown) indicates how many (if any) landing page campaigns are built on each template.
- Use the Search feature if you know the name of the landing page template and to find landing page templates with similar names. The search also queries the Description, Status, and Created By fields.
NOTE: The search field is not case-sensitive; "M" and "m" will yield the same results.
Getting in the habit of using these features will simplify locating your landing page templates so you can get to the business of managing them.
Manage Landing Page Templates
There are several action buttons above the list that you can use to manage your landing page templates.
To activate the buttons, you have to select a landing page template, and then you can:
- Edit the layout and design. Refer to Design a Landing Page Template, below, for information on how to edit a landing page template.
- Create a copy of it by clicking Save as and giving the copy a unique name and description.
- Publish it so that it is available as the basis for new landing page campaigns.
- Rename it and, optionally, update its description.
- Revert it to its last published version.
- Remove it by clicking Delete.
Notes on published templates
Your organization's published landing page templates will be accessible from the:
- Landing Pages Templates list page
- Select Landing Page Form Template page when:
- Create New is clicked on the Setup page of a new landing page
- Edit is clicked on the Setup page of a landing page that does not already have a template associated with it
NOTE: If you modify and republish a template, landing pages that were built on the prior version will not be affected; only new landing pages, built on the modified template, will reflect the changes.
Create a Landing Page Template
The bulk of creating landing page templates is done on the Editing Landing Page Template page which has multiple options that are described below in Design a Landing Page Template.
To create a landing page template:
- On the Landing Page Templates list page, enter a name in the New Template Name field at the top and click Go.
NOTE: Landing page template names can contain and can start with a number. Those that start with a number will be listed before those that start with a letter. For example, 2019 Renewal and 2020 Welcome would appear earlier in the list than Renewal 2019 and Welcome 2020.
- You should also provide a Description so that the template's purpose is easily identified, especially if you have multiple users creating multiple templates.
- Optionally, you can lock the theme so that only authorized users can change the colors that you have selected and the color that you have designated as the background.
- Continue with Design a Landing Page Template, below.
Design a Landing Page Template
Whether creating or editing a landing page template, you'll work in the template designer (the Editing Landing Page Template page). The create and edit options take you directly to the Design tab.
NOTE: You'll be presented with a canvas-width pop-up message in which you have to set the pixel width of your template canvas (i.e., the area where you'll add your landing page content). As indicated in the message, if you plan to use a banner image, you should set the canvas width to the width of the banner.
The Design tab
This tab is where you set your default color schema and landing page font.
Landing Page Elements
Form Properties has no function until you've added at least one Form zone from the Zones tab. Refer to the table in the next section to learn more.
You can toggle ON/OFF the boundaries (a double-red line border) of the Form Fields that you've added to the landing page. Uncheck the box to dismiss the boundary.
Use these options to set which colors to use in the various areas and elements (header, footer, links) of your landing page template. Click Add new theme under Current Theme to choose colors and give them a name (such as URL and Footer). In this area, you can also:
- Set a background color for the body of the landing page form template and
- Lock the themes so that only other Admins can change these settings; that is, they cannot be changed when non-Admin users are creating landing page campaigns.
Learn more about creating, applying, and locking your Color Themes.
Default Font Style
Use these dropdowns to set the default font and size for your text. Click Set to preserve your settings.
NOTE: This font and size will apply only to text that is added in your WYSIWYG text elements. The Form Field labels will not inherit these settings.
The Zones tab
Zones are the building blocks that you'll use to build the structure and content of your landing page templates. Each zone can be dragged from the menu and dropped onto the canvas to create a new object block for the content (layout, text, and images) of the landing page form.
When you add a zone to the canvas and then select it, the Default Font Style area of the menu gets replaced with the Zone Styles area. Use this to adjust the width of the zone and apply borders and padding.
Click Select Parent to automatically change from the selected zone to its parent zone (its "wrapper") so that you can configure the appearance of that zone. You can work your way up through the layers of zones without having to keep selecting and unselecting zones in the canvas.
|Column Section||Use to add columns to your layout for side-by-side content. Drag onto the canvas and then choose the number of columns. The columns can be populated with other zones and additional columns. This is an easy way to place text next to an image.|
|WYSIWYG||Use to add a text block to your message. You can use the WYSIWYG editor to format your text and insert images, tables, and attachments. See Message Editor Zone - WYSIWYG for more information.|
|Image||Use to add images to your message. You can add hyperlinks and alt tags to images, and position images within a column. After inserting an image, use the Basic Editor to perform rudimentary edits or the Advanced Image Editor for more technical customizations. Also, see Message Editor Zones.|
|RSS||Use to add an RSS feed to your message. The RSS feed can pull in content from your website or blog post, or any other RSS content available. See the RSS section in Message Editor Zones for more information.|
|Use to add static information-gathering fields, such as names and contact information. If your account uses Custom Fields and (Shared and Private) Enhanced Fields, they'll be available. Refer to the Form Fields section below to learn more.
NOTE: Initially, this zone is labeled Form and prompts you to "Add a form to the page." After you've added a form zone, the zone label changes to Form Field and the prompt to "Add a field to the form."
NOTE: This zone is exclusive to Landing Page Campaigns. It will not display in the Zones menu for Messages or Templates. Learn more about Landing Page Campaigns.
You can use the Form Field zone to insert data-collection fields into a landing page campaign. The data that are collected will be written to the respective record in your Higher Logic account. You can include Standard Fields as well as your account-specific Custom Fields, Shared Enhanced Fields, and Private Enhanced Fields.
NOTE: Landing page campaigns must include, at a minimum, an email address field.
When the zone is "dropped" into the message canvas, a configuration dialog will appear. Use the following table to help configure the zone.
NOTE: You cannot change the font properties of the fields.
|Field Selection||There are two types of fields that can be added to landing page campaigns:
Real Magnet Fields - all Higher Logic fields (Standard, Custom, and both types of Enhanced Fields) are available. Select a field from the dropdown. Data entered into this field will update the field in your Higher Logic account.
One-time fields - can be used with a single landing page campaign only; they cannot be used across multiple landing page campaigns. Before choosing this option, refer to One-time fields limitations for additional information.
|Field Type||Choose the type that best suits the Field Selection. Some field selections force a type based on the information they are designed to gather. For example, the Standard Field Phone allows one type option, Text (Single Line).
NOTE: This limitation is not applicable to One-time Fields.
NOTE: The One Togglable Value option is a good way to capture Yes | No information (e.g., checked = Yes), but be sure to label it clearly.
NOTE: The Textarea (Multi-line) option has a 1,500 character limit.
|Label Text||Specify a label for the field. For example, for the Phone field, you could indicate your preference, Work Phone.
NOTE: This will have a "group" designation for the Checkboxes, Radio Buttons, and Dropdown Field Types. Refer to Group Options, below, to learn more.
|Placeholder Text||Provide an example, such as (xxx) xxx-xxxx, to indicate the preferred format.
NOTE: Doing this prevents receiving data in various formats, such as xxx.xxx.xxxx and xxx-xxx-xxxx.
|Field Width||Set the width of the field.
NOTE: In most cases, full (100% width) is the best choice because it ensures that the field is the same width as the others.
|Optional Help Text||Include brief "helper" text, such as * Format number as shown, under the label. This will better ensure that you collect the data you want, how you want it.
NOTE: This text cannot be formatted.
|Options||This field will display only if the Checkboxes, Radio Buttons, or Dropdown Field Type is chosen. Refer to Group Options, below, to learn more.|
|What type of field is this?||Set the field as either Normal or Progressive. Refer to Normal and Progressive fields, below, to learn more.
NOTE: If Progressive is chosen, the field will have a small tab when it is selected.
- After completing the fields of the configuration dialog, click Save.
The new field will display on the canvas. Review it to ensure that it looks and reads as you intend. You can click the zone and relocate (drag) it to a different location within the Form Field zone; click Edit to make changes.
TIP: Save your changes before proceeding.
One-time fields limitations
One-time fields have the following limitations.
They cannot be:
- saved to the recipient's record.
- used as personalization in messages.
- added to a landing page template.
They can only be:
- added in a landing page campaign.
- exported via the Submissions List option in landing page tracking.
Sample Form Field
The image below shows a segment of a landing page campaign. One Standard Field (Phone) and two Shared Enhanced Fields (LinkedIn and Twitter) have been customized to collect optional contact and social media data from respondents.
If Checkboxes, Radio Buttons, or Dropdown is chosen as the Field Type, an Options section will appear in the configuration dialog. You can add a label for the group (of checkboxes or radio buttons) or dropdown, as well as "helper" text to provide information to the respondents. For example, your helper text for a group of radio buttons could solicit answers to a question, with the buttons being pre-populated responses, such as:
NOTE: You must complete the Value field for any Label-Value pairing that is added.
- Use the Label field to present a "friendly" option.
- The value of the Value field will be written to your account along with other data collected in this Form Field.
TIP: Click + add another option to add a Label-Value pairing. Click an X to remove a Label-Value pairing.
Normal and Progressive fields
To make the most of your landing page campaigns, consider using Progressive fields to collect data. The difference between these fields is that:
- Normal fields will always display on a landing page. However, they can be set up (during configuration) to be pre-populated if that field's data has already been collected so that the respondent won't have to re-enter the information.
NOTE: Be sure to check the "pre-populate" box during configuration. Otherwise, respondents will have to repeatedly enter their information.
- Progressive fields let you limit the number of fields that display on a landing page. Depending on the number of fields, this could be overwhelming, which could result in fields being ignored or overlooked.
NOTE: Checkboxes, radio buttons, and dropdowns can be Progressive fields.
Set up Progressive fields
On the Form Preferences dialog, you can specify how many Progressive fields should display.
- After you've added a Form Field zone to a landing page, you can select it and click the Form tab (or click Form Properties on the Design tab of the left menu) to access the Form Preferences dialog.
- In the Progressive section, specify the number of Progressive fields you want to simultaneously display on the landing page.
- Click Save.
If your landing page Form Field has seven Progressive fields and you specify 2, only two of the seven fields will display on the landing page on any given visit.
Then, if the respondent revisits this -- or visits a different -- landing page, a different two of your seven Progressive fields will display. This functionality is dependent on two factors:
- The respondent provided the information for the two fields on the prior visit, and
- The respondent can be identified.
Each subsequent visit to this or a different landing page will present two different, incomplete Progressive fields -- per respondent. So over the course of multiple landing page visits, all of the Progressive fields' data can be collected, but incrementally.
Now that you've created a landing page template, get started creating your landing page campaigns!