Popup form window


#1

Hi Everyone,

I like unbounce and I see many good templates to start with, I just have a small issue, for some templates they don’t have any form place, just a big action button

is there any way to integrate this action button with a popup form to register?

I mean without changing the template design, just one user click the form a popup window will ask him to fill the form.

and anyway to see how many user clicked in the action and how many one actually filled the form (filling the form already in unbounce, but clicking the button is not exists)


#2

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.


#3

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?


#4

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!


#5

Ryan - thanks. This definitely fixed the my desktop browser issue, but it didn’t resolve the z-index issue on any of the Android-based mobile browsers I tested. Any suggestions?


#6

For noobs important thing to make it work is that ‘JQuery’ box should be marked in JavaScript dialog.
Without JQuery included on the page fancybox popup will not wok.


#7

I’m joining in late here…
Thanks Ryan it is very useful.

Is there any way to set that a popup will open up (after a button is clicked) in a form of “new window” rather than a lightbox?

I’d then like to be able to define the exact size of the new window pop up.

Can you help with that?

Thanks,
Gil


#8

When inserting the code, it should be done “in the lower left” right? In the “JAvascrips” and “Stylesheets” areas?


#9

Hey Thomas - that’s right. We made some changes to our editor a couple months back and moved the Javascript tool from the menu up top down to the footer. I’ve updated the article to reflect that change. Thanks for the heads up.


#10

Thanks for the quick reply. I’ve tried the code, but I can’t get it to work. There is no fancybox action happening at all, just the new page opening up, replacing the old one. I suppose I need to take a crash course in JQuery?


#11

Ahaaa… Since I have the “enable Fancybox” ticked, I simply removed the…


#12

Would it be possible to have the pop up light box without having a button trigger?


#13

Hi there!

Are you looking to have a light box pop up upon visiting your landing page? Just trying to clarify a bit what you’re looking for.

If so, you could always take a stab at this code that I sourced up on Google.

http://visuallightbox.com/rq/automati…

Feel free to also get in touch with us at support@unbounce.com if you’d like to dig into more details.


#14

Hi I tried to implement this but I am getting an error when the lightbox opens.

“Unable to resolve the server’s DNS address.”

Is this something I need to take up with my host / domain registrar or is this an Unbounce issue?

Page is: http://lease.restinchairs.com/workpla…


#15

Hi Frank - I took a look at your page and you seem to be linking to the wrong url.

It’s currently linked to:
http://www.lease.restinchairs.com/signup

but the working url is:
http://lease.restinchairs.com/signup

Just swap out the url and you should be good to go.


#16

Thanks that fixed it.


#17

Hi, is there a way to have the light box change shape to reflect the size and content on the form submission conformation page?


#18

Hey Ben - The lightbox size should correctly match the dimensions of your Form confirmation dialog.

If not, it may be that there are elements sticking outside your confirmation dialogs bounds. Try clicking through each object on that page and observe it’s dimensions.


#19

Say i wanted to have a conformation dialogue box wider than the form popup, would there be a way to have the light box change in size to reflect this? Or would I have to set the initial width to something that can accommodate the conformation dialogue?


#20

Hey Ben - You could try make your form confirmation dialog page larger, but then have the content within a box element so it gives the impression the main content is the box itself.

Not sure if that was what you were looking for. If not clarify how you’d like it to look like and i’d be happy to establish if this is possible or not.