In this article, you'll learn about the four tabs you'll use to create, design, and manage your Landing Pages.

While most work is performed in the Design tab, it's important to understand the functions of the Mobile, Process, and Activate tabs as well. These tabs, while dependent on the work you do in the Design tab, contain features that allow you to complete the Landing Page process.

Design tab

Let's learn about a few Design tab basics.

Dragging and sizing

The Landing Page Designer is a true drag-and-drop editor where you can freely move form elements as you need to. Let's take a look at the options available for the different elements.

Hover over an element to reveal the Green Directional Arrows icon. Click the icon and drag the element to the desired location.

Additionally, hovering will reveal the Red X icon. Click this icon to the delete the element.

To resize the width and height of any layout elements, click and drag the resizing handles.

NOTE: Some elements will have a Blue Gear icon. Click this to open a properties pop-up where you can further edit that element.

Collision detection

Collision detection is enabled in the Landing Page layout area. This means that when you use the Green Directional Arrows to move items, they detect other elements. For example, when you click and drag an element over another element, the dragged element returns to the exact previous position to prevent overlapping. Similarly, when you click and drag groups of elements, they all return to their previous positions to prevent overlapping.

Remember RGB

The Red X, Green directional arrows, and Blue gear icons will always serve the same function regardless of the element. This makes it easy to remember how to interact with the drag-and-drop features.

Grouping items

Sometimes it's easier to move multiple objects simultaneously than one-by-one. Because of this, you have the ability to move multiple items as one, cohesive unit.

When working with different landing page fields, you can select multiple items with your mouse by pressing Ctrl and clicking on the different elements. Alternatively, you can simply drag your cursor over a region in the designer.

Grouped items receive a red highlight around their borders.

To move items, simply use any of the green handles for one of the elements. If you've selected too many items, use a subsequent Ctrl + Click to deselect the unwanted item(s).

Mobile tab

The Mobile tab allows you to optimize your layout for a mobile device. We live in a mobile world, and Communications Professional landing pages are no different. By optimizing the look and feel of your landing page for cell phones, tablets, etc., you'll ensure that you have the mobility needed to navigate an ever-changing information ecosystem.

You will not add any elements to this design–they are all inherited from the Design tab. However, you can freely re-size the existing elements inside the layout area and change their position. Additionally, you can work with the Style Flyout Menu (any styles you change are shared between the Design and Mobile tabs). See How to Style Your Landing Pages to learn more.

Reset Mobile

The Reset Mobile button allows you to adjust and reorder all items on the mobile version after you’ve made changes on the Design tab. They are automatically placed in the order they were added. Please note that you’ll still need to manually rearrange these items on your final mobile version.

NOTE: The first time you navigate to the Mobile tab has the same effect as clicking Reset Mobile: The items on the Mobile tab are automatically ordered.

Process tab

The Process tab allows you to configure what happens after a subscriber completes a landing page form.

This tab contains the following options:

• Change the user’s profile - Click in the Auto-subscribe Interests field to add any automatic interests to assign after subscribers complete the form.
• Redirect the user - Click the drop-down to redirect subscribers to another landing page, a web page, or an uploaded PDF file (PDFs are uploaded in this tab by selecting File).
• Auto-fill - Allows the form to auto-fill information (this is disabled by default). This feature is designed for profile management, and if subscribers access the form via a mailing (when this option is checked), their information auto-fills.

NOTE: Keep in mind that if subscribers forward the mailing, the original subscriber’s information carries forward. This means that if forwarded recipients open the mailing and access the subscription form via the links, they could potentially overwrite subscription and profile information for the original subscriber.

• Notify - Enter any email addresses that will receive notification any time a form is completed and add a note to those recipients.
• Follow-up mailing - Select a follow-up mailing to subscribers who complete the form. You can copy an existing mailing or create a new one.
• Add user to a campaign - Adds subscribers that complete the landing page form to a campaign.

NOTE: You need to have an active campaign for this option to be available.

Additional information about Auto-Fill

When users enter information into Landing Page forms, they can potentially modify their existing records in Communications Professional when leaving non-required fields blank. There are two ways that you can present these forms to users:

• Auto-fill Enabled - Values populate based on the subscriber information held in Communications Professional. Any changes (including any fields that have been “emptied” with blank values) update in Communications Professional. Any previously-populated fields that are submitted as blank are replaced with the new, empty value.
• Auto-fill Disabled - Values do not populate based on the subscriber (all fields are initially empty). Any changes, including blank values, update in Communications Professional. Any previously-populated fields that are submitted as blank are replaced with the new, empty value.

Communications Professional displays the following warning message when Auto-fill is disabled:

• Clicking Yes submits the form.
• Clicking No returns users to the form and allows them to make any necessary changes.

NOTE: If users have incomplete required fields, they'll also see a warning message noting they must complete them before submitting.

Activate tab

As the name suggests, the Activate tab allows you to activate your landing page. However, it also allows you to test your landing page and displays your Form URL and iFrame Code.

The buttons have the following functions:

• Test Landing Page - Opens a new tab with the Landing Page in test mode.
• Test Mobile Landing Page - Opens a new tab with the Mobile Landing Page in test mode.
• Get URL - Opens a pop-up that contains the Landing Page URL.

• Get iFrame Code - Opens a pop-up that contains the Landing Page iFrame Code.

• Activate Landing Page - Activates the Landing Page.

If there is a validation error on the Process tab (such as a missing URL), the Get URL, Get iFrame Code, and Activate Landing Page buttons are disabled. Additionally, the tab displays a message that identifies the error, as shown below.

Below is a list of the messages that display with each corresponding validation error for the Process tab:

• No URL in Redirect the User Section (Web Page Option) - “Please correct the web page URL for where to redirect the user on the Process tab.”
• No File Selected in Redirect the User Section (File Option) - “Please upload a file for where to redirect the user on the Process tab.”
• No Follow Up Mailing (Create a New Mailing Option Incomplete) - “Please add content to your follow-up mailing on the Process tab.”
• Webinar Error – General - “Please correct the selected webinar on the Process tab.”
• Webinar Error – Missing Fields - "To register users for a webinar, the Landing Page must contain Personal Info fields for both First Name and Last Name. Once added in the Design Tab, each Personal Info field can be configured for the webinar using its gear icon."
• Webinar Error – Multiple First Name Fields - "Only one Personal Info field may be designated as the 'First Name' for the purpose of webinar registration. Please adjust the configuration of the Personal Info fields in the Design tab."
• Webinar Error – Multiple Last Name Fields - "Only one Personal Info field may be designated as the 'Last Name' for the purpose of webinar registration. Please adjust the configuration of the Personal Info fields in the Design tab.”

NOTE: Remember that the URLs in the Activate tab can be either as links in your mailings or for embedding iFrames versions of your form.