CMS Development

AllisonAltus
Top Contributor

Sign up form pop out window

SOLVE

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 

0 Upvotes
1 Accepted solution
TRooInbound
Solution
Key Advisor

Sign up form pop out window

SOLVE

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
Key Advisor

Sign up form pop out window

SOLVE

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!

mmaheshwari
Participant

Sign up form pop out window

SOLVE

Hi @TRooInbound

 

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

0 Upvotes
jemsford
Member

Sign up form pop out window

SOLVE

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.

0 Upvotes
petras
Contributor

Sign up form pop out window

SOLVE

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?

 

 

0 Upvotes
Brandy13
Participant

Sign up form pop out window

SOLVE

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

0 Upvotes
lcverner
Participant

Sign up form pop out window

SOLVE

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. 

0 Upvotes
lcverner
Participant

Sign up form pop out window

SOLVE

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.

0 Upvotes
ziadi
Contributor

Sign up form pop out window

SOLVE

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

0 Upvotes
Piper
Member

Sign up form pop out window

SOLVE

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

0 Upvotes
roisinkirby
HubSpot Product Team
HubSpot Product Team

Sign up form pop out window

SOLVE

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
Contributor

Sign up form pop out window

SOLVE

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

0 Upvotes