How to use WP Forms widget

How to use WP Forms widget

The WP Forms widget is a versatile form builder tool for Elementor. It’s one of the many important form builders we use inside our website every day.

This is a 3rd party widget in Element Pack and was integrated to provide for our consumers. Let’s see how you can use it.

Configuring WP Forms

Step-1

First, go to Dashboard> Element Pack> 3rd Party Widgets> and find the Wp Forms widget. Click on the download icon to install it.

Note: WP Forms is a Freemium tool, both the Lite & Pro version works with Elementor.

Step-2

After installing, you will find the WPForms option inside your dashboard. Go inside and click on the Add New button to create a new form.

Step-3

You will be redirected to a new window where you will see form settings on the left side and layout options in the middle. Give a name to your form and select custom (Blank Form) or pre-made forms (Contact form, signup form).

Step-4

Once the selection is done, on the next tab, you can add or remove items manually. Each item is designed as boxes. Just drag it inside the form building area to implement.

Step-5

In the next section, you can add CSS style or change the messages for complete submission.

Additionally, you can add Marketing and Payments options on the form. Just keep in mind that these options will only work on the Pro version.

Inserting widget

Go to the Elementor page editor’s widget menu and search for the WP Forms widget. Then drag it inside the page.

Difference between WP Forms Global & Element Pack version

Element Pack boosts its name due to the feature that enables any non-customizable widget to become customizable.

That’s right!

Any widget under Element Pack is loaded with a ton of customizations. The WP Forms widget isn’t an exception.

Original WP Forms widget

Just the form selecting option and Advanced option for the page.

WP Forms EP version

Form selection option, Style tab for customizations, and the Advanced option.

Content tab

On the Content tab, you get the Layout section where you need to select your form.

Here, we selected the form we just made from the dashboard.

Style tab

Now, this part is for customizing the form’s appearance. You can change a number of aspects starting from colors to borders.

It’s divided into six sections. Each one for different items of the content area.

Label

Go to Style> Label

Change color and typography of the labels on your form.

Sub label

Go to Style> Sub Label

Color and typography options for the sub-labels.

Input

Go to Style> Input

In this section, you can change the color of the input text as well as input fields. The field’s width and spacing are also customizable. You may add paddings or border-radius as well.

Submit Button

Go to Style> Submit Button

This section is for customizing the submit button. You can set its color for both active and hover modes. Set border-radius and padding to change its overall shape.

Error

Go to Style> Error

Customize the color and typography of the error message upon invalid form submission.

Additional Option

Go to Style> Additional Option

Lastly, you can create a full-width submit button on the form.

That’s it!

Your form is now ready.

Conclusion

If you are still stuck, please watch this quick video on the WP Forms widget. Visit the demo page for more examples.



A first-ever all-in-one web solution with essential widget, extensions, and features for Elementor WordPress.

Your complete web development partner.

Contact

Copyright © 2022 BdThemes.
All Rights Reserved. Site built with Element Pack & Rooten Theme.

AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy Element Pack Pro?

Don’t miss 230+ essential Elementor widgets and 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.