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

WP Form EA Element

WP Forms EA Element is one of the best drag & drop form builders. Our widget for Elementor will help you to design a contact form, donation forms, order forms, and other working forms on a WordPress website. You can easily embed an amazing contact form. Here in this tutorial, you’re going to learn how to use the WP 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 WP Form Element

»Content

 

WPForms

⇒Select Your Form: Select a WPform you’ve created by using the WPForm plugin to embed it within the Elementor page.

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

 

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 Fields

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

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

⇒Typography: Set the typography options for the form fields text.

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

⇒Field Placeholder Color: Select text color and opacity for the placeholder text of the form fields.

⇒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 for both normal and hover view.

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

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

 

Form Fields Label

⇒Margin: Set the margin value of the form fields label 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 form fields label for different dimensions. You can link the values together or customize them individually.

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

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

⇒Description Typography: Set the typography options for the description texts of the forms.

⇒Colors: Add a custom color to the form fields label and control the opacity.

 

Submit Button

⇒Button Full Width? Do you want the success button to be full width? Enable or disable button full width here. If enabled, then manually set the submit button width for different dimensions.

⇒Margin: Set the margin value of the submit button 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.

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

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

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

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

 


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


Was this article helpful to you? Yes No

How can we help?