How to create an exit intent pop-up form using Mautic focus items

Entrepreneurs, solopreneurs, and digital marketers on small marketing teams are often faced with the challenge of optimizing lead generation with limited resources and time.

This results in a need to find growth hacking solutions that will increase the number of leads generated by a website without increasing workload or cost to generate these leads (by “lead generation” I am here just meaning converting visitors on a website to known prospects by collecting their contact information, including email addresses).

Mautic focus items
Mautic focus items allow you to create exit-intent popup forms, which can be a huge difference maker for lead generation on your website.

One such tool is known as an exit intent popup form. It is a javascript based technology that is able to predict, based on browsing and mouse movements, when a user is about to leave the website. When the intent to exit is detected, the website displays a popup form to collect the users information.

In addition to lead-gen optimization, there are several benefits to implementing this kind of tool on your website, not least of which is that it is a sort of “online elevator pitch”, according to this article

Exit intent popups can take the form of a newsletter signup form, promotion of an ecommerce sale, or simply a splash advertisement to visit another page on the website. 

Not surprisingly, the fantastic open source marketing automation system Mautic features customizable exit intent forms that you can add to your website. (As I’ve written elsewhere, Mautic is awesome, and completely, truly free, which is astounding.)

Here’s a step-by-step process guide on how to setup an exit intent popup form in Mautic, using their featured called “focus items”.

Create your Focus Item

Starting from the Mautic dashboard, this is going to be under the Channels item in the main menu. You select Focus Items, and then create a new focus item.

mautic focus item create new
Creating a new Focus Item in Mautic is very easy. Make sure to enter the URL of your website so that you can get a preview of what it will look like.

In this example, I’ll just be very simple and call it a newsletter signup form. I’ll also enter my website where prompted. This is an extremely awesome feature because it’s going to show a preview of what your focus item (exit intent popup form) will look like on your website.

I will use as an example another website that I have called lowglycemicindexplan.com and paste the URL into the website field in my Mautic focus item screen.

Mautic Focus Item Builder
The Mautic Focus Item Builder is an awesome, very powerful tool that will let you configure your exit intent popup form, and also give you a preview of what it will look like as you make updates in real time.

Once this is done, you can open up the Builder, and you’ll be able to see a preview of your website, along with four sections where you’ll need to do some configuration setup:

Section 1 – What should the Focus Item be

For this one we want to choose “Collect Data”. Mautic offers other options here, namely “Display a Notice” or “Emphasize a Link” – these would likely be used if you were trying to drive traffic to a certain area of your site, and are ideal for promoting ecommerce special offers or sales, enticing users to visit these sale pages just before they leave the website. But what we want to do is collect data, because we’re going to display a newsletter signup form that is designed to increase the leads generated on a website.

We can select no or yes to animate the popup form –  I like to select “Yes” here because it creates more movement it’s more attention grabbing.

When to engage: This choice is important; you have several different options, including upon arrival (so you can basically display it immediately when someone gets to your site), after scrolling down at at all, after scrolling to the middle, or after scrolling to the bottom. So these are just different levels of scrolling down.

Mautic exit intent form
If you want to create an exit intent form, select the “Visitor Intends to Leave” option under “When to Engage”.

The last option is the one that we’ll select: “Visitor intends to leave”, so Mautic can actually track by the movements of where your user is scrolling that they are probably about to leave your site and it will display the form before your visitor leaves. That’s the beauty of an exit intent popup form – it will make your lead generation more prominent and help increase the number of leads on your website.

Here is why I personally prefer this method: because it’s not obtrusive. It lets the user click around and get to whatever information they want to to access, and it doesn’t interrupt their activity by displaying a pop up while they’re still trying to use your site site and access content or information. It does, however, still allow you to collect their information and to optimize your lead generation by displaying that pop up before they leave. It’s as if your website is saying “Thanks so much for stopping by, and oh by the way, maybe you’ll enjoy this awesome newsletter content as well.” And it makes sure the user sees this and knows it is an option for them.

(Since we’re creating an exit intent popup form, you do not need to enter anything under “Timeout before engage”.  I don’t think Mautic really should be displaying this for the Visitor intends to leave option, because this will wait a certain number of seconds that you specify after the page load before it would actually display the pop up.)

For the Activate on link click option, in this example I’m going to just say no – meaning that anytime someone’s on the site if they intend to leave I’m gonna go ahead and want Mautic to display this pop-up form.

Under How often to engage, you will see a few different options. I prefer once per session. If you were to throw up a popup form on every single page, that might get a little frustrating  for the users on your website. Think about it – how would you feel if a popup form came up on a website every single time you clicked a link to go to a different page? I personally would be quite annoyed and would likely not go on that website again.

As for the “Stop engaging after conversion” option, I’ll select yes here. The reason for this being, that there is really no benefit in continuing to display a signup form when the user has already signed up and given you their information.

Section 2 – Style

