Positioning a Formstack Lightbox Embed

Written by Formstack on August 4, 2011

Posted in Form Hacks

Today we are going to adjust the positioning of the lightbox tab.

The lightbox tab has 6 pre-defined positions. Those positions are located on you lightbox embed code in the highlighted area.

<!– Begin Lightbox –>
<div id=”fsLightbox1088520″ style=”display:none;”>
<div align=”right” style=”padding:5px;”><a id=”fsLightboxClose1088520″ href=”#” title=”close” style=”color:#000″>[close]</a></div>
<div style=”height:450px; padding-top:20px; overflow:auto;”>
<script type=”text/javascript” src=”http://www.formstack.com/forms/js.php?1088520-CgM2FbtmtO-v2″></script>
</div>
</div>

<script type=”text/javascript” src=”http://www.formstack.com/forms/js/lightbox.js”></script>
<script type=”text/javascript”>
var fsLightbox1088520 = new FSLightbox({form: 1088520, handleText: “Contact Form – COPY 2”, handlePosition: “right“,
handleImage: “http://www.formstack.com/forms/lightboxHandle.php?str=Contact+Form+-+COPY+2”
});
</script>
<!– End Lighbox –>

Your embed code will look different, and your position will most likely be “left“.
The six options that you can enter are: bottomRight, bottomLeft, topRight, topLeft, right, and left. All you need to do is take one of those options, say bottomRight, and put it where it says “left” in your embed code.

Here I have a screenshot of a tab in the bottomLeft position.

hankins-site

Have fun playing around with different positions and see which works best for you.

Enjoy!