Display your Unbounce form or any inline content in a lightbox without creating a new page (Two step opt-in form)

ub-inline-content-lightbox-min.md

Display your Unbounce form or any inline content in a lightbox without creating a new page. This can be used to create a two step opt-in form

Example page:

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

Steps:

1. Drop in a button (if you haven’t already) which will act as the trigger that opens up your form lightbox. While this button is selected find it’s ID under the ‘advanced’ tag. Take note of this ID.

ex. ‘#lp-pom-button-10'

2. Next drop in a box from the left widgets menu. This box will act as the actual container and content that is displayed in your lightbox. You’ll also want to take note of it’s ID.

3. Now style your box, drop in a form, and add any other objects into the box you wish to be displayed in the lightbox.

4. Grab the code below:

<script>
 
  //Unbounce inline content lightbox v2.0
  //ubContentLightbox('boxContainingForm', 'buttonToTriggerLightbox');
  
  //boxContainingForm is the ID of the box that contains your form
  //buttonToTriggerLightbox is the ID of the button that will trigger the form lightbox
  
  ubContentLightbox('#lp-pom-box-113', '#lp-pom-button-29');
  //ubContentLightbox('#lp-pom-box-120', '#lp-pom-button-121');
  
  document.write('<style type="text/css"> #fancybox-outer {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}</style>');function ubContentLightbox(boxContainingForm,buttonToTriggerForm){document.write('<style type="text/css">'+boxContainingForm+'{display:none}</style>');$(function(){var boxWidth=$(boxContainingForm).width();var boxHeight=$(boxContainingForm).height();var borderWidthTop=$(boxContainingForm).css('border-top-width');var borderWidthBottom=$(boxContainingForm).css('border-bottom-width');var borderWidthLeft=$(boxContainingForm).css('border-left-width');var borderWidthRight=$(boxContainingForm).css('border-right-width');var borderRadius=$(boxContainingForm).css('border-top-left-radius');var borderHeight=parseFloat(borderWidthTop)+parseFloat(borderWidthBottom);var borderWidth=parseFloat(borderWidthLeft)+parseFloat(borderWidthRight);var borderRadiusValue=parseFloat(borderRadius);boxWidth=parseFloat(boxWidth)+borderWidth;boxHeight=parseFloat(boxHeight)+borderHeight;if(borderRadiusValue>0){$('#fancybox-bg-w, #fancybox-bg-nw, #fancybox-bg-sw, #fancybox-bg-s, #fancybox-bg-se, #fancybox-bg-e, #fancybox-bg-ne, #fancybox-bg-n').css('display','none');$('#fancybox-outer').css('background-color','transparent')}$(buttonToTriggerForm).attr("href",boxContainingForm);$(boxContainingForm).css({'top':'0','left':'0',});$(buttonToTriggerForm).fancybox({'autoDimensions':false,'width':boxWidth,'height':boxHeight,'autoScale':false,'padding':0,'margin':0,'onStart':function(){$(boxContainingForm).css('display','table')},'onComplete':function(){$(boxContainingForm).parent().css('display','table')},'onClosed':function(){$(boxContainingForm).css('display','none')}});$(boxContainingForm).addClass('lp-pom-root')})}$(function(){function triggerFormEvent(){if(lp.jQuery('form').valid()==true){$.fancybox.close()}}$('.lp-pom-form .lp-pom-button').click(function(){triggerFormEvent()});$('.lp-pom-form').keypress(function(event){if(event.which==13){event.preventDefault();triggerFormEvent()}})});
  
  /**
    * Do not remove this section; it allows our team to troubleshoot and track feature adoption. 
    * TS:0002-13-014
  */

</script>

copy this entire script and add it as a new script in the javascripts manager on the bottom left of the builder

5. Set the placement of this script to ‘head’.

6. You’ll need to make two small adjustments to the script:

Modify the value for '#lp-pom-box-113' and give it the ID of the box you took of earlier.

Do the same with '#lp-pom-button-29' by replacing it with your buttons ID.

7. Check the box on the bottom left of your javascripts dialog labelled ‘jQuery.FancyBox (1.3.4)'

8. Click ‘done’

That’s it! Simply save and preview your page. While the box itself displays in the builder, it’s not visible on the live page until you click your button trigger.

##Additional notes

If you need multiple buttons to open the same lightbox content separate their IDs by commas.

ubContentLightbox('#lp-pom-box-113', '#lp-pom-button-29, #lp-pom-button-30');

If you want to different buttons to open different content, simply add another copy of the snippet 'ubContentLightbox'

ubContentLightbox('#lp-pom-box-113', '#lp-pom-button-29');
ubContentLightbox('#lp-pom-box-219', '#lp-pom-button-50');

Hi Johnny,

Works like a charm, thanks so much! A question on the implementation- I would like to track 'conversions' which in my case mean consumers clicking on the button and seeing the lightbox. What would you recommend I implement in the lightbox? Custom html?

Is use Google Analytics for conversion tracking. How would I be able to setup a regular expression with this lightbox?

Apologies for all the questions. But really, any help here would be amazing!

Thanks,
Willem

Hey Willem - Sorry I didn't see this reply until now.

You can't track the button as a goal on Unbounce, but you can track this as a event in GA. You should then be able to set a 'event goal'. You'll then specify the event components (Category, Action, Label) as the requirements to fulfill the goal.

Hope that helps!

Thanks much Johnny! That worked great! Will this be able to pass UTMs?

Thanks for this writeup. I was able to get it to work with one small hitch. When I submit the form that appears in the fancybox, the confirmation page (which is a separate page, not a conf. dialogue) appears inside the fancy box instead of in the parent window. Any suggestion on how to fix this? Here is the page link if you want to see what I mean: http://lp.claimingstrategies.com/future-proofing-your-benefits-1/

Everything went smoothly, Johnny, until I previewed the page.
Then, all of my page content got squashed up into a smal box on the top left of the display window. With a bit of experimentation, I realised I had slightly overlapped the form box onto another box.

But now, I have a more puzzling problem: I have four buttons, all activating the same fancybox, containing the same form, with all their IDs listed in the JavaScript. But only the first (original) one of them displays the form - all the others just bring up a blank lightbox.

I'm sure I'm doing something totally noob here, but would very much appreciate any hints you might be able to give me.

]Later: tried duplicating the one button that worked, then adding its ID to the list in the script: nada. I'll try taking the script out of the script library, where I put it for safe keeping, but did not apply it to any pages, just to see if it has somehow 'leaked' . . . No: absolutely no difference.]

Later still . . . cluched at another straw in deadline-driven-desperration - and it turned out to work!

ubContentLightbox('#lp-pom-box-129', '#lp-pom-button-126');
ubContentLightbox('#lp-pom-box-129', '#lp-pom-button-140');
ubContentLightbox('#lp-pom-box-129', '#lp-pom-button-141');
ubContentLightbox('#lp-pom-box-129', '#lp-pom-button-142');
ubContentLightbox('#lp-pom-box-129', '#lp-pom-button-143');

Who'd have thought?!

Cheers,

Mark

Hey Johnny, Thanks alot for this. I just used it on one of my pages and it worked perfectly!

Hello Johnny, thank you for the snippet. Is there a way to show same form inline in the content AND in the lightbox? When I set the script it's removing the box with the form from a page after displaying it in the lightbox.

Hi, I tried the method here on a sticky footer in Unbounce, but a the behavior that occurs when someone presses the initial button (in this example, "lp-pom-button-29"), they are sent to a bigger version of the sticky footer- not to the lightbox (lp-pom-box-113). Does anyone know why this is happening? Thanks much for any help in advance.