In the style section you will see several different style options, and it gives you a preview of what the pop up form will look like on your website. Each of these options are pretty cool, so you might want to experiment with them to see which one works the best to generate leads on your website. They run from the less intrusive top bar or side notification, to completely taking up the entire page.

There are four different style options for the Focus Item, all of which are very cool. Experiment and see which one works the best for you.

In our example I will go with the modal – it is straight forward and just places the form in the middle of the screen. You definitely can’t miss it, aren’t going to ignore it, and at the same time it’s not so intrusive that it takes up the entire screen. But the option you select here for style is entirely up to you.

Section 3 – Colors

In the colors section you will want to provide some colors. I recommend something that matches your existing branding, but is also bright and attention-catching. You’ll want to assign colors for your text as well, and update these colors if they’re not looking good in your preview after you add the content to your Mautic focus item.  

Section 4 – Content

Under the content section is where you are going to actually populate your text and message. You’ll want to input the main headline message and also a tagline message, likely. You can then select your font, again, choosing something that most closely aligns with the current branding on your website. If your website font is Roboto, for instance, you likely don’t want to choose Papyrus or Comic Sans here. (I don’t even know if those are options, but they come to mind as silly fonts that you would not want to use.)

Mautic Focus Item Builder Content section
The Content section will let you enter the message and select the form you want to display to the user before the leave your website.

The next item you’ll need to take care of is selecting a form. I have already explained elsewhere on how to create forms in Mautic, so take a look at that article if you want some help with that. I will just note that it is highly recommended that you use the most simple form possible. In the case of newsletter signups, you really should just stick to the one-field form, collecting just their email addresses. This will keep your form clean, easy to read, and most importantly, optimize your lead generation rate. The more fields, the fewer leads you will collect – pure and simple.

Add the Mautic Focus Item to your website, making the exit intent popup live

Once you’re happy with the way your popup form looks, close the focus item builder in Mautic, apply your changes and save.

Now you just need to add the exit intent popup form to your website.

According to Mautic’s instructions on the main page of your Focus Item, under “Focus Installation”, you need to copy the line of code provided into your site, preferably right before the closing body tag – denoted as “</body>”.

mautic focus item install code
The Mautic Focus Item Installation code will need to be placed into the code of your website before the closing body tag.

In our example here, we’re going to implement this on a WordPress site. So if you have another platform for your website, you’ll need to locate where the </body> tag is.

Once you copy the code from the Mautic Focus Item, you can log in to your WordPress dashboard, then go to Appearance > Editor and locate the Footer template file, which is likely called footer.php or something similar.

Wordpress install Mautic Focus Item
Here is where you can install the Focus Item code on your WordPress website to activate the exit intent popup form.

Once you open this file, you will hopefully be able scroll down and see the close body tag (</body>). So, simply paste it right before the close body tag, and click update file.

To test that the exit intent popup form works correctly, you should then open your website and simply behave as though you are going to leave it. This means, maybe scroll down, or click a link, but eventually move your cursor toward the top of your browser as though you are going to close the tab, open a new tab, or close your browser. This is when the popup should appear. (Because we selected “Visitor intends to leave” under “When to engage” when setting up the Focus Item in Mautic.)

exit intent popup form Mautic and WordPress
Ta-dah! The lead generation exit intent popup form is alive and well on the website!

That’s it! There’s our lead generation pop-up form, a great exit intent form that is able to predict when your users are about to leave and before they do, display a signup form. This will help increase leads generated by your website, and perhaps best of all, it’s part of a system – Mautic – that does this and so much more, completely, truly 100% free.

2 Replies to “How to create an exit intent pop-up form using Mautic focus items”

  1. Hello,

    Do you have any recommendations for building the focus item in another software, and then copying the HTML over? Similar to your blog on using MailChimp email templates in Mautic?

    1. Goog question. I have not tried this myself, but one option you could try is just sticking with the Mautic focus item, only instead of selecting a form, fill in the html yourself using the “Display a Notice” option. Under What should the Focus Item Be, select “Display a Notice,” and then under content select the “HTML” option and copy/paste the code from your form (plus any other html you want). (Screenshot here: https://cactusautomation.com/wp-content/uploads/2019/04/Screen-Shot-2019-04-11-at-8.31.24-PM.png)

      You can customize the html of a Mautic form to look however you want. Here’s a blog post where I talk about this. There is also a video that goes over it on our YouTube channel. https://cactusautomation.com/blog/how-to-customize-the-design-of-mautic-forms-to-be-less-vanilla/

Leave a Reply

Your email address will not be published.

Launch a FREE email marketing and CRM program with Mautic

Setup guide

Save time while still driving web traffic and growing your brand. Check out Cactus #SocialMediaAutomation https://t.co/rz95CPrdOx

This video shows 3 ways the #email sender and sending email address can be set up in #Mautic, and which overrides the others. So you can be sure your Mautic #campaign emails are coming from the correct sender and email address. https://t.co/jPf44xEG8m

Cactus Social Media Automation will automatically write, schedule, publish, and recycle posts. #socialmediaautomation https://t.co/g2pfKkFUWA

Load More…