1. Home
  2. Docs
  3. Xpro Elementor Addons
  4. Free Elementor Widgets
  5. Contact Form 7

Contact Form 7

Xpro Contact Form 7 Widget for Elementor

Xpro Elementor Addons provide over 50 free widgets that are powerful enough to assist you in creating a fantastic website. Contact Form 7 widget for Elementor is another amazing free widget from Xpro. This widget, unlike the other Xpro Contact Forms widget, allows you to add a form via a third-party plugin. Contact Form 7 is a third-party plugin that its user can use to construct a WordPress contact form and include it in their website.

Contact Form 7 widget by Xpro Elementor helps you in customizing the widget that you had created through the third-party plugin. Drag and drop the widget into the Elementor Page Builder after you made and saved it in the WordPress using Contact Form 7 plugin. Personalize fields, style typography, add hover effect, and much more.

All the third-party form widgets by Xpro Elementor are totally free and provide you with all the necessary options to create an appealing form.

How to Install Contact Form 7 Widget for Elementor


You need to install and activate the Free version by Xpro Elementor Addons. If you already have the plugin installed, just make sure the Contact Form 7 Widget is ‘Enabled’, so you can find it in the Elementor editor.

To enable the widget, simply follow these steps:

Step 1

Click on the Xpro Addons option available on the WordPress Dashboard Menu.

Step 2

From the Xpro Addons Dashboard, click on the Widgets Tab, find the Contact Form 7 widget, and finally, toggle the button ON to enable it.

How to Use Xpro Contact Form 7 Widget for Elementor

Install and activate the third-party plugin, Contact Form 7, in your WordPress dashboard. Create a form using Contact Form 7. Customize the form display by Xpro Elementor by simply dragging and dropping the widget to the Elementor page builder. Personalize the design for fields, labels, hover effects, and much more. Let’s further discuss how can you utilize this widget.

Step 1

Click on the Xpro Addons section available in the Elementor Editor.

Step 2

From the Xpro Addons section, find the Contact Form 7 widget, and simply drag’n’drop it to your desired page location.

This is the default view of the widget after you select and drag it into the screen.

How To Add a Form to the Widget

Click on “Select Your Form” to select a form that you have created and saved using Contact Form 7.

How to Style Xpro Contact Form 7 widget for Elementor

Personalize the typeface of the text that users will write in the field. Modify the font, size, spacing, and general look of the text from the typography menu.

You can adjust the width of the fields and if you include a placeholder then you can adjust its color as well. You can also change the color of the text and background of the normal field, as well as the color that appears when the user inputs text in the fields.

You can also create a border for the fields by selecting the border type. There are five diverse kinds of borders to pick from. There are several border styles to choose from, including solid, dashed, grooved, dotted, and double. Change the border’s color, width, and radius as well.

How to Style Label in Xpro Contact Form Widget

Style the label by changing the typography of the label text. Color the text and if you have included the required field that a user must enter, you can color the required symbol as well. Adjust the padding and margin of the label to fields.

How to Style the Button in Xpro Contact Form 7 Widget

Customize the button by changing its typography and width. Color the text and background for the button for normal and hover states.

To add a border to the button, select the border type. Change its width, radius, and color. You may also add a shadow from the shadow box and control its position and blurriness.

Best Contact Form 7 widget for Elementor

This was all from our Elementor Contact Form 7 widget by Xpro. We hope you completely understand the functionality and feature usage of this amazing Xpro Elementor widget. Make full use of this widget to create a beautiful form and gather more visitors. Check our Contact Form for Elementor that does not require any third-party plugin to create a contact form.

Xpro Elementor Addons offer a wide range of widgets, Elementor theme builder, and templates that help designers develop an attractive site. Check our 50+ free Elementor addons which are enough to create a professional WordPress website.

How can we help?