Table Of Contents

How to Use Elementor Gravity Forms Widget

Gravity Form is a 3rd party plugin. We’ve just integrated the plugin titled Elementor Gravity Forms Widget. The plugin offers fields that are super perfect to build the form ranging from blogging sites to e-commerce sites.

In the doc below, I’ll show you how to use the widget. So, let’s dive into details.

Gravity Forms

Step-1: Since Gravity Forms is a third-party plugin, you first have to install and activate the plugin.

installing the Elementor Gravity Forms widget

So, go to Dashboard > Element Pack > 3rd Party Widgets > Gravity Forms.

Step-2: Next, go to the Gravity Forms> Add Form (choose Form, from the templates included ).

gravityFormWidget 2 - BdThemes

You’ll be asked to give the Form name. Importantly, you can create your own drag and drop form from the dashboard of the Gravity_Form. Drag and drop fields from the Standard Fields. As you can see in the screenshot above.

Step-3: Go to Element Pack > 3rd Party Widgets> Gravity Forms> hit the activate button > click on the Save Settings button.

gravityFormWidget 3 - BdThemes


Gravity Form Widget: A way of presenting web form

The step-by-step instructions and detailed pictures are here to help you get started with the Elementor Gravity Forms widget.

To Insert Widget

Inserting the Elementor Gravity Forms widget

Inserting widget, it is just a matter of dragging and dropping. As you see in the screenshot above, drag the WordPress forms inside your page.

Content Tab

The Content Tab having some handy sections will successfully get you to have a structure of the Gravity Forms widget.

Now, I’m going to show the sections of the Content Tab and how they work behind the widget.

Layout

In the Step-2, I’ve shown how to make a form using the Gravity Form Plugin.

gravityFormWidget 5 - BdThemes

Simply, go to the Content tab > Layout > Select Form.

Also, in the section, you’ll find switcher buttons(Title, Description, Use Ajax) that will help you to manage the form content.

One more thing, Custom Attributes will let you add attributes to the Elementor Gravity Forms widget.


Style Tab

Now, let’s work with the Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you require to design the gravity_form. 

Styling with the Style tab in Elementor will always give you a fantastic experience.

Let’s have a look.

Label

gravityFormWidget style 1 - BdThemes

Go to the Style tab > Label.

Here, from this section, you’ll be able to style(like adding padding, margin, and typography) the Label of the form. See the screenshot above.

Input Fields

gravityFormWidget style 2 - BdThemes

Just, go to the Style tab > Input Fields.

In this section both in Normal and Focus mode, you can add Background color, Border, and Box-shadow.

In general, you can adjust the content, just you’ve to use the scroll bar for the Gravity forms widget.

Field Description

gravityFormWidget style 3 - BdThemes

When you’re going to style the field description, you should set the description text. And for that, you need to go to Gravity form dashboard.

Section Field

gravityFormWidget style 4 - BdThemes

If you add section field from the Gravity Form dashboard, then you’ll be able to style here. See the image example.

Price

gravityFormWidget style 10 - BdThemes

If your form includes any price item, you’ll be able to style the price item. See the image above.

Placeholder

gravityFormWidget style 5 - BdThemes

In this section, you might set placeholder text color. Look at the image example.

Radio & Checkbox

gravityFormWidget style 9 - BdThemes

From this section, you can easily style Radio & Checkbox.

Submit Button

In general, this section will allow you to adjust alignment and width of the button. Moreover, you can set width type (Custom/ Full Width).

gravityFormWidget style 6 - BdThemes

Look at the modes (Normal and Hover). In both mode, you can add background color, text color, border type, border color, border-radius, etc. Just see the image above.

Normal:

gravityFormWidget style 7 - BdThemes

Simply, go to the Style tab > Submit Button > Normal.

Hover:

gravityFormWidget style 8 - BdThemes

Just go the Style tab > Submit Button > Hover.

Errors

gravityFormWidget style 11 - BdThemes

This section is for if the Form shows any error messages.

Additional Option

gravityFormWidget style 12 - BdThemes

In case, you feel, you need to make the input field full-width. You can do that from here.

Video Assist

In conclusion, though while using the Elementor Gravity Form widget by Bdthemes, we need to perform some tricky parts, hopefully, in the end, you have got the solution. You can stream the video clip above. And to get more ideas about this, visit the demo page.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 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.