HubSpot provides the ability to display a pop up form with various triggers (exit intent, after 7 seconds, etc.) But what if you want to show it immediately or when a button is clicked? Below is some javascript to help achieve this functionality.
Table of Contents
How to use this script
- Create pop up form
- Set targeting to the page you would like the form to appear
- Set the form pop-up trigger to 600 seconds or 10 minutes. This will essentially hide the pop up until you manually set it to appear using the script below.
- Now that you have the form created and connected to the page. Add the script to the HubSpot page by editing the page > Settings > Advanced Options > Footer HTML
Here is an example page using a button trigger to open a pop up form.
<script>
window.onload = function() {
// add a delay to give time for the pop form to load
setTimeout(function() {
// trigger the opening of the pop up without delay
// window.leadflows.dynoFactory.create(window.leadflows.lfConfig.leadFlows[0]).open();
/* can also be triggered on button click
Change '#main-content .button' query selector below to your button class or ID
*/
$("#main-content .button").click(function(){
event.preventDefault();
window.leadflows.dynoFactory.create(window.leadflows.lfConfig.leadFlows[0]).open();
});
}, 200);
// window load
};
</script>
What about multiple form pop-ups on the same page?
The default HubSpot pop-up form is ideal for showing one pop-up form per page based on the URL targeting.
If you wanted to have buttons to trigger different forms, I would create custom modal functionality and then embed my forms in there.
If you are not a developer and would like to implement this functionality, contact me for a proposal.
