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

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.