Trigger lead flow to appear based on link/button click

[Shay]

Migrated from legacy feedback forum with 41 votes.

An example, provide a way to trigger the Leadin Popup Form to appear when a user clicks on a 'Download EBook' link in a blog post. If this is something you'd be interested in, please vote and leave a comment describing how you'd use this feature below.

[WarrenWoermke]

I agree, this functionality would be very helpful for us (whether it be a lead flow form or regular form, either would be a big improvement).

Having to redirect a visitor to yet another page to fill out a very simple form is not ideal, particularily for a first time visitor. 

[GSantos]

+1 here

We have a main campaign running with a enquiry form on the page, but there's a download offer that we would to use on a CTA button and a popup form. So if the visitor don't fill the enquiry form, at least we can get his contacts with a download and nurture after the campaign.

[RafiPN]

Totally thought I could get this working with buttons using anchor links or custom queries but support said I needed a hard page refresh which isn't nice to visitors at all. Definitely should add this feature! 

[rodschneider]

I agree with everyone here.  I have a button on my home page for people to sign up to receive our Email Newsletter.  I want to pop up a lead flow on button click.

[siez18]

Was this feature ever released? I am also looking for some way to do this. 

Currently my blog posts are appearing a bit bulky as I have embed hubspot forms in them to provide lead magnets. I want to remove those forms from the posts and use lead flows instead but having a link or button as a trigger will make everything really great. 

Any way to do this? 

Shabaz 

[gamebenchjake]

Hey all! Just a heads up, I've got this working now. You can call the following Javascript to trigger the Lead Flow:

window.leadflows.dynoFactory.create(window.leadflows.lfConfig.leadFlows[0]).open()

This will call the first lead flow that you have registered on the page. If you have more than one, just increment the in the [0] bit.

An example of a link that will do this:

<a href="javascript&colon;void(0);window.leadflows.dynoFactory.create(window.leadflows.lfConfig.leadFlows[0]).open()">Click me!</a>

(replace the : above with an actual colon; the formatter here is messing it up)

Reply back if you need any help and I'll see what I can do 🙂

[MFrankJohnson]

Thanks @gamebenchjake, code works fine in Shopify stores rendered in Chrome and Edge, but not Firefox.

<a href="javascript&colon;void(0);window.leadflows.dynoFactory.create(window.leadflows.lfConfig.leadFlows[0]).open()">HubSpot Pop-Up</a>

[gamebenchjake]

Hey @MFrankJohnson ,

Interesting, do you have a link to your page that I could look at in Firefox? I'm sure it's probably to do with the way the href attribute is being handled.

EDIT: If you keep the "javascript: void(0);" in the href attribute, you can move the rest of the snippet to an

onclick=""

attribute and it should work 🙂

J

[gamebenchjake]

Just to update everyone (as I don't believe editing triggers an update), for Firefox support, the link should be:

<a href="javascript&colon; void(0);" onclick="window.leadflows.dynoFactory.create(window.leadflows.lfConfig.leadFlows[0]).open()">Hubspot Lead Flow Link</a>

I'll be putting together a small JS file which extends the leadflow script to make this cleaner., and most likely add in any other small extensions for stuff like this if anyone has any other requests.

[MFrankJohnson]

>>"I don't believe editing triggers an update"

Correct. (these ideas threads aren't like regular discussion threads)

Works perfectly. Confirmed on Chrome, Edge, Firefox (Windows 10).

Thanks again.

[coforge]

Can this also work for a CTA?

[gamebenchjake]

Hey @coforge ,

Are you asking about having the Hubspot CTA trigger the pop-up form?

[coforge]

Yes is that possible?

[gamebenchjake]

@coforge 

Unfortunately it doesn't look like it - HS checks the CTA link to ensure it's a valid URL, so the Javascript won't save. 

What is your reasoning behind wanting this functionality out of curiousity?

[coforge]

I came to the same conclusion. I wanted a custom image CTA to trigger the pop-up form (leadflow). It's fine I can use an image. Thanks for checking.

[mike-ward]

@gamebenchjake just wanted to say thanks for sharing the JS for manually popping the form, very useful and you saved me a lot of snooping around to work it out. Very much appreciated!

[aturrell]

I would find this extremely useful!

[JoeMayall]

Hi HubSpot Community,

My name is Joe. I wanted to provide a quick update on this Idea.

The ability to trigger pop-up forms based on a certain behavior of your website visitors (such as a CTA click) is currently available in Hubspot.

In the pop-up form editor go to the “Targeting” tab. You can select a specific website page where you would like your pop up to appear, as well as apply filters based on the characteristics of your website visitors, such as what pages they’ve visited, what country they are in, are they a new for returning visitor, and many more.

The filters allow you to combine multiple rules as well as create exclusion rules. For more information,  take a look at this Knowledge Base article: https://knowledge.hubspot.com/forms/use-targeting-rules-in-pop-up-forms-and-chatflows.

Best,
Joe