WordPress popups: Get started with the Gravity Forms Popup Add-On

Ever wished that you could access a built-in feature to display your forms in different types of popups?

While Gravity Forms has always been easy to integrate with third-party popup plugins, the new Gravity Forms Popups Add-On now gives you a built-in way to display your forms in four different types of popups, complete with plenty of trigger and targeting rules.

In this post, we’ll introduce you to how the add-on works in more detail.

Then, we’ll show you step-by-step how to set it up and start creating your own form-embedded popups on your site.

Note: The Gravity Forms Popups Add-On is part of Gravity Labs — our home for experimental add-ons. It’s free with your Gravity Forms license, but it’s experimental and outside our official support. Labs is also how we learn what our community wants to see in the product, so if you try it, let us know what you think.

Why use the Gravity Forms Popup Add-On?

With the Gravity Forms Popups Add-On, you can display any form on your site in a few different kinds of popups, including the following:

• Popup (modal)
• Corner widget
• Banner
• Fullscreen 

You also get plenty of design and behavior settings to control the experience for each popup.

In addition to supporting different types of popups, the add-on also offers all of the targeting and trigger rules that you’d expect from a popup tool.

To trigger the popup, you can choose from six different trigger types:

• Button click (based on a CSS selector, which allows you to make any element the trigger)
• Exit intent
• Time on page
• Scroll depth
• URL hash (clicking a URL with a certain hash)
• JavaScript API

You can also set up one or more targeting rules to control where/to whom the popup should display. You can group multiple conditions together and set up as many targeting groups as needed:

• Specific posts/pages
• Content type
• Post type
• Taxonomy term
• User role
• User logged in status

Accessing this functionality from inside Gravity Forms eliminates the need to use third-party popup plugins just for your forms. This can…

• Reduce the complexity of your tech stack and avoid compatibility issues.
• Potentially save you money, if your alternative was to purchase a premium popup plugin.
• Just generally make it easier to manage your forms’ popups.

How to display Gravity Forms in popups

Now, let’s get into the full step-by-step guide on how you can display the forms that you create with Gravity Forms in flexible popups.

Below, we’ll take you through every step in the process. Let’s dig in…

1. Install the Gravity Forms Popups Add-On

To get started, you need to install the Gravity Forms Popups Add-On on the site where you’re using Gravity Forms.

As we mentioned above, the Popups Add-On is part of Gravity Labs. While these add-ons are free with any Gravity Forms license, they sit outside the normal suite of Gravity Forms add-ons.

First, you need to download the add-on from the Gravity Labs website:

1. Go to the Popups Add-On page at Gravity Labs.
2. Log in to your existing Gravity Forms account on Gravity Labs, if you haven’t done so already.
3. Click Download.

This will download the add-on’s ZIP file to your local computer. You can then upload and install it like any other WordPress plugin:

1. Go to Plugins → Add Plugin in your WordPress dashboard.
2. Click the Upload Plugin button.
3. Select the ZIP file and click Install Now.
4. On the next screen, make sure to activate the plugin.

2. Create the form that you want to display in a popup

If you haven’t already done so, you’ll now want to create the actual form that you want to display in a popup.

You can create the form just like you normally would – there aren’t any special settings that you need to configure inside the form editor interface.

With that being said, because the form will display inside a popup, you should try to keep it as short as possible. For longer forms, you can divide it into multiple pages – the multi-page layout will still work in the popup.

For our example, we just created a simple email opt-in form using the pre-made Newsletter Signup Form template. However, you can embed any type of form in the popup.

3. Create a new popup for your form

Once you’ve set up your form, you can create a popup for your form by going to Forms → Popups in your WordPress dashboard.

Then, click Add New to create your first popup.

Now, you’ll be in the interface to configure your popup.

At the top, you need to make three important choices:

• Name – Give your popup an internal name to help you remember it.
• Form to Display – Use the drop-down to choose which form you want to display in the popup. The drop-down will include all of the active forms on your site.
• Active – Choose whether or not to activate the popup. If you just want to set it up but you don’t want it to display on your site yet, you can turn off the toggle for now.

Below those options, you’ll see additional settings for your popup divided into four different tabs:

1. Trigger
2. Display
3. Behavior
4. Targeting

We’ll cover each tab in subsections below.

