1. Home
  2. Docs
  3. Form Elements
  4. Fluent Form

Fluent Form EA Element

Fluent Form EA Element is an ultimate Drag & Drop Form Builder for Elementor which lets you create amazing Contact Forms in a few minutes. By creating attractive form layouts, you would be able to encourage more users to leave their feedback and increase site engagement in the process. Here in this tutorial, you’re going to learn how to use the Fluent Form element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Fluent Form Element

»Content

 

Fluent Form

⇒Fluent Form: Select a contact form you’ve created by using the Fluent Form plugin to embed within the Elementor page.

After selecting a valid contact form, your form will appear on the screen. You can now customize the design and edit the form info.

⇒Custom Title & Description: Enable/disable custom title & description in your form. If enabled, then add your custom title and description.

⇒Labels: Show/hide the labels on the form.

⇒Placeholder: Show/hide the placeholder on the form’s fields.

 

Errors

⇒Error Messages: Show/hide the error messages on the fluent form.

 

Unable To Use or Found Bugs?

⇒Need Support: Are you in need of a feature that’s not available in our plugin or got some bugs? Feel free to do a Support request.

 


»Style

 

Form Container

⇒Form Background Color: Add a custom background color to the form container and control the opacity.

⇒Color: Add a custom color to the form container and control the opacity.

⇒Form Alignment: Customize the form alignment on the page either left, right or center. You can select it as default as well.

⇒Form Max Width: Set the max-width of the form container for different dimensions.

⇒Form Padding: Padding is the space between the edge of the form container and the content inside it. Adjust the padding using pixels, em or %.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the form container for different dimensions.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the form for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Labels

⇒Text Color: Select text color and opacity for the labels.

⇒Typography: Set the typography options for the label texts.

 

Input & Text Area

⇒Alignment: Customize the alignment of the input and text area for different dimensions.

⇒Background Color: Add a custom background color to the input and text area for both normal and hover view.

⇒Text Color: Add a custom text color to the input and text area texts for both normal and hover view.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the input and text area for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Increasing the border-radius will add circular corners to the border around the input and text area. You can adjust the border-radius in pixels, % or em.

⇒Text Indent: Customize the text-indent manually for different dimensions.

⇒Input Width: Set the input width for different dimensions.

⇒Input Height: Set the input height for different dimensions.

⇒Text Area Width: Set the text area width for different dimensions.

⇒Text Area Height: Set the text area height for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the input and text area for different dimensions. You can link the values together or customize them individually.

⇒Spacing: Generate some spaces between input fields in the form manually for different dimensions.

⇒Typography: Set the typography options for the input and text area texts.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Placeholder

⇒Text Color: Select text color and opacity for the placeholder text.

 

Radio & Checkbox

⇒Custom Styles: Enable/disable custom styles. If enabled, then customize the radio and checkbox styles.

 

Section Break Style

⇒Label:

→Color: Add a custom color to the label text and customize the opacity.

→Typography: Set the typography options for the label text of the section break.

→Padding: Set the padding value for the top, right, bottom and left around the label for different dimensions. You can link the values together or customize them individually.

→Margin: Set the margin value of the label for different dimensions. You can link the values together or customize them individually

⇒Description:

→Color: Add a custom color to the description text and customize the opacity.

→Typography: Set the typography options for the description text of the section break.

→Padding: Set the padding value for the top, right, bottom and left around the description for different dimensions. You can link the values together or customize them individually.

→Margin: Set the margin value of the description for different dimensions. You can link the values together or customize them individually

→Alignment: Customize the alignment of the description for different dimensions.

 

Checkbox Grid Style

⇒Grid Table Head:

→Background Color: Add a custom background color to the grid table head and control the opacity.

→Color: Add a custom color to the grid table head and customize the opacity.

→Typography: Set the typography options for the grid table head of the checkbox grid.

→Height: Customize the height of the grid table head for different dimensions.

→Padding: Set the padding value for the top, right, bottom and left around the grid table head for different dimensions. You can link the values together or customize them individually.

⇒Grid Table Item:

→Color: Add a custom color to the grid table item and customize the opacity.

→Background Color: Add a custom background color to the grid table item and control the opacity.

→Odd Item Background Color: Add a custom background color to the odd item of the grid table and control the opacity.

→Typography: Set the typography options for the grid table item texts.

→Height: Customize the height of the grid table item for different dimensions.

→Padding: Set the padding value for the top, right, bottom and left around the grid table item for different dimensions. You can link the values together or customize them individually.

 

Address Line Style

⇒Label Color: Select text color and opacity for the address line labels.

⇒Typography: Set the typography options for the address line texts.

 

Submit Button

⇒Width: Set the width either as full width or set your custom width of the submit button.

⇒Background Color: Add a custom background color to the submit button for both normal and hover view.

⇒Text Color: Add a custom text color to the submit button for both normal and hover view.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the submit button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Increasing the border-radius will add circular corners to the border around the submit button. You can adjust the border-radius in pixels, % or em.

⇒Padding: Set the padding value for the top, right, bottom and left around the submit button for different dimensions. You can link the values together or customize them individually.

⇒Margin Top: Set the top margin of the submit button manually for different dimensions.

⇒Typography: Set the typography options for the submit button texts.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Success Message

⇒Background Color: Add a custom background color to the success message on the form after login completion.

⇒Text Color: Add a custom text color to the success message text on the form after login completion.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the success message for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Typography: Set the typography options for the success message text.

 

Errors

Error Message:

⇒Color: Add a custom color to the error message text and customize the opacity.

⇒Typography: Set the typography options for the error message text.

⇒Padding: Set the padding value for the top, right, bottom and left around the error message for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value of the error message for different dimensions. You can link the values together or customize them individually

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Fluent Form Element.


Was this article helpful to you? Yes No

How can we help?