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

Roy_Moss

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 🙂

Thanks,
Roy

49 replies

Lou_Sturm

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!

Roy_Moss

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.

Z

Hello Everyone,

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

Thnaks
Zigmond

Lou_Sturm

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! 

Francisco_Mart_nez

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?

Lou_Sturm

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!

Francisco_Mart_nez

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

Lou_Sturm

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

J

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

M

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

Michael_Smith

I am also interested in a solution to this.

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

Thanks,
Mike

Johnny_Opao
Userlevel 3

Hey Michael

I detailed below some instructions for creating a form lightbox on Unbounce. You can find the script and guide below:

https://gist.github.com/johnnyopao/ee58344410873e6c7406

Michael_Smith

Johnny,

That is absolutely fantastic.

Thank-you!

Mike

M

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

J

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.

Michael_Smith

Jonny,

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

Mike

E

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.

Johnny_Opao
Userlevel 3

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
Johnny_Opao
Userlevel 3

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';
C

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

Desktop works great, though, thanks Johnny! 

Johnny_Opao
Userlevel 3

Hey Cheryl

The way I made it is that it will display the full content without needing to scroll. I’d like to see your setup so I can take a closer look and perhaps provide some suggestions.

I’m sending you a email now. Lookout for it shortly!

M

I put a html widget in box instead of form widget, and applied a lightbox effect to multiple buttons. When I click on any button first time, html content appears. But when I click on another button, html widget doesn’t appears. What can be a problem?

Johnny_Opao
Userlevel 3

Hey Mirus

Let me take a closer look. I’ll shoot you a email shorty so we can dig in together. Lookout for my email!

Johnny_Opao
Userlevel 3

Hey there - It looks like there was some cropping issues with longer content on mobile. I’ve made some adjustments to the script to prevent this

J

I too have multiple buttons, but need different pop ups for each button (3). When I just add one it works. But when I add a second or third, it doesn’t.

Reply


Terms & ConditionsCookie settings