Sign up form pop out window

[AllisonAltus]

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 

[TRooInbound · Accepted solution]

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.

Team TRooInbound!

[mmaheshwari]

Hi @TRooInbound

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

[jemsford]

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.

[petras]

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?

[Brandy13]

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

[lcverner]

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. 

[lcverner]

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.

[ziadi]

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

[Piper]

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

[roisinkirby]

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]

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