topic Re: How to create pop-up with direct link, not form in CMS Development

How to create pop-up with direct link, not form

micheleguilford — Fri, 17 Aug 2018 15:51:56 GMT

I'm looking for the abiity to have a lightbox pop up on a page that simply redirects to another page on my site. Heard about a special we have but lost the email with the direct link? Click here and there you are. Seems so much simpler than a form pop-up, but I don't want to use a store template.

Possible? Not?

-Michele

Re: How to create pop-up with direct link, not form

ipowell — Fri, 17 Aug 2018 18:16:28 GMT

Hi Michele!

I created a special offer popup using a custom page module... I used a CTA in place of a regular link.

You can place this code into the HTML + HUBL section:

<div class="modal" style="background: url('{{ module.pop_up_img.src }}'); background-position: center top; background-size: 100%; background-repeat: no-repeat; background-color: #fff;">
    <div class="modal-close-outer">
		<div class="modal-close"><i class="fal fa-times-circle"></i></div>
	</div>
  {{ widget.pop_up_text }}
</div>
<div class="modal-mask"></div>


<script>
$(document).ready(function() {
    $(document).ready(function () {
        setTimeout(function(){ 
            $(".modal, .modal-mask").fadeIn(); }, {{ widget.modal_delay }});
    });
    $('.modal-close').click(function(){
        $('.modal').hide();
        $('.modal-mask').hide();
    });
});
</script>

And this for the CSS:

.modal {
  display: none;
  position: fixed;
  top: 30px; 
  bottom: 30px; 
  right: 0;
  left: 0;
  margin: 0 auto!important;
  background-color: #fff; 
  max-width: 420px;
  max-height: 38%;
  overflow-y: hidden;
  padding: 80px 60px 80px 65px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: 2px solid #eaeaea;
  z-index: 100;
 }

.modal h3 {
  margin-top: 120px;
}


.modal strong {
  font-weight: 700;
}

 .modal-mask {
  display: none;
  z-index: 99;
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: rgba(0,0,0,.7);
  top: 0;
  left: 0;
}

 .modal-close-outer {
  position: absolute;
  right: 45px;
  top: 20px;
}

 .modal-close {
  text-decoration: none;
  color: #fff;
  position: fixed;
  cursor: pointer;
   font-size: 30px;
}

@media (max-width: 767px) {
.modal {max-width: 76%; padding: 30px 7%!important;}
}

And I set up the fields like so:This shows what kind I used.

This is the delay.

And here is the finished product:Green special offer popup. Default type. You can adjust that for whatever you use.

You may have to adjust the css to fit your styles/etc. Also, I used Font Awesome for the close button. 🙂

Hope this helps!

Re: How to create pop-up with direct link, not form

micheleguilford — Mon, 20 Aug 2018 16:02:42 GMT

Thank you SO VERY MUCH. You put a lot of effort into this and I really do appreciate it. However, what I had in mind is something more simple like the lead flow pop-ups, only without the form part. Just click here to go there.

Gah, if you give lessons on coding to this extent, I might sign up! 🙂

Thank you, again,

Michele

Re: How to create pop-up with direct link, not form

ipowell — Mon, 20 Aug 2018 19:53:51 GMT

Haha, thank you!

I see what you mean now... I do agree that it would be very beneficial to have the ability to set up a lead flow with a CTA button instead of a form. As of right now, you can only set up the lead flow to redirect to a page once you fill out the a form. It's not possible to create one without a form at the moment - the email adress field is required. However, I think that would be a fantastic addition to the lead flow feature. 🙂

Re: How to create pop-up with direct link, not form

Compuware — Tue, 15 Jan 2019 20:30:58 GMT

Would also be great (perhaps there already is a solution available) if you can use an existing form rather than creating all the details behind a form. For instance...I have an event I want to promote using a pop-up. The page with form and the confirmation email is all in place. Would be great just to direct to that instead of recreating the wheel.

Re: How to create pop-up with direct link, not form

ipowell — Wed, 16 Jan 2019 19:26:23 GMT

You could use the Advanced Slide in CTA module in the HubSpot Marketplace. It's free.

