Skip to main content
Contact Support

Editing your Lightbox embed code

Ryan J.
Updated

Include a form to your site through the Lightbox embed code to display the form in front of your site, dimming out the rest of the page. This spotlight-feature embed code may be found under the form’s Share tab in the Website Embed section: 


sharevialightbox.png


NOTE: Formstack Support is limited to troubleshooting hosted forms (Forms hosted by Formstack) and cannot troubleshoot third-party sites. Review with your in-house dev team if issues occur with embedded forms on your site. 

 

Move the Lightbox tab

When you embed the Lightbox-coded form, your site will populate a tab where the end-user can select to see the form. This tab can be moved with adjustments to the code to appear in the bottom right, bottom left, top right, top left, right or left.

Locate “handlePosition: “x” in the code and change the location to the desired spot: 

  • Bottom right: “bottomRight”
  • Bottom left: “bottomLeft”
  • Top right: “topRight”
  • Top left: “topLeft”
  • Left: “left”
  • Right: “right”

 

Edit the label text

By default, the tab will use the name of the form; however, you can edit the code to change the label name. 

In order to change what shows on the label, change the string at the end of the handle image URL. "handleImage: "https://jk.formstack.com/forms/lightboxHandle.php?str=xnamex""

 

Change the color of the Lightbox tab

 In order to edit the color of the Lightbox tab 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 code with your own image: 

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

 

Remove the Lightbox tab image

The Lightbox image may be removed from the Lightbox tab by deleting the handleImage line of CSS code: 
 

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


When the handleImage is removed, the handleText will become the label on the Lightbox tab. 

NOTE: When an image is removed, the text on the tab defaults to horizontal.

 

Alternatives to a tab

In place of a tab, you can add a link to your site to open the Lightbox.  

Above your form embed code on your site, add a link like the example below: 

This is a link!


There, replace "fsLightbox2235559.show()" with the option from your embed code. This can be found at the bottom of the code.

Then, edit the Lightbox embed code to tell it to use the link instead of the tab:

 

handle: "light-box_link",
  });

Related articles