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

Caldera Form EA Element

Element Addons provides Caldera form integration support for the Elementor page builder. You can customize and design a Caldera Form you wish to embed on your website via this widget. You can add stylish fields, buttons, radio buttons, etc. along with stylish error notes. Here in this tutorial, you’re going to learn how to use the Caldera 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 Caldera Form Element

 

»Content

 

Caldera Forms

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

After selecting a valid caldera 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 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

 

Title & Description

⇒Alignment: Customize the alignment of the title and description for different dimensions.

⇒Title:

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

→Typography: Set the typography options for the title text.

→Margin: Set the top and bottom margin of the title text for different dimensions. You can link the values together or customize them individually

⇒Description:

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

→Typography: Set the typography options for the description text.

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

 

Form Container

⇒Form Background Color: Add a custom background color to the form container for both normal and hover view.

⇒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.

 

Field Description

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

⇒Typography: Set the typography options for the field description texts.

⇒Spacing: Generate some spaces between the field description in the form manually for different dimensions.

 

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.

 

Submit Button

⇒Alignment: Customize the alignment of the submit button for different dimensions.

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

⇒Width: Manually set the submit button width for different dimensions.

⇒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.

⇒Error Fields:

→Label Color: Add a custom color to the error labels and customize the opacity.

→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 error message field for different dimensions. You can link the values together or customize them individually.

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

 


»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 Caldera Form Element.


Was this article helpful to you? Yes No

How can we help?