How do I add an exit pop up form in Webflow?

Tools:

Why add an exit pop up form to your website?

Adding an exit pop-up form to your website can be beneficial for several reasons:

Reducing the bounce rate : An exit pop-up can capture the attention of visitors who are about to leave the site, encouraging them to stay longer or explore more.
Increase conversions : By offering a special offer, a discount or an incentive, a pop-up exit can convert potential visitors into customers.
Gather information : The emailing forms in exit pop-ups allow you to collect valuable information about visitors, such as their email addresses, for later marketing campaigns.
Gather feedback : An exit pop-up can include a quick investigation to understand why visitors are leaving the site, providing insights to improve the user experience.
Promote specific content : You can use exit pop-ups to direct visitors to specific content, blog posts, white papers, or other resources that may be of interest to them.
Increase engagement : By offering relevant content or exclusive offers, a pop-up exit can encourage visitors to interact more with your site.
Reduce cart abandonment : For e-commerce sites, a pop-up exit can remind users of the items left in their shopping cart and offer incentives to complete their purchase.

In summary, a well-designed pop-up exit can improve the user experience, increase conversions, and provide valuable data for marketing strategies.

‍

How does it work?

Whether it's a pop up to get feedback, to offer a special offer or even a lead magnet, the process is the same.

The operation is as follows, just develop your pop up (modal) in Webflow and add a small JS script to say to pass your modal from Display: hidden unto Display: flex when the user takes the mouse out of the window.

‍

1. Develop your Webflow modal

The best practice is to have an overlay behind to optimize the UX (cf: screen). Attention, you must put your modal in”display: hidden” by default.

‍

2. Add this script <body>to your page

<script>    
    document.addEventListener('mouseleave', function(event) {
    if (event.clientY <= 0) {
        document.querySelector('.modal-lead-gen-wrapper').style.display = 'flex';
    }
});
</script>

Important: Remember to replace “modal-lead-gen-wrapper” in the code above with the class of your modal

‍

3. Publish and test the result

Sandro D.

Updated on

8/10/2024

Growth Marketer, Webflow expert and a jack of all trades. I take care of commercial operations, ensure the smooth running of projects and take care of issues related to marketing (SEO, Tracking, Copywriting, etc.)