How to Create a Lightbox Form

September 10, 2021

A lightbox form is a window that pops up when a visitor clicks on a link. It overlays the page containing the link and looks something like this:

It’s an elegant and easy way to share your forms with visitors. Follow the steps below to get started:

1. Go to your Form Builder and click the PUBLISH tab.

2. Click EMBED on the left nav then click LIGHTBOX.

3. On the next page, you may copy the code as is by clicking the green COPY CODE button.

4. Or, if you want to further customize the look and feel of the lightbox, click the CUSTOMIZE button. To see how it looks like, hit the PREVIEW button.

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.

5. Don’t forget to click the SAVE CHANGES button then copy the generated code.

Customizing the call-to-action to use an image:

Replace the following line:

<a class="btn lightbox-1234567890" style="margin-top: 16px"> Contact Form </a>

…with the following:

<img src="IMAGE URL HERE" class="btn lightbox-1234567890">

You need to replace 1234567890 with your actual Form ID. The class=”” value is very important for the lightbox to work when the image is clicked. The Form ID is the string of numbers at the end of the form URL. The IMAGE URL HERE should also be replaced with the actual image URL.

Demohttps://shots.jotform.com/elton/jotform_lightbox_demo.html

You’re done! How did it go? Were the instructions clear enough? How can we improve them? Please share your comments in the section below.

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: