COMPONENTS

BUILDING A NEW LEAD CAPTURE PAGE

The Lead Capture page is where you collect essential contact information from your participants.  

When you start to build a new Lead Capture page, you will be prompted to select either an empty layout or predefined layouts for the page. Regardless of the option you select, you can then drag and drop components from the Components sidebar on to the Builder to customize your Lead Capture page.

Note: You can skip building a Lead Capture page and go directly to a Post-Quiz page from a funnel’s internal-use only Quiz Results page. Without a Lead Capture page, after answering your Questions, participants are taken straight to the Post-Quiz page without being asked to enter their contact information. *Please note that by skipping the use of a Lead Capture page, our platform will not be collecting essential contact info from your participants. For more information, see our article on Skipping Lead Capture.

When creating a funnel using a template, a ready-made Lead Capture page is often already included in the template. You can use this page as-is, or modify it to suit your requirements. 

Note: Lead Capture Page Builder components are customizable through the Properties tab. For more information, see the article Lead Capture Page Builder: Properties.

LAYOUT ORGANIZATION

These components are used to organize your Lead Capture page. There are four (4) types of layout organization components, namely:

CONTAINER

In web design, containers are used to style some of the important elements on a web page, e.g. headers, footers, and margins. The same principle applies to the container component in a Lead Capture Page. When designing the page, you may need to add a container to apply common styling to other components on the page. 

To use a container in your Lead Capture Page, drag the Container component onto the page body. 

Initially confined to the top of the page body, the container includes an inner content section which is where you place the other components you want to use in the page body. To increase the size of the container so that it covers a wider area, click the container, then drag the handlebar at the bottom and resize it accordingly. 

The content section follows the container - if you drag the container until it reaches the bottom of the page body, the content section goes along with it, meaning you can use that area to display content you want to appear on the Lead Capture Page. You can use any of the other components, including the other layout organization components, within the Content section.

ONE COLUMN 

With this component, the page body is displayed as a single column. Drag and drop it into the area where you want the column to appear.

2 COLUMNS

With this component, the page body, or part of it is divided into two (2) equal columns. To use this component, drag and drop it into the area where you want the columns to appear. To resize the columns, click any of the columns, then drag the handlebar that appears on the right until you reach the desired size.

3 COLUMNS

With this component, the page body or part of it is divided into three (3) equal columns. To use this component, drag and drop it into the area where you want the columns to appear. To resize the columns, click any of the columns, then drag the handlebar that appears on the right until you reach the desired size.

BASIC COMPONENTS

The basic components are used to display content on the Lead Capture. There are four (4) types of basic components:

COUNTDOWN

The Countdown component allows you to add a countdown timer on the Lead Capture page. To use the component, drag and drop the component onto the Lead Capture page. The deadline date for the timer is set in Properties, at the top of that section. See our article on Setting the Countdown Timer for more information.

TEXT

The Text component allows text to be added / displayed on the page. To use the component, drag and drop onto the page, then double-click it and enter your desired text. The component displays several formatting tools at the top, allowing text to be resized, bolded, italicized, underlined, etc. Text can also be aligned to the left, center, or right. You can also select a font to be used for the text.

VIDEO

The Video component allows inserting videos within the Lead Capture page. To use the component, drag and drop the video component onto the page. To resize the video window, select it, then drag any of the handlebars that appear on the sides and in the corner. A video ID is required from either YouTube or Vimeo, and can be entered under the Properties section, at the top. See our article on Adding a Video for more information.

IMAGE

The Image component allows inserting images within the Lead Capture page. To use the component, drag and drop an image component onto the Lead Capture page. Here you will be asked to either upload an image from your desktop, or select one from the ones you have already uploaded to your bucket account. To resize the image component, select it, then drag any of the handlebars that appear on the sides and in the corner. 

FORM INPUTS

These components are used for the form where participants’ contact information needs to be entered. 

CONTACT FORM

You are required to use this component on the Lead Capture page. Without it, you cannot use the other Form Input components. To use it, drag and drop a Contact Form component onto the Lead Capture page. Once dropped on the page, the component shows a section where you can drag and drop Short Input components (see below) and a Continue button that you can position anywhere on the form. Follow the instructions that appear on the form to set up the fields where your participants can enter their information. To resize the component, select it, then drag any of the handlebars that appear on the sides and in the corner.

SHORT INPUT

This component is used to get your participants’ contact information. To use it, drag and drop a Short Input component onto the Lead Capture page. When you drop the component onto the page, it will show a form where you can set up the types of information you can get from your participants:

• First name
  
• Last name
  
• Email address
  
• Phone number
  
• Custom field (this can be anything, e.g., a comments field)
  

Select the types of information you want from your participants, set up their properties (field name, placeholder text, and whether the field is required or not), then click Confirm. The input field is then displayed on the Lead Capture page. 

The number of Short Input components you will need to use with your Lead Capture page depends on the information you want to get from your participants. For example, if you want participants to provide their first names, email addresses, and phone numbers, you need to use three (3) Short Input components - one each for first name, email address, and phone number.

INPUT LABEL

The Input Label component is used to label the Short Input components on the Lead Capture page. To use it, drag and drop an Input Label component onto the page, then enter the text you want to display to your participants when they view the page on the browser app.