Like other funnel components, Lead Capture pages are customized through the Builder tab.

To start customizing a Lead Capture page, click the component, then click either Builder on the top left, or the Edit button at the center of the component.

After laying out your Lead Capture page using the various Lead Capture components (see our article on Lead Capture Page Builder: Components), you can set the properties of the components and customize them further from the Properties tab, which is located to the right of the Components tab on the Builder.

To set the properties for a component, click the component first to ensure that it has been selected.

There are properties at the top that are common across components. These properties are not classified under any section, unlike the others below, e.g. Size, Alignment, and Margin.

• ID: System-generated ID for the component
  
• TITLE: Optional title for the component
  

For Short Input components, the properties displayed when you first set up the component are also displayed under the Properties tab.

• Placeholder: Placeholder text to help guide participants in filling out the page
  
• Type: Can be of any of the following types:
  

• Text: used for First and Last Names input types
  
• Email: used for email address input type
  
• Password: used for password input type
  
• Number: used for contact number input type
  

• Required: checkbox for when a value is required
  

For other components, properties may vary:

SIZE

The Size section displays the first set of properties after the common properties above. These are dynamic for some components - the properties change if you resize the component by dragging the handlebars that appear when it is highlighted.  Viewable by default, you can hide the Size section of the Builder by clicking the button to its left.

WIDTH 

The width of the component in pixels. Except for Column components, there are two width properties, namely -  Width and Max Width.

HEIGHT

The height of the component in pixels. There are two height properties, namely, Width and Min Height.

FLEX BASIS

The previously-mentioned Max Width and Min Height properties (see above) are related to the Flexbox web layout model used in Lead Capture pages.

ALIGNMENT

The Alignment section displays alignment-related properties. Viewable by default, you can hide this section of the Builder by clicking the button to its left. Typically, when creating your page, these are set for you when you drag the component to the Builder. They can be edited based on the component, although it is recommended to stick with the default properties unless you’re familiar with web design.

DISPLAY

This sets how the component is displayed on the page. Often set to block, but can be inline, inline-block, flex, or none, depending on the component.

POSITION

The position of the component on the page. Set to auto by default.

TOP

The alignment of the component relative to the top. Set to auto by default.

RIGHT

The alignment of the component relative to the right. Set to auto by default.

LEFT

The alignment of the component relative to the left. Set to auto by default.

BOTTOM:

The alignment of the component relative to the bottom. Set to auto by default.

MARGIN

The margin between components. Viewable by default, you can hide this section of the Builder by clicking the button to its left. Typically, when creating your page, these are set for you when you drag the component to the Builder. They change dynamically depending on how you position the component on the page, but you can also set them manually here.

MARGIN TOP

The margin from the top.

MARGIN BOTTOM

The margin from the bottom.

MARGIN LEFT:

The margin from the left.

MARGIN RIGHT:

The margin from the right.

INNER PADDING

The Inner padding properties refer to the space around the component's content, inside of any defined borders (see below). Viewable by default, you can hide this section of the Builder by clicking the button to its left. Typically, when creating your page, these are set for you when you drag the component to the Builder. However, you have full control over the padding. There are properties for setting the padding for each side of the component (top, right, bottom, and left).

BORDER

The border properties lets you specify the style, width, and color of the border around the component. Viewable by default, you can hide this section of the Builder by clicking the button to its left. Typically, when creating your page, these are set for you when you drag the component to the Builder. However, you have full control over the border.

SHADOW

The Shadow section lets you add a shadow layer to a component. This is set to No shadow by default. 

To add a shadow to a component, select the component, then click the + button. The Shadow properties are then displayed. To delete the layer with the shadow, click the X button on the top-right.

BACKGROUND IMAGE

The Background Image section lets you add a background image to a component. This is set to No background by default. 

To add a background image to a component, select the component, then click the + button. The Background properties are then displayed. From here, you can add a background image and set related properties. To delete the layer with the shadow, click the X button on the top-right.

BACKGROUND COLOR

The Background color section lets you add a background color to a component. This is set to None by default. 

To add a background color to a component, select the component, then click the button to the right of the Background color box. Select the desired color from the palette, then press Enter on your keyboard.

FONT PROPERTIES

The Font properties lets you specify the size, family, weight, line height, and letter spacing of the text inside a component. It also allows you to add shadow to text and specify the color of the shadow at the same time. 

Viewable by default, you can hide this section of the Builder by clicking the button to its left. Typically, when creating your page, these are set for you when you drag a component that allows you to add text to the Builder. However, you have full control over your text’s font properties.

FLEX

The Flex properties are related to the Flexbox layout model that is used for the components in your Lead Capture page. These properties vary depending on the component. Viewable by default, you can hide this section of the Builder by clicking the button to its left. It is recommended to stick with the default properties unless you’re familiar with web design.