How to Create a Lightbox Form

Last Update: May 2, 2017

"Lightbox is a JavaScript technique used to display images and other web content using modal dialogs" -From Wikipedia 

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:

lightbox form

It's an elegant and easy way to share your forms with visitors.

1) Create or edit a form.

2) Click the Publish tab:

3)  Select Embed and then Lightbox:

4) Copy the provided code or click Customize to edit the Form's options:

- Title
- Form dimensions
- LightBox style
- Colors

5) Click Save Changes and then copy and paste the provided 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 the actual form ID. The class is very important for the lightbox to work when the image is click. 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.

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.


nilanka (March 05, 2013 at 12:51 AM)

send me sours cord

View Answer

ali (May 27, 2013 at 06:42 AM)


CSID (October 11, 2013 at 10:22 AM)


When I past the code on html widget in iweb, lightbox doesn't work... Why ?


View Answer

ArtworkHeroes (November 20, 2013 at 07:20 AM)

is it possible to let a lightbox widget appear, right when coming on a landing page, so without clicking anywhere?

View Answer

bluepearconsulting (November 24, 2013 at 07:17 PM)

how i can create a lightbox form with a button instead of text to open?

View Answer

urbanjunket (March 04, 2014 at 04:34 PM)

This did NOT work with my shopify site.

View Answer

Deepika (October 18, 2014 at 07:30 AM)

it stops my other scripts running

View Answer

SilkWayNavigator (September 17, 2015 at 06:35 AM)

So, what about WordPress? How does it work in WordPress?

View Answer

uhargude1 (December 16, 2015 at 04:47 AM)

please tell me how to embed lightbox onload automatically in web page

View Answer

bhumika (March 30, 2016 at 02:02 PM)

hi i want to add form like simple lightbox as popup form so when i clicked the button its open up that lightbox form ,but i dont know how to add to codeigniter.when i open that form it should open up codeigniter controller link with created view page with dynamic data.can u help me?

View Answer

mquerubin (August 24, 2016 at 09:57 PM)

any way to make the actual framing of the light box taller? form dimensions only affects within the frame.

View Answer

Stefanooo (October 30, 2016 at 03:51 PM)

the width and height of the lightbox can obviously only be specified in absolute-values (like e.g width='600px'), hence I remain unable to use lightbox on smartphones ! it seems I can only work with px-values - if this is true, I cannot use 'jotforms lightbox' at all.. that is a pity. Dear support: Can you advise how to use lightbox via jotform propperly for smartphones?

see screenshot:

View Answer

Vivian (January 05, 2017 at 07:05 PM)

Where do we insert the lightbox code on a Squarespace site?

View Answer

MiaSouv (April 05, 2017 at 05:17 PM)

Hi, These instructions worked for me. I can see the form as a pop-up lightbox. Now, how do I make it visible on each page. I'd like my clients to click on any of my products and automatically add them to the form. Is this possible. BTW, you guys are great.

View Answer

ANDROSS (April 17, 2017 at 11:30 AM)

Small typo,

"5) Click Save Changes and the copy and paste the provided code.

Should say, "and then", right? Cheers.

View Answer

Send Comment