How to Create a Lightbox Form

March 21, 2022

A lightbox form is a window that pops up when visitors click on a link. It’s an elegant and easy way to share your forms with visitors. When the lightbox opens, it will overlay the page containing the link. It will look like the following:

Please follow the steps below to get started:

  1. Open your form in the Form Builder and click the Publish tab.
  2. Click Embed on the left navigation.
  3. Choose, and click the Lightbox option.
  1. On the next page, you may copy the code as is by clicking the green Copy Code button. Or, hit the Preview button to see how it looks like.

Customizing the Lightbox

If you want to customize the look and feel of the lightbox, click the Customize button as shown in the above screenshot. On the customization section, you have options to change the lightbox title, form dimensions, style, colors, and an option to open on page load or not.

Please don’t forget to click the Save Changes button to do just that, then copy the generated code.

Customizing the Call-To-Action to Use an Image

If you want to use an image instead of a button/link to trigger the lightbox to open, you have to replace the following line:

<a class="btn lightbox-{formID}" style="margin-top: 16px">
  {form_title}
</a>

…with the following:

<img src="{imageURL}" class="btn lightbox-{formID}">

You need to replace {formID} with your actual Form ID. It is the string of numbers at the end of the form URL. The same thing for the {imageURL}, you should also change it with the actual image URL. Please note that the class attribute’s value is very important for the lightbox to work when your visitor clicks the image.

Do you have any questions, suggestions, or feedback? Please post a comment below or head over to our support system and create a ticket.

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments:

  • Cheikh IDA DIOP
  • Barry Ho
  • Kevin Kubota
  • Eddison ong