Editing your Lightbox embed code

The Lightbox embed code is an embed code option that allows you to easily display the form in front of your site, dimming out the rest of the page. Here is an example of a Lightbox embed on a test site:

 

  

 

You can find the Lightbox embed code option by going to the Form > Publish > Embed Form page.

 

In order to edit specific items on the Lightbox embed code, you will need to edit the code that you will see in the second box. In this article, we're going to go over how to make some of those common edits.

 

How do I move the Lightbox tab?

 

When you embed the Lightbox embed you will see a tab. The tab is what users will click to see the Lightbox. In the image above you can see the tab in the top left in the background. This is where the Lightbox embed code has the tab shown by default, however, we can edit the code to make it appear in the bottom right, bottom left, top right, top left, right or left.

 

For our example, we are going to choose to make the tab appear on the right. You can see an example of a Lightbox embed below. This is what the code looks like by default. We are going to edit the area that is bolded.

 


<!-- Begin Lightbox -->
<div id="fsLightbox2235559" class="fsLightbox" style="display:none;">
   <div align="right" style="padding-bottom:5px;">
       <a id="fsLightboxClose2235559" href="#" title="close"><img src="https://jk.formstack.com/forms/images/2/cross.gif" border="0" /></a>
   </div>
   <div id="fsLightboxContent2235559" style="height:450px; width:650px; padding-top:0px; overflow:auto;">
       <script type="text/javascript" src="https://jk.formstack.com/forms/js.php/untitled_form_273"></script>
       <div style="text-align:right; font-size:x-small;"></div>
   </div>
</div>

<script type="text/javascript" src="https://jk.formstack.com/forms/js/lightbox.js"></script>
<script type="text/javascript">
   var fsLightbox2235559 = new FSLightbox({
       form: 2235559,
       handleText: "LightboxFun",
       handlePosition: "left",
       handleImage: "https://jk.formstack.com/forms/lightboxHandle.php?str=LightboxFun",
       handle: null
   });
</script>
<!-- Use fsLightbox2235559.show() or set handle: "ID" to open lightbox without using predefined handle -->
<!-- End Lightbox -->

 

All we have to do is edit the "left" to "right" and the tab will be on the right.

 

 

The option you add in quotes has to be specific. You can find the specific option you need to use for each direction below:

 

"bottomRight", "bottomLeft", "topRight", "topLeft", "right", "left"

 

How do I edit what it says on the label?

 

You can edit the code to edit what is shown on the label for the Lightbox. By default, it will use the name of the form. In order to change what shows on the label, we need to change the string at the end of the handle image URL. "handleImage: "https://jk.formstack.com/forms/lightboxHandle.php?str=LightboxFun"

 

In the example below, we changed the label name to  "CLICK HERE". You can see that edit by looking for the bold edit.

 


<!-- Begin Lightbox -->
<div id="fsLightbox2235559" class="fsLightbox" style="display:none;">
   <div align="right" style="padding-bottom:5px;">
       <a id="fsLightboxClose2235559" href="#" title="close"><img src="https://jk.formstack.com/forms/images/2/cross.gif" border="0" /></a>
   </div>
   <div id="fsLightboxContent2235559" style="height:450px; width:650px; padding-top:0px; overflow:auto;">
       <script type="text/javascript" src="https://jk.formstack.com/forms/js.php/untitled_form_273"></script>
       <div style="text-align:right; font-size:x-small;"></div>
   </div>
</div>

<script type="text/javascript" src="https://jk.formstack.com/forms/js/lightbox.js"></script>
<script type="text/javascript">
   var fsLightbox2235559 = new FSLightbox({
       form: 2235559,
       handleText: "LightboxFun",
       handlePosition: "left",
       handleImage: "https://jk.formstack.com/forms/lightboxHandle.php?str=CLICK+HERE",
       handle: null
   });
</script>
<!-- Use fsLightbox2235559.show() or set handle: "ID" to open lightbox without using predefined handle -->
<!-- End Lightbox -->

 

 

The end result from the code above will look like this:

 

 

How do I change the color of the Lightbox tab?

 

The Lightbox tab is an image. This means in order to edit the color of the image you will need to replace the image entirely with your own image or remove the image entirely and edit the tab using just CSS.

 

You can change the image by replacing the

 

 handleImage: "https://jk.formstack.com/forms/lightboxHandle.php?str=CLICK+HERE",

 

