JotForm User Guide / Create Forms /

How to Create a Lightbox Form

How to Create a Lightbox Form

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

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.


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.

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:
Contact JotForm Support:

Send Comment


  • inspiredwraps

    So, if I have an image on the form I need to customize it? Where do I put this code once I copy it??

  • inspiredwraps

    You need to dumb down the coding language for laypeople.

  • Alix

    Hello. I'm having trouble adding the lightbox button to my website. Here is the video explanation.

    Thanks for your help.

  • DestinationDelco

    How do I hide, get rid of the white background AREA up to the form itself? I want the popup lightbox edge to be the forms edge.

    Here's my testsite

  • PotomacPointWinery


    once we are done creating the Lightbox code, where do we paste it in to wordpress?


  • ACL67

    It was working fine, but now 2 lightboxes open, and the one on the front is empty. The full one is underneath.
    How do I stop the empty one to load, or at least how do I get the empty one to load behind?

  • laraaspire

    In Wix, you can't input a code. How am I supposed to embed the lightbox form?


    Small typo,

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

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

  • MiaSouv

    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.

  • Vivian

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

  • Stefanooo

    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:

  • mquerubin

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

  • bhumika

    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?

  • uhargude1

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

  • SilkWayNavigator

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

  • Deepika

    it stops my other scripts running

  • urbanjunket

    This did NOT work with my shopify site.

  • bluepearconsulting

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

  • ArtworkHeroes

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

  • CSID


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


  • ali


  • nilanka

    send me sours cord