Sign up form pop out window

SOLVE
AllisonAltus
Top Contributor

Hi is possible to create a url link so that when the visitor selects the CTA button a pop out sign up form appears? i.e its not a new page but a new window within the current view? 

Thanks

Allison 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
TRooInbound
Solution
Regular Advisor

Hi @AllisonAltus,

 

Yes it is possible to pop out sign up form

 

add Javascript code to your page "Edit Head"

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">

<script>
$(document).ready(function(){

    $('.open-popup-link').magnificPopup({
        type:'inline',
        midClick: true 
    });
});

</script>

 

Add CTA attribute like below

<a href="#test-popup" class="open-popup-link">sign up</a>

 

Go to form module or form section module and click to edit gear and select "Edit CSS declarations" to wrap form section and paste below code : 

<div id="test-popup" class="mfp-hide">{{ html }}</div>

as shown in attached image.

form.PNG

 

Team TRooInbound!

View solution in original post

11 Replies 11
TRooInbound
Solution
Regular Advisor

Hi @AllisonAltus,

 

Yes it is possible to pop out sign up form

 

add Javascript code to your page "Edit Head"

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">

<script>
$(document).ready(function(){

    $('.open-popup-link').magnificPopup({
        type:'inline',
        midClick: true 
    });
});

</script>

 

Add CTA attribute like below

<a href="#test-popup" class="open-popup-link">sign up</a>

 

Go to form module or form section module and click to edit gear and select "Edit CSS declarations" to wrap form section and paste below code : 

<div id="test-popup" class="mfp-hide">{{ html }}</div>

as shown in attached image.

form.PNG

 

Team TRooInbound!

View solution in original post

roisinkirby
HubSpot Product Team

Hey @AllisonAltus was @TRooInbound's post helpful in solving the issue? If so, could you please mark his post as an Accepted Solution to help other Community members find the solution. If not, let us know and we can help you further.

dianna
Regular Contributor

I added to head of my landing page and this is not working.

Reply
0 Upvotes
Piper
New Contributor

I added the Javascript to the "Edit Head", CTA attribute and CSS declaration but it isn't working...

 

Should this be added as a Custom HTML module to the landing page?

 

M

Reply
0 Upvotes
lcverner
Occasional Contributor

This solution doesn't work. Even when implemented correctly, there is no styling on the form so it takes up the full width of the screen upon popup. Not only that, but the form submit button does not appear, it just has a link to 'get free widget' which does nothing. 

Reply
0 Upvotes
lcverner
Occasional Contributor

Ha! I got it. You have to make sure you select the form in the page not just the template. 

But, the css still does not work. I had to create a separate stylesheet for this to add background color, font, width, and padding - to basically make it visible. I don't think the attached stylesheet referenced in the header works.

Reply
0 Upvotes
ziadi
Regular Contributor

Hi can you please elaborate on how you were able to do choose the form in the page?

Reply
0 Upvotes
petras
Regular Contributor

Hello, thanks a lot for the code, it functions very well. Great

 

Is there a possibility to limit the window pop-up size, especially the width?

 

 

Reply
0 Upvotes
Brandy13
Regular Contributor

Anyone know if this code will work in a Shopify site? Trying to replace the existing Shopify newsletter sign up form on the homepage. 

Reply
0 Upvotes
jemsford
New Contributor

If you are developing the software then you can make the popout windows by using the Visual Studio. you can also use the CSS or Jquery in your popup windows. These files are added in the Head of the HTML. If your windows are not working properly then you can contact 0x800705b4 for the best solution.

Reply
0 Upvotes
mmaheshwari
Occasional Contributor

Hi @TRooInbound

 

I'm afraid I am not sure where to find the CTA attribute - where can I set this up? Thanks!

Reply
0 Upvotes