How to Style Gravity Forms with Elementor for Free [Step-by-Step]

Table of Contents

Do you want to style Gravity Forms using Elementor for free?

Gravity Forms is one of the most popular plugins for building contact forms on a WordPress website. It offers seamless customization, and this plugin can add functionality to your forms.

Here, we will see how you can create and customize a contact form for Gravity Forms with Elementor.

Required WordPress Plugins

  1. Elementor Plugin: For customization of the form using the editor.
  2. PowerPack Lite Addon for Elementor: This is required to integrate & style Gravity forms into the Elementor editor.
  3. Gravity Forms Plugin: And, of course, the Gravity Forms plugin to create the form.

Make sure you have these plugins installed and activated before we go any further.

Style Gravity Forms With Elementor

You can check out the video below if you prefer to watch a video. If not, you can go with the instructions in this blog.

Create a Contact Form using Gravity Forms

Firstly, you will be required to create a form if you have not already created one.

For this, go to your WordPress dashboard and click on Forms >> Add New. Now, create a form like any other with the Gravity Forms builder.

You can add a name, email, phone number, and message text area. This is what usually goes for a typical contact form.

gravity forms elementor

Add your Contact Form to the Live Page

Once you have created your form, we can go to the contact form’s customization part.

Go to your Contact Page or any page where you wish to add the contact form and open it in Elementor editor.

edit gravity forms with elementor

Drag and drop the PowerPack Gravity Forms Styler

Once you are in the editor, drag and drop the Gravity Forms widget on the page; we will begin customizing our contact form made with Elementor.

drag and drop gravity forms styler

Gravity Forms Styler: Content Tab

Now, we need to select a form from the drop-down. Select a form, and it will appear right away in the editor.

You can enable/disable the labels, texts, placeholders, etc., from these options. You can also enable or disable the errors in the forms.

gravity forms elementor

Gravity Forms Styer: Style Tab

The style tab allows you to change the form’s design, look, and appearance. In addition, you can easily customize the text area, labels, radio buttons, checkboxes, and submit buttons from the settings.

Here I will change the input boxes’ width and the text area height. I also redesigned the color scheme of the button to match the layout’s theme.

Since the contact form looked a little compact, I added padding to all the elements with the respective settings.

gravity forms customization elementor

After making all the changes, here is what the final design of the customized Gravity Form looks like:

contact form elementor gravity forms

Next Read: Style WPForms using Elementor

PowerPack Addons for Elementor offers form styler widgets for most of WordPress’s popular contact form builders, including Ninja Forms, WPForms, Fluent Forms, and Formidable Forms.

If you’re looking for an easy tutorial on styling the contact form built using the WPForms form builder plugin, check out our post on how to style WPForms using Elementor.

If you like this widget, you can get it from the WordPress Plugin Repository. However, if you wish to extend the widgets and your editing powers to the next level, you can try our PowerPack Addons for the Elementor Pro version. It comes with 80+ Elementor widgets, which you can use to create more impressive and functional websites with elementor.

Get the PowerPack Pro version here.

What do you think of the Gravity Forms Styler widget? Comment it down below!

If you found this tutorial useful, do share it with others!

Picture of Editorial Team

Editorial Team

Leave a Comment

Get 70+ Elementor Widgets with PowerPack Addons for Elementor

Download PowerPack Free

Subscribe to receive latest updates, announcements, offers, deals & discounts.