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.
How to display images as light boxAsked by wingsco on July 23, 2015 at 05:31 PM
Hi! I've managed to put an image inside the Hover Text Box of the images of my form, so I use that as a kind of "Light Box" effect. Everything is ok except for the fat that the box contour width doesn't follow the image size (480 px). i've tried this code in my"Inject Custom Css" field but with no results at all:
width: 480px !important; height: 480px; }
What can I do for set the Hover Text box size of the images for 480x480 px?
JotForm Support Manager
What you have done with the Hover text is very clever, however, we have a sort of widgets that might help better, all you need to do is to add a Purchase order or any other Payment tool. And add the product lightbox widget
Here is a demo form to see how it works: http://form.jotform.co/form/33604136500846
Here is a very detailed guide about mastering payment integrations:
Do get back to us should you need further help.
To be honest I've moved from purchase order to this option I'm using today. It's more simple to our customers and more flexible on the layout aspect.
I just need to adjust the size of the Hover Text box to fit the size of the image. All images have the same size (480x480px). How can I do that considering my first attempt on the custom css field (on the first message)?
Can you try inject the custom CSS code below in your form?
width: 500px !important;
height: 500px !important;
right: -500px !important;
To inject custom CSS code in your form, just follow this guide: How to Inject Custom CSS Codes.
Do let us know if you need further assistance.