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

micheleguilford
Participant

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 

31 Replies 31
ipowell
Contributor

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 shows what kind I used.

 

This is the delay.This is the delay.

 

 

And here is the finished product:Green special offer popup. Default type. You can adjust that for whatever you use.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!

micheleguilford
Participant

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

ipowell
Contributor

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. 🙂 

Compuware
Top Contributor

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.

ipowell
Contributor

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

Compuware
Top Contributor

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.

mckay
Participant

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.

str8sports
Participant

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?

0 Upvotes
Compuware
Top Contributor

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 PU 4.PNGPU 3.PNGPU 2.PNGPU 1.PNG

mckay
Participant

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. 

str8sports
Participant

thanks for the info.

0 Upvotes
Hubspotlien
Participant

I am also looking for this exact feature!

kchubs
Participant

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

AlexHutson
Participant | Partner

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:

 

Screenshot - 08_08_2019 , 09_41_58.png

 

Screenshot - 08_08_2019 , 09_42_24.png

 

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

enkelst
Participant

Need this! Come on HubSpot, chop chop.

Lmartin
Participant

We also need this 🙂 

0 Upvotes
alanamcconnell
Participant

They have a new beta out that allows this and it works really well! https://share.hsforms.com/1NyNhWt4fRXGJQmG7lWXaeA2hn6i?__hstc=20629287.f7451d6edc63a26b9c702d886838c...

0 Upvotes
Compuware
Top Contributor

Awesome. Thanks for the heads up!

0 Upvotes
dariakg
Participant

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

0 Upvotes
DanielSanchez
Key Advisor

Hi @micheleguilford and @dariakg 

 

I create one custom module without JavaScript. Look:

 

1) Create one file in your Design Manager and select "Custom Module";

2) Create 1 rich text field and 2 color fields;

3) Paste the code bellow in your space for HTML and CSS in the module.

 

HTML

<div id="openModal" class="modalDialog popup-auto-open">
  <div> <a href="#openModal" title="Close" class="close" style="background:{{ your_field_color.color }};color:{{ your_field_color_2.color }};">X</a>
    Here you insert your value of rich text field or image field
  </div>
</div>

CSS

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 1;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: auto;
}

.modalDialog:target {
  opacity: 0;
  pointer-events: none;
}

.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
}

.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  padding:2px;
  border-radius:100%;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}

.close:hover {
    box-shadow: 0 0 5px #333333;
    padding: 5px;
    border-radius: 100%;
    transition: 0.1s linear all;
}

.popup-auto-open img{
  max-width:100%;
}

4)  Is important replace where I left pink with the value of the fields you created.

 

Obs: u can use the above codes in your site code, dont need create custom module. But if use HubSpot, is bether one module to inser in templates os sites and blogs and easy customization.

 

Did this post help solve your problem? If so, please mark it as a solution.

Best Regasrds! 🙂

0 Upvotes
MarketingMax
Participant | Platinum Partner

Bump. Think this should be pretty simple to implement. Have it so that you can replace the form with a CTA that directs the user to a specific page.

0 Upvotes
is_ppce
Participant

Just chiming in to echo this - Having to use an external pop up creator like GetSiteControl is fine, but I'd really rather do it in house at Hubspot and it seems like a no-brainer.

0 Upvotes
kathleendavis9
Member

I believe this has been solved with the new hubspot form pop-ups forms! Doesn't have to actually be a form, they really should move it from the forms section. 

 

Create a pop-up form, then on the first step, for the question "What should the button link to?", you can just set it to a non-hubspot URL and bypass the form altogether. 

AlexHutson
Participant | Partner

Thanks! Yes - you're correct. Cheers!

0 Upvotes
JRaudys
Participant

@kathleendavis9 I created an account on here just to thank you for pointing this out. Smiley LOL

jessebeginbound
Participant | Diamond Partner

Hi @micheleguilford and everyone!

 

I know I'm a little late to the party but we do have a custom module for this that can help if anyone is interested. It allows for you to put a HubSpot Form, PDF, Image, YouTube Video, or iframe of another webpage into a beautiful Popup. It's triggered by a custom button you can style and place on any HubSpot CMS template or page - no coding required!

 

check it out if it sounds like something you might be interested in.

http://beginbound.hs-sites.com/ultimate-popup-wizard-begin-bound-hubspot-custom-module

 

Happy HubSpotting!

Jesse

Hubspotlien
Participant

Hi everyone, I think Google will penalise sites for using pop-ups when the new 'Page Experience' update rolls out in May?

0 Upvotes
dennisedson
Community Manager

@Hubspotlien 

Interesting.  do you have any documentation on that?

(also, thanks for adding here)

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
VMishravivek
Member

Hey ,

 

This option is available in HS. 

Go to Marketing=> Lead capture=> Forms => Pop up form. 

Then While creating the form go to Callout and select the correct option as shown in the image below.

 

VMishravivek_0-1615289811636.png

 

Thanks