Exit-Intent Opt-in Popup using Gravity Forms
Please note that creating this popup requires our Exit-Intent premium feature.
Utilizing an opt-in form that pops up when a site visitor is about to leave your site can increase conversions by over 300%!
Use this 6-step guide to create an exit-intent opt-in popup using a form built in Gravity Forms.
Step 1: Create Your Gravity Forms’ Form
If you have not already bought Gravity Forms, you will need to purchase any of their plans in order to create a form using their plugin.
If Gravity Forms is not already installed, go to “Plugins” -> “Add New” and upload the zip file you have gotten from the Gravity Forms website. After installing, make sure the plugin is activated.
Next, click on the “Add New” on the “Forms” page or on the “Forms” -> “New Form.”
You can name this form anything that helps you find it in the future. I’ll name it “Exit-intent email opt-in” and leave the description empty. Click “Create Form.”
On the “Edit” tab, drag over any fields you would like in your opt-in form. For a successful opt-in, you should aim for only 1 or 2 fields. Make sure to mark the email field as required.
From here, you can edit the “Settings” for the form and customize the message the visitor sees after submitting the form or any other settings. If you are using Gravity Forms add-ons that integrate with an email marketing platform, such as their ActiveCampaign Add-on or their ConvertKit Add-on, you will also want to adjust those on the “Settings” page too.
Your form is now ready to be added to a popup.
Step 2: Creating Your Popup Content
Let’s create a new popup. To get started, go to the “Add Popup” link in the “Popup Maker” menu. Alternatively, you can click the “Add New Popup” button on the “All Popups” page.
On the new popup page, enter the name for the popup. The name is for internal use only so that you can find the popup in the list of popups. No site visitor will see this name. I will use “Main exit-intent opt-in.”
Then, enter the title, which will be the main headline in the popup. You can leave this blank if you do not need a headline. I will enter “Leaving so soon?”.
Next, enter the content of the popup. For this popup, I will add just a small bit of text and then the form.
Click the “Add Form” button above the content area. In the new popup that appears, select the form you created. Make sure the “Display form title” and “Display form description” are unchecked.
Check the “Enable AJAX” checkbox to allow to form to be submitted dynamically so the visitor does not have to wait until to page reloads.
Click “Insert Form.” Your content is now ready.
Step 3: Adding Triggers and Cookies
Now that we have our content added, it’s time for us to set up our triggers and cookies. The triggers are what causes the popup to open. For this popup, we want to open it automatically when someone is about to leave the site.
First, click the “Add New Trigger” button in the “Targeting” section of the popup settings.
In the popup that opens, choose “Exit Intent” as the trigger. Make sure the “Prevent popup from showing to visitor again using a cookie?” option is checked.
For the “Stop showing popup once visitor takes this action:”, we want to choose “On Popup Open.” This will cause the cookie to be set when the popup opens, ensuring the visitor only sees this once regardless of the action they may take.
On the next screen, you will see a setting to adjust the exit intent trigger. There are a variety of techniques that you can use, which you can read over in our exit intent methods documentation.
For this popup, I recommend using “Mouse Leave,” “Lost Browser Focus,” and “Mobile Scroll.” On the “Advanced” tab, you can fine-tune these settings, if needed. We will keep the defaults there for this popup.
Now that our trigger is set up, we can click the “Add” button.
Our trigger and cookie are now set up!
Step 4: Set Targeting
By default, Popup Maker will open our popup on all pages, posts, products, and everywhere else and to all visitors. To adjust where the popup opens, we use the “Targeting” settings.
Switch to the “Targeting” tab of the popup settings. Click on the “Choose a condition” dropdown.
You can choose from many different conditions, including targeting the home page, only posts, only pages, or specific pages. For this popup, I want it to open almost everywhere. But, we may already have set up another exit-intent popup, such as the one from the cart abandonment popup guide.
So, I am going to select the “Checkout Page” option in the “WooCommerce” section but then click the “!” icon to the left of the condition. This icon makes it to exclude the pages I selected. Now, the popup will open on all pages except the checkout page.
Once selected, new “And” and “Or” options will appear. You can use these to target multiple areas of your website with the same popup. For this popup, I will not use those since I am only excluding visitors on the checkout page.
Step 5: Adjust Display Settings
Now that we have a way for the popup to open (triggers) and we have told the popup what pages to load on (targeting), we can adjust what the popup looks like using the “Display” settings.
Popup Maker provides many granular settings so you can fine-tune your popup. For this popup, we want a simple popup that appears in the middle of the screen.
Now, go to the “Display” settings tab. You will see “Display Presets” first. Along the top will be links for other display settings, including size, animation, and position.
For this popup, I will use a large, center popup to make sure they see it. To help us get started, we will click on the “Center Popup” display preset.
Once clicked, a message will appear saying the display settings have been updated.
All that is left is to click the “Appearance” link. This will let us select the “theme,” which controls your popup’s visual appearance, including colors, spacing, and fonts. Popup Maker comes with several built-in themes, and you can also create your own themes that match your site.
For this popup, I am going to choose the “Light Box” theme.
Step 6: Publish
Now that we have our popup set up, it’s time to publish and check it out. First, click publish to save your popup.
Next, go to the page you are targeting with your popup. In our case, it’s any page that isn’t the checkout page. Since this popup’s trigger is exit intent, we will see the popup appear when we try to leave the site, such as going to close the browser tab.
Once the popup opens, our cookie will be set. This may make it difficult to view changes to your popup.
If you edit or change the popup, you can go back to the page you are targeting and use Popup Maker’s admin menu to open the popup.
Your exit intent Gravity Forms opt-in popup is now ready!
Get notified when we post new guides, articles, and new Popup Maker versions.