How to put a Form in a Lightbox (aka, two step opt-in for click-through page)


#1

Hey all! Anyone know how to program in Javascript to create a 2-step optin process? I’m thinking where the form pops up in a lightbox after the user clicking a button, just like Leadpages does. I am willing to pay for it :slight_smile:

Thanks,
Roy


#2

Hey Roy!

We chatted today during Unbounce’s workshop, and there are a couple of options for you. I’ve opened up a support ticket so we can continue our conversation there. Check your email!

In the meantime, I’d love to hear from other people in the community - why is this feature so important to you? 

Thanks in advance for sharing, everyone!


#3

Great, thanks Lou! I’ll check my email.

The reason for this two-step optin is that in many cases it increases the optin rate, because a user is more inclined to click a button if there is no other fields to enter data. And that first click is like a micro commitment which increases the chance of them adding their email etc at step two.


#4

Hello Everyone,

I also have the same problem. Could you please help me? Can I get that mail also?:slight_smile:

Thnaks
Zigmond


#5

Hi Zsigmond!

We have a couple options for this type of functionality. Check your email - I’ve opened up a support ticket for you so we can go into more detail!

In the meantime, I’d really encourage other Unbouncers in the community to take the time to share some insight - why is this feature important to your marketing campaigns? Have you seen lifts in your own conversion rates using this feature?

Thanks in advance everyone for sharing! 


#6

I saw some code to do this on jmso01’s Gists, but they’re not working out for me. ÀIs there any tutorial to use the js online?


#7

Hi Francisco - there’s a couple options available for you. Check your email shortly, I’m going to open up a Support ticket and see what is amiss!


#8

Dear Lou, I haven’t yet received your e-mail. Please contact me when you can, we need to fix this as soon as possible.

Best regards,

Francisco


#9

Hi Francisco - please check your email again, I’ve sent the info your way!


#10

I would like to do the same. Can you send me the info via email? Thanks!


#11

I would also like this feature. It makes designing forms so much easier as you don’t have to have an ugly from on the page and leaves space to keep the design cleaner and more functional.

Has anyone come up with a solution yet?

Thanks


#12

I am also interested in a solution to this.

Lou, could you share the options you have been alluding to?

Thanks,
Mike


#13

Johnny,

That is absolutely fantastic.

Thank-you!

Mike


#14

Hi Jonny,

That words great thanks except for on my phone (Samsung galaxy s2) when you click the ‘sign up’ button the form doesn’t appear. See here:

http://unbouncepages.com/30-day-free-…

I have the form centered in the mobile view.

Your example http://unbouncepages.com/lightbox-form/

works fine so I’m doing something wrong somewhere

Thanks

Masten


#15

Hi Masten, 

While I’m not entirely sure why this isn’t working on your phone, I will _escalate this to my technical team so they can dig in and hopefully find a solution. Hang tight and I’ll send you an email to follow up.


#16

Jonny,

Is there a way to trigger the lightbox container automatically (rather than having to click on a button)?

Mike


#17

Hi Johnny,

it works great, except I have multiple buttons (which cannot have the same ID) that should trigger the same form. What do I have to change in order for this setup to work?

Thanks.


#18

Hey Michael - You could try a timeout delay that simulates a button click after a certain period of time.

$(function(){
     <br />
   window.setTimeout(function(){
<br />
     $('#lp-pom-button-14').click(); <br />
   },2000); <br />
}); <br /> </script>```   
 
With #lp-pom-button-14 replaced with your buttons ID that is used to open the lightbox

#19

Hey Erik!

Simply change the variable ‘buttonToTriggerForm’ to include more than one button ID separated commas. For example:

var buttonToTriggerForm = '#lp-pom-button-209, #lp-pom-button-210, #lp-pom-button-211';

#20

Is it not possible to scroll within the lightbox on iPhones? We’re having some issues.

Desktop works great, though, thanks Johnny!