Popup form window

  • 12 October 2011
  • 37 replies
  • 56 views
Show first post

37 replies

J

Hi Martin, 

It looks like we’ve been responding to these active support tickets through the email address we have on file, but we haven’t been receiving any responses back. Try checking your spam folder to see if they got filtered through. Or, if you’re using the Google email platform, check your Updates, Social, Forum or Promotions tabs. Let me know if your’e unable to find these. Thanks!

M

Back from the front.

Hi there!

Once again, problems with those scroll bars. Actually, the same problems I had before - don’t know how to remove those, looking ugly, is there a way to remove them yada yada.

I’m pretty sure you told me in a past mail that that issue is fixed, but … well … seems it isn’t.

New landing page I’m talking about

http://app.schneider-wulf.de/systemhaus-frankfurt-v2/

Click the button ‘oder direkt Termin online anfragen’

Pleeeease help!

J

Hey Martin, 

We can’t really provide support through the Community, but I can make sure a new ticket is opened and we follow up with you directly via email. This will be much faster as our support team is around but not super active in the Community. 

Hang tight!

V

Hey guys, thanks for all your responses.

My question seems a bit different from what I’ve read here: so how do I set up lightbox pop up every time the visitor is about to leave the page?

If there is such topic, the link will be appreciated!

J

Hi Victor, 
I think what you’re looking for is referred to as ‘Exit Overlays’. We actually have a thread talking a bit about this here. 
Hope this helps!

D

Hi is there a way to make the pop up form full size and responsive?

K

That was very insightly
www.docmeet.in

Ryan

Hello Ahmad - this is definitely something you can do

You’ll have to create two separate landing pages and use some javascript, but these directions should help you move forward:

Step A - Design and publish the page you want to appear in the Lightbox

This page should be constrained to an appropriate size for your lightbox (ie: be relatively small). Make note of its height, width, and published URL as you will need this information in the next step.

Step B - Add the javascript to trigger a lightbox on your main Page

Open your main page (the one with the action button) in the editor and follow these steps:

  1. Assuming you want a button to trigger the lightbox, paste the following script into the HEAD of your page using the Javascript tool:
<script src="http://assets.unbounce.com/m/lp-webapp/0.0.9/fancybox/jquery.fancybox-1.3.1.js" type="text/javascript" charset="utf-8"></script>   
 
<script type="text/javascript"> <br /> jQuery(function() { <br />
 if (jQuery("a.lp-pom-button[target='_self']").fancybox.length) { <br />
   jQuery("a.lp-pom-button[target='_self']").fancybox({ <br />
     'width'
        : 400, <br />
     'height'
       : 600, <br />
     'autoScale'
    : 'true', <br />
     'transitionIn'
 : 'elastic', <br />
     'transitionOut'
: 'fade', <br />
     'type'
         : 'iframe' <br />
   }); <br />
 } <br />
}); <br /> </script>

Edit the ‘width’ and ‘height’ values to match the size of your page from Step A

  1. Then, paste the following script into the ‘CSS Custom’ dialog box:
<link rel="stylesheet" href="http://assets.unbounce.com/m/lp-webapp/0.0.9/fancybox/jquery.fancybox-1.3.1.css" type="text/css">
  1. In the main editor window, select the button you want to trigger the lightbox. Type the URL of your form (from Step A) into the link field, for target choose ‘Same Window (_self)’

  1. Set your conversion goal to be the link to your form page:

These steps will cause a button whose target is ‘Same Window (_self)’ to open the link in a lightbox.

You can separately track the number of users who clicked the button vs. the number of users who submitted the form by comparing the stats between your two pages:

  • Your form page’s stats (from Step A) will reflect the number of users who submitted the form. Your lead data will also be found/managed with this page.

  • Your main page’s stats (Step B) will reflect the number of users who clicked the button.

I hope this helps you achieve what you were looking to do!

J

UPDATE: 

We’ve released a new feature into beta that allows you to build/launch your lightboxes directly within the page builder itself. This new release will allow you to add images, videos and even forms into your lightbox, and_ you’ll be able to attribute the lead/conversion back to your original page. 

Go check it out and sign up for the beta  here . 

Ryan

One more note: I should mention that the scripts I provided here will work on a page that does not contain a form.

If your page contains a form, you will need to slightly modify the scripts you use. Until the full knowledge base article is posted, send us at email to support@unbounce.com and we’ll send the modified instructions your way.

John

This is great. Thank you for the detailed information. I was able to implement this in just a few minutes.

One question/issue: I’m using this on a page that includes a YouTube video embedded in the page. There are some quirky visual issues that I assume are related to the z-index. If the lightbox opens so that the upper-right corner hovers over the embedded video, the “X” used to close the lightbox div is partially obscured. Also - when the page is opened in various mobile browsers, the embedded video appears above the lightbox which makes it impossible to fill in the form fields inside the lightbox div.

Is there any way to adjust the code so that these issues don’t occur?

Ryan

Hi John - sure thing

You’ll essentially just swap out the ‘new’ YouTube embed code for the ‘old’ code and add a snippet the the script. This knowledge base article should point you in the right direction: http://support.unbounce.com/entries/2…

Glad to hear that this article helped you set up your light box form!

Reply


Terms & ConditionsCookie settings