Are you looking to embed a Gravity Form on a WordPress page or post?
Gravity Forms is the most well-known and trusted form plugin for WordPress. With a host of impressive features, including a powerful drag and drop interface, Gravity Forms allows you to create beautiful web forms with ease.
In this post, we’ll show you all the different ways to embed Gravity Forms on your website.
Why use Gravity Forms above other WordPress form plugins?
Apart from being one of the oldest and most trusted WordPress form plugins available, there are several other reasons why you should consider using Gravity Forms above other form plugins.
Leaders in accessibility
The term “accessibility” refers to creating websites that are usable by people with physical, visual, or cognitive impairments. Gravity Forms are the leaders in web form accessibility, allowing you to build forms that are WCAG compliant.
Accessible web forms improve the user experience and allow you to reach a larger audience.
Well-supported
As stated previously, Gravity Forms is one of the oldest WordPress form plugins. The plugin is supported by a team of designers and developers that continually work to add new features and improve existing functionality.
Rich features
What are the features of Gravity Forms, you ask? Quite simply, Gravity Forms contains everything you need in a form plugin and more! This includes:
- Integrations with popular third-party applications (including email marketing software, CMS platforms, and more)
- AJAX form submit
- A range of advanced field types
- Email notifications
- Conditional logic
- File uploads
- The ability to import and export forms
💡 Pro tip: To learn more about Gravity Forms and the features it contains, check out our ultimate guide on how to use Gravity Forms.
A wealth of powerful Add-Ons
Gravity Forms is more than just a form plugin, it resides at the core of an entire ecosystem of plugins, add-ons, and developers.
One of the reasons users choose Gravity Forms over other WordPress form plugins is due to its extensive library of both first and third-party add-ons. For example, here at GravityKit, we develop Add-Ons that make is easy to display, import, export and edit Gravity Forms entries.
Using Gravity Forms in WordPress
Are you new to Gravity Forms and wondering how to get started? Here’s how you can integrate Gravity Forms into your WordPress website.
- Download the Gravity Forms plugin
- Upload the Gravity Forms plugin to WordPress
- Install and activate Gravity Forms
- Activate your license key
- Create your first form
- Add the form to your site
After purchasing a license from the Gravity Forms website, head over to your account page and click on the “Downloads” tab at the top. Now click on the “Download” link next to Gravity Forms to download the plugin ZIP file to your computer.
The next step is to upload the plugin file to WordPress. To do this, log in to your WordPress website, hover over “Plugins” and click “Add New”. Now click “Upload Plugin” at the top, then click on “Choose File” and select the plugin file you downloaded previously.
Finally, click “Install Now”. When Gravity Forms has finished installing, click “Activate”. Now that Gravity Forms is active on your website, you’ll need to activate your license key.
You can find your license key in your Gravity Forms account under “Your Licenses”.
Simply copy the key and paste it into the license key box on the Gravity Forms “Settings” page inside WordPress.
After activating your license, you’re ready to create your first form!
To create a new form in Gravity Forms, hover over “Forms” in your sidebar menu and select “New Form”. Now give your new form a name and click “Create Form”.
You can now start constructing your new form using the Gravity Forms drag and drop builder.
Okay, now comes the most important step—embedding the form on your website.
Embedding a Gravity Form using the WordPress block editor
The easiest way to embed Gravity Forms in WordPress is by using the Gravity Forms block. Needless to say, this method will only work for you if your website uses the block editor. If not, you’ll need to use one of the other methods outlined below.
Start off by creating a new page or post or editing an existing one. Now click the ‘+’ icon and search for the “Gravity Forms” block.
After adding the block to your page layout, you’ll need to select the form you want to embed from the dropdown menu.
After choosing the form you want to embed, you’ll see a preview of your form load inside the editor. On the right-hand side, you’ll also see various form settings allowing you to customize the way your form is displayed on the front end. For example, under “Form Settings”, you can enable or disable the form title and description.
Next, select the form style that you want to use. Gravity Forms supports different “themes” allowing you to change the look and feel of your embedded forms on the front end!
Finally, by opening the “Advanced” tab you can turn the form preview on and off and enable or disable AJAX.
When you’ve finished configuring the form settings, save your page/post and open it on the front end.
So what if you’re still using the WordPress Classic Editor? Or what if you want to embed your Gravity Form inside a widget or a custom post type that doesn’t use Gutenberg (the Block Editor)? That’s where the Gravity Forms embed shortcode comes in!
Embed Gravity Forms using a Shortcode
WordPress shortcodes are small bits of code that allow you to display information or create objects that would usually require programming skills.
The Gravity Forms embed shortcode allows you to embed forms anywhere on your website! The shortcode supports several parameters allowing you to customize the look of your form and prepopulate field values dynamically.
A typical shortcode looks like this:
[gravityform id="7" title="false" description="false" ajax="true"]id– Your form IDtitle– allows you to hide or display the form title, eithertrueorfalsedescription– allows you to display or hide the form description, eithertrueorfalseajax– use AJAX to submit the form without reloading the page, eithertrueorfalse
If you’re using the WordPress Classic Editor, you can insert the embed shortcode without having to construct it yourself. To do this, click the “Add Form” button above the text editor.
Now, select your form from the dropdown menu and configure the form settings. When you’re done, click “Insert Form”.
Your shortcode will now automatically be added to your page layout.
Now let’s look at how this process works for different page builders, like Divi, Elementor, or Beaver Builder.
Embedding Gravity Forms in Elementor
You can either manually embed your forms using the Gravity Forms embed shortcode or you can use the Gravity Forms widget that comes with the free “PowerPack Lite” add-on. Learn more about embedding Gravity Forms in Elementor.
Embedding Gravity Forms in the Divi Builder
Once again, you can manually embed forms using the embed shortcode or you can use the Gravity Forms module that comes with the free “WP Tools Gravity Forms Divi Module” plugin. Learn more about embedding Gravity Forms in Divi.
Embedding Gravity Forms in Beaver Builder
Embedding Gravity Forms in Beaver Builder is a matter of pasting the Gravity Forms shortcode into a Text Editor module where you want the form to appear.
Below are some commonly asked questions about embedding Gravity Forms.
How do you format and style Gravity Forms?
If you embed your Gravity Form using the WordPress block, you can style your forms from within the form settings. All you need to do is select “Orbital” as your form theme.
Now, you’ll see several new tabs appear allowing you to style different aspects of your form.
It’s worth pointing out that you can also format and style your Gravity Forms by adding custom CSS to your WordPress theme. If you decide to do this, you may benefit from using Gravity Forms’ CSS ready classes to add pre-configured styles to your form fields!
How do you edit Gravity Forms in WordPress?
Let’s say you’ve built your form and embedded it on a page or post. You can still edit or update your form at any time. First, hover over “Forms” and click “Forms”. Next, hover over the form you want to update and click “Edit”. You’ll be taken to the form editor where you can add/delete fields, update field labels or change your form settings.
Can you embed Gravity Forms outside WordPress?
No. Gravity Forms is a WordPress plugin and, therefore, it is not compatible with other types of websites. Gravity Forms will only work on a WordPress website that meets the following requirements: PHP v5.6+, MySQL v5.5+, and, preferably, the latest version of WordPress itself.
Embed forms on your WordPress site using Gravity Forms
Gravity Forms is a WordPress form plugin that allows you to create high-converting web forms for a variety of use-cases. Not only does Gravity Forms contains a range of impressive features, but it’s also optimized for accessibility.
In this post, we showed you several ways to embed Gravity Forms on your pages or posts, including using the Gravity Forms embed shortcode and Gutenberg block. If you found this post helpful, be sure to check out more content on our blog!
Helpful tips right in your inbox.
Subscribe to our biweekly newsletter for tips, special offers, and more!
Helpful tips right in your inbox.
Subscribe to our biweekly newsletter for tips, special offers, and more!
