How to trigger HubSpot Popup Form from a button

HubSpot Popup forms are great for generating leads on your website, but they can only be shown with handful of triggers provided in the settings. And once visitor closes the popup, it won't trigger again until some time has passed.

Unfortunately there is no option to make a popup open from a button or link, but with little JavaScript magic you can make this happen.

Create your Popup form

For this to work, you first need to make sure popup is triggered on the page you want to open it. If you only want the popup to show on click, set the trigger delay on the form settings as high as possible so the popup won't open automatically.

You can do this on Targetig section under Triggers by ticking the After ellapsed time option and setting up the lay to maximum. 

Setting up your trigger button

On the page you want the link to be created, you need to add some custom JavaScript to your page. Easiest way to do this, is going under your page Settings section and under Advanced options placing the following code Additional code snippets input field.

<script>

$(function() {

    setTimeout(function() { 
         
        /* Change '#my-button' to query selector to your button class or ID */

        $("#button-id").click(function(event) {
            event.preventDefault();
            window.leadflows.dynoFactory.create(window.leadflows.lfConfig.leadFlows[0]).open(); 
        });

    }, 400); 

});

</script>

Then add a a text link or button in your page content where you want to trigger the popup. To do this you need to go into source code editing mode, this can be found form the toolbar under Advanced menu selecting Source code. Find your link and add an id or class reference that matches the query selector in your JavaScript code.

<a href="#" class="cta_button" id="my-button">Open popup</a>

To se this in action, click the button below that opens my free marketing tips popup form:

Open popup

Note that if you have multiple popup forms active on the page, this method will only trigger the first one in the list.