1. Home
  2. Docs
  3. Form Elements
  4. Contact Form 7

Contact Form 7 EA Element

Element Addons provides Contact Form 7 integration support for the Elementor page builder. You can customize and design a Contact Form 7 you wish to embed on your website via this widget. Here in this tutorial, you’re going to learn how to use the Contact Form 7 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 Contact Form 7 Element

 

»Content

 

Contact Form 7

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

⇒Form Title: Enable/disable custom title in your form. If enabled, then add your custom title.

⇒Form Description: Enable/disable custom description in your form. If enabled, then add your custom description.

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

 

Errors

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

⇒Validation Errors: Show/hide the validation error messages on the contact form 7.

 

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

⇒Background Type: Select a background type for the form container. You can select a solid background color or a gradient, or select or upload an image via the WordPress Media Library.

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

 

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.

 

Input & Text Area

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

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

⇒Spacing: Generate some spaces between input fields in 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.

⇒Text Area Width: Set the text area width 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.

 

Labels

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

⇒Spacing: Generate some spaces between labels manually for different dimensions.

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

 

Placeholder

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

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

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

 

Radio & Checkbox

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

 

Submit Button

⇒Width: Set the width either as full width or set your custom width of the 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.

 

Errors

⇒Error Message (Alert):

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

→Spacing: Generate some spaces between error messages manually for different dimensions.

⇒Error Message (Fields):

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

→Text Color: Add a custom color to the fields of error message text 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.

 

⇒Validation Errors:

→Background Color: Add a custom color to the validations error message background and customize the opacity.

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

→Typography: Set the typography options for the validation error message text.

→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 validation 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.

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

 


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


Was this article helpful to you? Yes No

How can we help?