Form Element Settings

Form Element is used to collect Leads using the FlexiFunnels Landing Page editor.

STEPS TO USE FORM ELEMENT 

1. Click on the "+" button in the sidebar and Choose "Forms" under components.

2. Click the Form element among the available options, and drag the Form element into the editor workspace.  

3. Open Form Settings: Click on the gear icon on the form element.

4. Click on "Form" element advance settings. Configure options like Autoresponder, Connect here, Input Type, and Form Action.

Autoresponder - Select the method to collect leads using the form.

Standard Integration: https://help.flexifunnels.com/support/solutions/articles/36000318553-autoresponder-standard-integration
 
Parse code integration: https://help.flexifunnels.com/support/solutions/articles/36000318554-autoresponder-custom-form-parse-code

Connect here - Select your autoresponder account or Digital assets connected in the Flexifunnels settings to collect leads & send assets to the collected emails.

Add custom Field : Please check this article on how to add custom fields and there usescases
https://help.flexifunnels.com/en/support/solutions/articles/36000482599-different-custom-field-types-in-form-elements-and-there-use-cases-

Input Type - Add fields to your FlexiFunnels Form using the Input Settings. Select the input type and click on add to add that field in the FlexiFunels Form.

Form Action 

On submit go to URL - after submitting the user will be redirected to the  Url placed here.

On submit Message  - after submitting the user will be shown a message above the form.

Know how to collect leads using Forms in detail here:-

Standard Integration method - 

Custom Form details - 

Want to Know-How to collect leads in Detail?  Please check this article -https://help.flexifunnels.com/support/solutions/articles/36000308295 



FORM ELEMENT STYLE SETTINGS


Click on the gear settings to open the settings of the form.

Click on style settings and then click on Form settings to open the style settings of the Form.

Style Settings includes: Form settings, Background, spacing ,sizing and effects.

Form settings are further divided into three parts - Input, Label, and Button.


Input 

From input settings, you will be able to change the Input Fields Settings and Placeholder settings.


Input Distance - You can change the Distance between the Input fields in the form using this setting.

Background Color - You can change the background color of the Input field using this setting.

Input & Placeholder Color - You can change the Placeholder color used inside the input field using this setting.

Text Align - You can align the Placeholder text inside input fields using this setting.

Font - You can change the font of the placeholder text using this setting.

Weight - You can change the font weight of the Placeholder text to normal, bold, ultrabold, etc using this setting.

Size - You can change the size of the input field using this setting.

Border Radius - You can change the border radius of the input fields using this setting.

Border Width - You can change the border width of the border used in input fields using this setting.

Border Color - You can change the border color of the border used in input fields using this setting.

Label

From Label settings, you will be able to change the Label Settings of a Form.



Label color - You can change the Label color using this setting.

Text Alignment - You can align the Label text above input fields using this setting.

Font Family - You can change the font of the label using this setting.

Font Weight - You can change the font weight of the label to normal, bold, ultrabold, etc using this setting.

Font Style - You can change the font style to italic and normal of the label using this setting.

Font Size - You can change the size of the label font using this setting.

Letter Spacing - You can change the spacing between the label letters using this setting.

Capitalization - You can Select the Capitalization format of the label from the options like uppercase, lowercase, and Capitalize.

Button

From Button settings, you will be able to change all the required button style settings.

The button settings is further divided into three settings.





Button Text

Button  Themes - 

After Clicking one can select from 20+ premade themes. 

Button Text  - Button Text is the Primary text in the button and Subtext is shown below the Primary text in the button.

Font family - Change the font family of the selected text element.

Font weight - Change the font weight. for example - bold, normal, and Light.

Font Style - You can change the font style to italic and normal the button text using this setting.

Text size - Change the size of the button text.

Height  - Change the Height of the button using this setting.

Text align- change the text alignment to left, right, and center. 

Text Color - change the color of the Button text element.

Capitalization - You can Select the Capitalization format of the button text from the options like uppercase, lowercase, and Capitalize. 

Button Color - You can change the background color of the button using this setting.