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:
- 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'
-
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.
-
Now style your box, drop in a form, and add any other objects into the box you wish to be displayed in the lightbox.
-
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
-
Set the placement of this script to ‘head’.
-
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.
-
Check the box on the bottom left of your javascripts dialog labelled ‘jQuery.FancyBox (1.3.4)'
-
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');
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