Are you one of the 5,000,000 professionals who use Elementor as their preferred WordPress page builder?
If you are, you’re in luck! In this post, we’re going to show you how to add Gravity Forms to your pages using the Elementor visual builder.
Inside the Elementor builder, you can drag and drop different widgets onto your page and style them accordingly. There is currently no direct integration with Gravity Forms, but there are two easy ways to add Gravity Forms to Elementor and we’re going to explore both of them below. We’ll also show you how to style your forms in Elementor without having to write a single line of code.
Here’s what we’re going to cover in this post:
- What Is Elementor?
- Creating a New Form in Gravity Forms
- Adding a Gravity Forms Widget to Elementor
- Styling Gravity Forms in Elementor
- Embedding a Gravity Form in Elementor Using a Shortcode
- Gravity Forms in Elementor: Final Thoughts
Ready? Let’s get to it!
What Is Elementor?
Elementor is one of the most popular visual page builders for WordPress along with Divi Builder. Elementor is a WordPress plugin designed to be an all-in-one solution for website construction and styling.
Using Elementor you can build new web pages quickly and efficiently. The basic version of Elementor is available for free on WordPress.org and there are more advanced packages available on the Elementor website.
Creating a New Form in Gravity Forms
Let’s start by creating a new form in Gravity Forms. If you already have a form set up, you can skip this step.
First, hover over Forms in the left-hand menu and click New Form. After giving your form a name, you can use the Gravity Forms drag and drop editor to add different fields to your form.
In this example, we’ll create a basic contact form with the following fields:
- Name (Name field)
- Email (Email field)
- Phone (Phone field)
- Reason for Contacting Us (Single Line Text field)
- Website (Website field)
- Message (Paragraph Text field)
When you’re done building your form, click the Update button in the top right corner.
Now that your form is complete, you can use Elementor to add it to a page on your website.
Adding a Gravity Forms Widget to Elementor
Elementor comes with several widgets that allow you to add different elements to your pages. This includes image galleries, icons, Google Maps, and much more.
Although Elementor does not support a “Gravity Forms” widget, it’s easy to add one with the help of a plugin.
Elementor PowerPack Add-On
The PowerPack for Elementor add-on is a plugin that extends Elementor by adding a further 70 widgets to the page builder, including a Gravity Forms widget!
The Gravity Forms widget is also part of PowerPack Lite, which is completely free.
From inside your WordPress dashboard, Hover over Plugins, click Add New and then search for “PowerPack”.
After installing and activating the plugin, you’ll have access to 30 new widgets inside the Elementor page builder.
Adding a Gravity Forms Widget to Your Page in Elementor
Now that you have installed and activated the PowerPack Lite add-on, you can add a Gravity Forms widget to your page in Elementor.
Hover over Pages and click Add New to create a new page. Give your page a name and then click the button that says “Edit with Elementor”.
This will launch the Elementor visual page builder. Now, under Elements, search for “Gravity Forms”.
Drag and drop the Gravity Forms widget onto your page and choose your form from the dropdown menu. After this, you should see a preview of your form appear inside the page editor.
Under the dropdown menu, you’ll see further options for customizing your form. You can add a custom title/description, enable AJAX, and more.
That’s it! After you’ve configured your form, you can start styling it from inside the Elementor editor.
Gravity Forms in Elementor: Styling Your Form
The Gravity Forms Elementor widget also allows you to style your forms from inside the Elementor visual editor.
To start styling your form, click on the Style tab to bring up the style options.
You’ll now see several sub tabs that allow you to style the different aspects of your form, without having to write a single line of code.
When you’re finished styling your form, click Publish to save your changes.
Embedding a Gravity Form in Elementor Using a Shortcode
If you want to add a Gravity Form to Elementor without installing a third-party plugin, you can do so using a shortcode.
All you need to do is create a Gravity Forms embed shortcode and paste it into an Elementor Shortcode widget.
To create an embed shortcode for your form in Gravity Forms, you need your form ID. To find this, hover over Forms and click Forms. You’ll see the ID of your form in the column to the right.
A basic Gravity Forms shortcode requires the following parameters:
id(The id of the form you want to embed)
title(Whether or not to display the form title, either true or false)
description(Whether or not to display the form description, either true or false)
ajax(Whether or not to use AJAX when submitting the form, either true or false)
Here’s what the finished shortcode looks like:
[gravityform id="9" title="true" description="true" ajax="true"]
The next step is to copy and paste your shortcode into an Elementor Shortcode widget.
Adding Your Shortcode to an Elementor Shortcode Widget
Create a new page or edit an existing page with Elementor. Next, search for “Shortcode” in the search bar at the top and drag and drop a Shortcode widget onto your page.
Next, paste your Gravity Forms shortcode into the shortcode box. You should now see a preview of your form load in the visual editor.
If you add your form to Elementor using a shortcode, you won’t be able to style it from inside the Elementor editor. Instead, you’ll have to write your own, custom CSS code.
Gravity Forms in Elementor: Final Thoughts
Elementor is one of the most popular visual page builders for WordPress. Although Elementor doesn’t integrate directly with Gravity Forms, you can use the PowerPack Lite plugin to add a Gravity Forms Elementor widget to your website.
The widget also gives you the ability to style your forms from inside the visual editor. This means you can create beautiful forms without having to write a single line of code.
If you don’t want to add another plugin to your website, you can embed your Gravity Forms forms inside Elementor using a shortcode. This is easy to do using the Elementor Shortcode widget.
To learn more about how Gravity Forms works with different plugins, read How to Use Gravity Forms: The Ultimate Guide
Join Our Newsletter!📧🙌
✔️ New blog posts straight to your inbox
✔️ Be the first to hear about new updates and releases