User Guide

 

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.

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.

Send Comment

15 Comments...

  • ANDROSS

    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: http://i.snag.gy/XxAlTM.jpg

  • 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

    Hello,

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

    Thanks.

  • ali

    nice

  • nilanka

    send me sours cord