Trigger settings

The Trigger settings let you control how to launch the popup. The drop-down lets you choose from six different options:

• Button Click – The popup will display when a user clicks a button, or any other element. You can set this up by adding a CSS selector to the element that you want to trigger the popup.
• Exit Intent – The popup will automatically display when the visitor is getting ready to leave the page.
• Timeout – The popup will display after a certain amount of time has passed. For example, you could display it five seconds after the user opens a targeted page.
• Scroll Depth – The popup will automatically display when the user has scrolled a certain amount, either as a percentage of the page or a certain number of pixels.
• URL Hash – The popup will display when the user clicks a URL with a certain URL hash. For example, you could display the popup when a user clicks a certain link on the page.
• JavaScript API – For more technical users, you can programmatically trigger the popup’s display using JavaScript.

Display settings

The Display settings let you control the design and style of the popup.

One of the most important choices is the Display Mode, which lets you choose from four different types of popups:

• Popup (Modal)
• Corner Widget
• Banner
• Fullscreen 

Based on the type of popup that you choose, you’ll then get a variety of display options that are specific to that display mode.

For example, if you use a modal popup, you can control the size, colors, and other display elements.

Behavior settings

The Behavior settings give you more control over how your popup behaves.

Here are some explanations of some of the most notable settings:

• Respect Dismissal – If you enable this, the popup will not display again for a specific user after that user has dismissed it. You can choose how long it should remain hidden by adjusting the cookie duration.
• Auto-Close on Submission – When enabled, the popup will automatically close if a user submits the form.
• Custom Template – If you want more control over the layout, this lets you create a custom template, including support for Gravity Forms merge tags. You can also include HTML in the template, such as adding a custom heading above the form.
• Custom CSS – This lets you add custom CSS inside the popup iframe.

Targeting settings

The Targeting settings let you define the conditions to control where the popup should display. For example, you can target the popup to specific content on your site, specific types of users, or a mix of both.

To get started, you can add at least one targeting group. You can also create multiple targeting groups if needed.

Each targeting group can contain one or more conditions that must be met in order to display the popup.

You can currently use six different targeting rules, each of which also comes with its own boolean operators – for example, “IS” (only include these pages) or “IS NOT” (exclude these pages):

• Specific posts/pages – Choose individual posts or pages by entering a comma separated list of IDs.
• Content Type – Choose specific types of content, such as the homepage, singular posts, archive pages, etc.
• Post Type – Choose specific post types, such as posts, pages, or any custom post types that you’ve added.
• Taxonomy Term – Choose specific taxonomy terms, such as specific categories, tags, or custom taxonomies that you’ve added.
• User Role – Choose specific user roles, including support for any custom user roles that you’ve added.
• User Logged In – Display the popup based on whether a user is or is not logged in to their WordPress user account.

Again, you can add multiple conditions within a single targeting group. For example, you could only display the popup if the user is logged in AND is viewing a certain post type.

You can also leave the targeting rules empty to display the popup to every user on every page.

And that’s it! Once you’ve made your choices, make sure to click the Save Settings button at the bottom to save your popup.

4. Test your popup

To test your popup, you can open a page that meets your targeting conditions and simulate the trigger that you chose.

Note – If you added targeting rules about a user’s logged-in status or user role, make sure that you meet those conditions as well. For example, if your popup targets users who are not logged in, you would need to open the page in a private browsing window or log out of your WordPress account.

Any form submissions that come from the popup will show up in the normal Gravity Forms entries area (Forms → Entries → Choose your form from the drop-down).

And that’s it!

If you ever want to turn off a popup, you can go to Forms → Popups and click on the toggle to switch between Active and Inactive.

You can also delete popups if you don’t want to use them anymore.

Try the Gravity Forms Popups Add-On today

With the Popups Add-On, you get a Gravity Forms-native solution for displaying any type of form in a popup on your site. While there are existing third-party solutions that can accomplish similar implementations, being able to do everything from Gravity Forms reduces the chances of compatibility issues and can save you from needing to purchase a license for another plugin.

The Popups Add-On is available now in Gravity Labs. It’s free with any Gravity Forms license. As a Labs add-on, it’s experimental and sits outside our standard support — and your feedback helps shape what we build next. If you give it a try, we’d love to hear how it works for you.