Re: How to create pop-up with direct link, not form

mckay — Thu, 24 Jan 2019 22:39:44 GMT

This is seems like it would be a basic feature to add on. I too just went to create a pop up and noticed that it defautls ONLY to a form. I would prefer have it go to an exisiting HS LP promo. Definatly would be awesome to have some customization to the CTA.

Re: How to create pop-up with direct link, not form

Compuware — Fri, 25 Jan 2019 15:09:13 GMT

Thanks. I downloaded the app. While it is a consideration there are limitations. Most importantly with the "native" pop-up form you can apply to multiple pages at at time.

Also, this application is limited to only HS created landing pages. While the pop-up forms you can direct to a page on your website that isn't necessarily a HS Landing page.

But I can see some use cases where this will be interested to test with. Thanks for the suggestion.

I still hope they provide improvements to the "native" pop-up forms to include the direct connection to Landing Page, forms, emails, CTAs etc.

Re: How to create pop-up with direct link, not form

str8sports — Fri, 01 Feb 2019 15:41:52 GMT

you need to speak english to me on how to do this......lol!

I would like to do something like this on my site but have no idea what to do.

Can you help?

Re: How to create pop-up with direct link, not form

Compuware — Fri, 01 Feb 2019 15:57:40 GMT

We did a simplified redirect to the landing page which has the entire process (landing page, thank you page, confirmation email) by creating the pop-up form and then in the section where you create the "thank you page" you put a link in there that directs them to the landing page you want to promote. In our initial form that the system requires you to create you can put only 1 field (i.e. email address). We have progressive forms so when they click on the link in the thank you page from the pop-up they do not have to populate additional fields and/or nominal fields - depending on whether they were previously cookied. Not ideal but a workaround

Re: How to create pop-up with direct link, not form

mckay — Fri, 01 Feb 2019 16:11:23 GMT

Hubspot is real close with their existing setup and pop up forms. They just need to add some basic and simple functionality. Like adding a HS LP rather than an email. Seems to be an oversight that they would not add that into their form functions.

Re: How to create pop-up with direct link, not form

str8sports — Fri, 01 Feb 2019 16:53:21 GMT

thanks for the info.

Re: How to create pop-up with direct link, not form

Hubspotlien — Fri, 01 Mar 2019 16:19:22 GMT

I am also looking for this exact feature!

Re: How to create pop-up with direct link, not form

kchubs — Tue, 02 Apr 2019 17:29:00 GMT

I'm also looking for this. Seems like it would be such a simple add-on.

Re: How to create pop-up with direct link, not form

AlexHutson — Thu, 08 Aug 2019 09:15:06 GMT

I'd love this feature to exist too, and to be honest, I think it's pretty shocking that it doesn't exist already.

While I wait for HubSpot to do this, I've been using this free tool for my clients: https://www.addthis.com

Create an account and then add the Link Promotion tool:

Then you just need to design the pop-up which is super-easy and quick.

Once you're happy, embed the code in your HS pages and it'll start working.

I hope that helps?

Thanks,

Alex

Re: How to create pop-up with direct link, not form

enkelst — Tue, 15 Oct 2019 07:45:03 GMT

Need this! Come on HubSpot, chop chop.

Re: How to create pop-up with direct link, not form

Lmartin — Tue, 19 Nov 2019 09:21:21 GMT

We also need this 🙂

Re: How to create pop-up with direct link, not form

alanamcconnell — Tue, 19 Nov 2019 17:37:54 GMT

They have a new beta out that allows this and it works really well! https://share.hsforms.com/1NyNhWt4fRXGJQmG7lWXaeA2hn6i?__hstc=20629287.f7451d6edc63a26b9c702d886838c3b9.1546966110871.1573837212214.1574184995767.104&__hssc=20629287.4.1574184995767&__hsfp=1697288194

Re: How to create pop-up with direct link, not form

Compuware — Tue, 19 Nov 2019 17:44:42 GMT

Awesome. Thanks for the heads up!

Re: How to create pop-up with direct link, not form

dariakg — Fri, 29 Nov 2019 14:33:17 GMT

Need this too! How is it possible it's not there yet??