The Input Form element is the basic building block of a form in ClickFunnels.
You can build a form from scratch simply by adding a single Input Form element (set to Email) and a submit button.
To add the Input Form to the page, click on the Add Element button in an empty row or click the orange circle with the + symbol to add the field below the selected element.
This will bring up the Elements menu.
1) You can search through all the elements
2) Select the Input Form element
3) You can give the element a custom name (optional)
4) Cancel (if you want to close the menu without adding the element). You can also use the Esc key.
5) Add the selected element to the page. You can also double click the element in the menu to add it to the page.
After you have added the Input Form to the page, you have quite a few different options.
Hover your mouse over the element. You will see a few different icons.
1) The gear icon will open the settings for this element. You can also click on the element directly. You can also hover your mouse over the element and hit the E key on your keyboard.
2) This icon will duplicate the existing element with the same settings. You can also hover your mouse over the element and hit the D key on your keyboard.
3) This will delete the element. You will receive a popup confirming that you want to delete the element. Please note, there is no Undo.
4) Add a new element directly beneath this element. You can also hover your mouse over the element and hit the A key on your keyboard.
If you open the settings panel, you will see all of the options that are available for the Input Form element.
1) Element Name: You can change this to whatever you like.
2) Element ID: This is assigned by the system and cannot be changed.
3) Visibility Settings: Toggle the visibility of the element on Mobile and Desktop devices.
4) Margin Top: This determines the margin (in pixels) on the top of the element. Use this to increase space between elements.
5) Input Type: This setting is essential to setting up your forms correctly. Ensure that you select the correct Input Type for this field. If you select an Email Address type, the field will automatically be required.
6) Placeholder Text: This is the default text that will display in the the form as a placeholder. You can also delete this text for a blank input field.
7) Required: Toggle this setting to make a field required or not required. (All email field types will be set to Required automatically.)
8) Size: Use this setting determine the size of the field.
9) Style: Select a pre-determined style for your Input Form.
10) Font: Use this setting to determine the font of the placeholder text and the text that the user enters into the field.
11) Font Weight: Select normal or bold font for the text in this field.
12) Corners: Select round or square corners for your field.
13) BG Color: Select the background color for the Input Form.
14) Icon: Select an icon for your Input Form
15) Icon Style: Select a style for your Icon
16) Icon Position: Determine the position of the Icon inside the field.
17) Text Align: Determine where the placeholder text and the user text will be positioned.
18, 19, 20) Timed Delay: Use these settings to set a time delay for the field if you choose.
21, 22, 23) Animations: Use this to have the field be animated when the page loads.