with your own image.

 

We can also remove the image and edit the tab with just CSS on the form. In the example below we have removed the image.

 

 


<!-- Begin Lightbox -->
<div id="fsLightbox2235559" class="fsLightbox" style="display:none;">
   <div align="right" style="padding-bottom:5px;">
       <a id="fsLightboxClose2235559" href="#" title="close"><img src="https://jk.formstack.com/forms/images/2/cross.gif" border="0" /></a>
   </div>
   <div id="fsLightboxContent2235559" style="height:450px; width:650px; padding-top:0px; overflow:auto;">
       <script type="text/javascript" src="https://jk.formstack.com/forms/js.php/untitled_form_273"></script>
   </div>
</div>

<script type="text/javascript" src="https://jk.formstack.com/forms/js/lightbox.js"></script>
<script type="text/javascript">
   var fsLightbox2235559 = new FSLightbox({
       form: 2235559,
      handleText: "CLICK HERE",
       handlePosition: "left",
       handle: null
   });
</script>
<!-- Use fsLightbox2235559.show() or set handle: "ID" to open lightbox without using predefined handle -->
<!-- End Lightbox -->

 

 

In the example above, you can see that the handleImage is completely removed and the handleText, which is in bold, will now set the Label on the tab. Good to note: When you remove the image, the tab text becomes horizontal. Once we have removed the image, like we have above, we can add CSS to the form to edit the Lightbox tab.

 

For example, if you add the CSS below to your form Theme the background of the Lightbox would be blue:

 

.fsLightboxHandle{

    background: blue !important;

}

 

You must add !important. This is because the default settings are inline in the HTML. If you don't know how to add CSS to your Theme. You can click the Themes tab (lower-left) and click the "Change" button to either create a new Theme or edit an existing one.  Next, click the "Open Advanced CSS Editor" button and add your code to the CSS body on the left side of the Form.

 

Here is our end result with the Lightbox code above and the CSS option that is also above.

 

 

Can I use a link instead of the tab?

 

Yes, you can! You can add a link to your site and have that link open the Lightbox instead of the tab. You need to edit add a link to your site as well as edit the embed code for the Lightbox.

 

First, you will want to add a link like the one below above your form embed code on the site.

 

<a onclick="javascript:fsLightbox2235559.show()" ID="light-box_link">This is a link!</a>

 

You will want to replace "fsLightbox2235559.show()" with the option from your embed code. This can be found at the bottom of the code.

 

For example, at the bottom of the code we have been using it says:

 

<!-- Use fsLightbox2235559.show() or set handle: "ID" to open lightbox without using predefined handle -->

 

This is why we use "fsLightbox2235559.show()" this value will defer for each form so make sure to add your version.

 

Then, you will want to edit the Lightbox embed code to tell it to use the link instead of the tab. Below we have our Lightbox embed, we have edited the option that is bolded.

 

 


<!-- Begin Lightbox -->
<div id="fsLightbox2235559" class="fsLightbox" style="display:none;">
   <div align="right" style="padding-bottom:5px;">
       <a id="fsLightboxClose2235559" href="#" title="close"><img src="https://jk.formstack.com/forms/images/2/cross.gif" border="0" /></a>
   </div>
   <div id="fsLightboxContent2235559" style="height:450px; width:650px; padding-top:0px; overflow:auto;">
       <script type="text/javascript" src="https://jk.formstack.com/forms/js.php/untitled_form_273"></script>
   </div>
</div>

<script type="text/javascript" src="https://jk.formstack.com/forms/js/lightbox.js"></script>
<script type="text/javascript">
   var fsLightbox2235559 = new FSLightbox({
       form: 2235559,
       handleText: "LightboxFun",
       handlePosition: "left",
       handleImage: "https://jk.formstack.com/forms/lightboxHandle.php?str=LightboxFun",
       handle: "light-box_link",
   });
</script>
<!-- Use fsLightbox2235559.show() or set handle: "ID" to open lightbox without using predefined handle -->
<!-- End Lightbox -->

 

The "light-box_link" option tell the Lightbox to open with the link above.

 

The end product will be a Lightbox that appears when you click on the link.

 

Was this article helpful?
0 out of 3 found this helpful

Comments

3 comments
  • 3000

    1
  • 3000

    0
  • 2235559

    0

Please sign in to leave a comment.