Element Settings: Checkbox Input 

Element Settings: Checkbox Input  

This article explains the different settings found under the input settings. The input settings hold different options to customize the selected element according to your preferences.

Requirements: 

• An active ClickFunnels 2.0 account
• A supported element

Table of Contents:

• Top Margin
• Input Type
• Custom Type
• Required
• Start Checked
• Icon Style
• Check or Square Color
• Square Corner
• Gap
• Size
• Border Style
• Stroke Size
• Corner

Top Margin:

This setting lets you adjust the vertical space above the selected element by adjusting the slider or by typing a numeric value next to px.

Example:

Back to Top

Input Type:

The two available options in input types are (a) not set, and (b) custom type. 

1. Not set: This is the default setting when the selected element is added in the page editor. The system displays warnings or reminders that tell you to change the input type.
   
   Example:
   
   
   
2. Custom Type: Custom type lets you collect custom attributes from your leads that are stored in their contact profile.

Back to Top

Custom Type:

Type in a name for your Custom Input. This name will be used to display the custom data on the user’s Contact Profile.

Important Note: You must select Custom Type as the Input Type.

Back to Top

Required:

Use this setting to turn your selected element into a required or not required option. The Required option means your visitors must check the box to proceed.

Back to Top

Start Checked:

The selected element can be set up to have a check on it by default when the page displays.

Example: Checked

Example: Unchecked

Back to Top

Icon Style:

Use this setting to pick between a checkmark or a box icon.

Example: Check Icon

Example: Box Icon

Back to Top

Check or Square Color:

The default color of the icon is white, which can be changed by clicking the color bar.

Important Note: The title of this setting changes depending on the selected icon style.

Back to Top

Square Corner:

Adjust the slider to the left or to the right, or enter a numeric value next to px to customize the corners of the square icon.

Important Note: The square corner setting only becomes available when selecting square in the icon style settings.

Example: Square Corners

Example: No Corners

Back to Top

Gap:

Adjust the distance between the Checkbox icon and the Label text by moving the slider left or right or by entering a numeric value next to em.

Example: No Gap

Example: With a Gap

Back to Top

Size:

Move the slider left or right, or enter a numeric value next to px to adjust the size of the checkbox.

Example: Default Size

Example: 50 px size

Back to Top

Border Style:

Adjust the border style by selecting one of the three available border style settings. The three border styles are solid, dashed, and dotted.

Important Note: The stroke size of the border should be higher than zero (0) px to notice the border around the checkbox.

1. Solid: The border of the checkbox is seen as a solid line around the checkbox.
   
   Example:
   
   
   
2. Dashed: The border of the checkbox is seen as a broken line around the checkbox.
   
   Example:
   
   
   
3. Dotted: The border of the checkbox is seen as a dotted line around the checkbox.
   
   Example:
   

Back to Top

Stroke Size:

The stroke size setting adjusts the thickness of the border around the checkbox. Adjust the slider left or right, or enter a numeric value next to px.

Example: 21 px Stroke Size

Example: 0 px Stroke Size

Back to Top

Corner:

Move the slider left or right, or type a numeric value next to px to adjust the corners of the box.

Example: 0 px Corner

Example: 10 px Corner

Back to Top

Supported Elements:

This setting can be found in the following Elements: 

• General Element: Checkbox

Back to Top