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

Gravity Form EA Element

Gravity Forms is one of the most popular plugins for building contact forms on a WordPress website. It offers seamless customization, and you can add loads of functionality to your forms with this plugin. With our Gravity Form EA Element, you can easily embed your favorite Form within the webpage. Here in this tutorial, you’re going to learn how to use the Gravity 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 Gravity Form Element

»Content

 

Gravity Forms

⇒Select Form: Select a gravity form you’ve created by using the Gravity 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.

⇒Title: Show/hide the title on the form

⇒Description: Show/hide the description of the form.

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

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

⇒Use Ajax: Use Ajax to submit the form

 

Errors

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

⇒Validation Errors: Show/hide the validation error messages on the gravity 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.

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

⇒Form Width: Set the form width for different dimensions.

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

⇒Form Margin: Margin is the space between the content and the container. Adjust the margins for all sides or individually using pixels, em or %.

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

 

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.

⇒Description:

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

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

 

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.

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

⇒Spacing Right: Generate some spaces on the right side of the form manually 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.

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

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

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

 

Section Field

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

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

⇒Border Type: Select a border type from the list according to your preference. And then set the border height of the section field for different dimensions. You can link the values together or customize them individually.

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

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

 

Price

⇒Price Label Color: Select price label color and control the opacity for the price on the form.

⇒Price Color: Select price color and control the opacity on the form.

 

Placeholder

⇒Text Color: Select text color and control the 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.

 

Errors

⇒Error Message:

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

⇒Validation Errors:

→Error Description Color: Add a custom color to the validation error description background and customize the opacity.

→Error Border Color: Add a custom color to the validation error border and customize the opacity.

→Error Field Background Color: Add a custom color to the validation error field background and customize the opacity.

→Error Field Label Color: Add a custom color to the validation error field label and customize the opacity.

→Error Field Input Border Color: Add a custom color to the validation error field input border and customize the opacity.

: Customize the width of the error field input border.

 

Thank You Message

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

 


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


Was this article helpful to you? Yes No

How can we help?