Gravity Form is a 3rd party plugin. We’ve just integrated the plugin titled Gravity Form Widget. The plugin offers fields that are super perfect to build the form ranging from blogging site to e-commerce site.
In the doc below, I’ll show you how to use the widget. So, let’s dive into details.
Step-1: Since Gravity Forms is a third-party plugin, you first have to install and activate the plugin.
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 ).
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 screen-shot above.
Step-3: Go to Element Pack > 3rd Party Widgets> Gravity Forms> hit the activate button > click on the Save Settings button.
Gravity Form Widget: A way of presenting web form
The step by step instructions and detailed pictures are here to help you get started.
To Insert Widget
Inserting widget, it is just a matter of dragging and dropping. As you see in the screenshot above.
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.
In the Step-2, I’ve shown how to make a form using the Gravity Form Plugin.
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 attribute.
Now, let’s work with Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you require to design.
Styling with the Style tab in Elementor will always give you a fantastic experience.
Let’s have a look.
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.
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 content, just you’ve to use scroll bar.
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.
If you add section field from the Gravity Form dashboard, then you’ll be able to style here. See the image example.
If your form includes any price item, you’ll be able to style the price item. See the image above.
In this section, you might set placeholder text color. Look at the image example.
Radio & Checkbox
From this section, you can easily style Radio & Checkbox.
In general, this section will allow you to adjust alignment and width of the button. Moreover, you can set width type (Custom/ Full Width).
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.
Simply, go to the Style tab > Submit Button > Normal.
Just go the Style tab > Submit Button > Hover.
This section is for if the Form shows any error messages.
In case, you feel, you need to make the input field full-width. You can do that from here.
In conclusion, though while using the Gravity Form widget by Element Pack, 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.