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

WeForm EA Element

EA WeForms allows you to design the layout for WeForms forms you have created. With this element, you can easily override the default styling for WeForms . You will be able to easily engage with your visitors by making the form attractive through this element. Here in this tutorial, you’re going to learn how to use the WeForm 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 WeForm Element

»Content

 

WeForm

⇒Select Form: From this section, you can pick the form which you want to use and style. Simply just use the drop-down menu and choose your preferred 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 Styles

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

 

Form Fields Styles

⇒Input Field Background: Add a custom background color to the input form fields.

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

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

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

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

⇒Border Radius: Set the border radius for the top, right, bottom and left around the form fields 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 field 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.

⇒Focus State Style:

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.

→Border Color: Add a custom color to the border of the focus state style.

 

Color & Typography

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

⇒Field Font Color: Customize the color and opacity for the field font.

⇒Placeholder Font Color: Customize the color and opacity for the form’s placeholder font.

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

⇒Input Fields Typography: Set the typography options for the input field’s texts.

 

Submit Button Styles

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

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

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

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

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

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

⇒Background Color: Add a custom background 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 for both normal and hover view.

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

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

 


»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 WeForm Element.


Was this article helpful to you? Yes No

How can we help?