What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    CSS code for image hover or image Lightbox

    Asked by enetknowhow on April 13, 2016 at 05:32 AM

    I need a CSS code for image hover or image Lightbox .
    show my sample pictures down.

    Thanks

    Page URL:
    https://form.jotform.me/60560641093451

    Screenshot
    css code CSS lightbox
  • Profile Image

    Answered by Ben on April 13, 2016 at 08:59 AM

    While you could enlarge the image field when clicked on it, it would not be possible to show the same within the image lightbox.

    What could be done - and it is a sort of a dirty hack, is to use payment tool - like PayPal Standard, add the images as free products and then add Product Lightbox widget to your form.

    This form shows what I mean: https://form.jotform.com/61033681511951

    That would allow you to display the same within the lightbox - but it would not be possible to do the same for image widgets.

    The only other way that you could do something like that would be to grab the source code of your form and add the images manually to the checkbox / radio buttons followed by the code for lightbox.

  • Profile Image

    Answered by enetknowhow on April 13, 2016 at 09:59 AM

    Thanks.

    You have a sample code for your idea?

    (The only other way that you could do something like that would be to grab the source code of your form and add the images manually to the checkbox / radio buttons followed by the code for lightbox.)

     

  • Profile Image

    Answered by enetknowhow on April 13, 2016 at 10:24 AM

    ...add the images as free products and then add Product Lightboxwidget to your form....

    I try it bud  it does not work, see my form!

  • Profile Image

    Answered by Ben on April 13, 2016 at 11:59 AM

    This form actually shows how it would look if you add the images to the payment processing tool: https://form.jotform.com/61033681511951

    Now it is however needed to add the following widget to the form as well: Product Lightbox widget.

    And the following CSS:

    .form-product-item.hover-product-item input, .form-product-item.hover-product-item label {
        display: none;
    }
    .form-product-image {
        width: 200px;
    }
    [data-type="control_paypal"] br {
        display: none;
    }

    In regards to the lightbox - this would be outside of the JotForm and as such we can only suggest hiring a developer to create something like that for you, or to create it by yourself.