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

    PopUp Image Enlargement

    Asked by Eestivesi2 on June 17, 2013 at 10:58 AM

    Hi,

    so as i understand i can make image bigger in my shop using:

    ".form-product-image{height: 90px; width: 90px; align: absmiddle;}"

     

    Is it possible to make the bigger image pop out when clicked.

    So customers could see larger pictures of items.

     

    Tnx, cheers

    height pop out product items
  • Profile Image

    Answered by jefreylandicho on June 17, 2013 at 11:11 AM

    Yes it might possible by integrating a javascript or jquery pop up for your image. If you could tell us where you have embedded the form or what form id you want this function added, we would much able to assist your further.

    If you have any other questions, please contact us again.

  • Profile Image

    Answered by Eestivesi2 on June 17, 2013 at 11:21 AM

    Thank you jefreylandich,

    using the form at: http://www.veekuller.ee/

    and the form name is: "veekuller+summa"

     

    Really looking forward for your solutions :)

  • Profile Image

    Answered by sidharth_kch on June 17, 2013 at 11:59 AM

    @Eestivesi2

    Sure we will work on this and get back to you.

    Thanks,

    Sidharth

  • Profile Image

    Answered by Eestivesi2 on July 05, 2013 at 06:41 AM

    Hey,

    any luck with my request?

    Thanks.

  • Profile Image
    JotForm Support

    Answered by jonathan on July 05, 2013 at 10:34 AM

    Hi,

    I apologize for the delays. My colleagues probably needs time to create this. They will further notify you when they have updates.

    For the meantime, I have an alternative suggestion. And you will need the ff:

    1. Embed the form to your website using its source code

    2. Use the Lightbox 2 library from here http://lokeshdhakar.com/projects/lightbox2/

    3. You will have to apply the Lightbox 2 javascript in your web page where you used the form

    My alternative suggestion was also base only on assumption that it is OK for you to use Lightbox 2 and lightbox image pop-up is what you you need in your form image to get bigger.

    Otherwise, ff my suggestion is not viable please inform us.

    --

    I will also try to create a test of this on this URL

    https://shots.jotform.com/jonathan/webtest/Order_Form_With_Pop_Up_Bigger_Image.html

    You may check later. I will notify you of my results also.

    Thanks.

  • Profile Image

    Answered by Eestivesi2 on December 23, 2013 at 10:36 AM

    Hey,

    any changes?

    The lightbox solution is kinda hard to pull off :)

    Thanks.

  • Profile Image
    JotForm Support

    Answered by jonathan on December 23, 2013 at 10:44 AM

    Hi,

    Please check Galleria Apps http://apps.jotform.com/app/galleria 

    I believe this can work on your requirements.

    Inform us if you need further assistance.

    Thanks.

  • Profile Image

    Answered by Eestivesi2 on December 27, 2013 at 04:09 AM

    Hi,

    thanks, I think this could work - but i have trouble setting it up.

    How can i integrate these two, the order form @ http://veekuller.ee/ and the galleri app to enlarge the images on click.

     

    Cheers

  • Profile Image
    JotForm Support

    Answered by EltonCris on December 27, 2013 at 06:35 AM

    @Eestivesi2

    Sorry but the app gallery does not work that way. It is only used to fetch & browse all the images uploaded to the form.

    I have here the following example that you might want to try. https://shots.jotform.com/elton/workaround/enlarge_image.html. This function is different, it only zooms in the image when you click on it, simply move out the mouse cursor from the image to zoom out.

    If you like this function, simply take your form source code and place this javascript code under it to enable the zoom image function. 

    If you need further assistance, let us know here. Thanks!

  • Profile Image

    Answered by Eestivesi2 on December 27, 2013 at 12:19 PM

    Thanks EltonCris,

    this is a perfect solution, but i'm having trouble adding this to my index.html page.

    I downloaded the source code and got the files: "css", "js" and ".html form page".

    How can i integrate all this to my index now?

     

    Sorry for bothering.

    Thanks

  • Profile Image
    JotForm Support

    Answered by ardy0689 on December 27, 2013 at 01:45 PM

    Thanks for replying back. Let me explain how would you use my colleague's custom script.

    I can see that you already downloaded the form source code.

    1. The next thing you should do is to edit the .html file you already have. You may open it on any text editor you choose like notepad.

    2. Copy the javascript contents that was provided to you by my colleague Elton and paste it between </form> and </body> tags then save it,

     

    3. Finally, host the files "CSS" folder, "JS" folder and the .HTML file to your website server.

    You can access your form to the path where you stored the files. For example: http://www.mydomain.com/myform/mycustomform.html

    Upon accessing the page, the custom script should work along with the form. You may also embed it anywhere or any page by linking to the HTML file using iframe to embed it.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="http://www.mydomain.com/myform/mycustomform.html" frameborder="0" style="width:100%; height:663px; border:none;" scrolling="no"></iframe>

    If you require further assistance, please do not hesitate to ask. Thank you

  • Profile Image

    Answered by Eestivesi2 on December 27, 2013 at 03:17 PM

    Thank you ardy0689,

     

    I did all according to your guide, but the form doesnt show up and i get an error like that:

    GET http://veekuller.ee/js/json2.js?v=3.1.1738 404 (Not Found)

     

    Site is here: http://veekuller.ee/

    What am i doing wrong?

    Thanks

  • Profile Image
    JotForm Support

    Answered by ardy0689 on December 27, 2013 at 04:53 PM

    Thank you for updating us. The error you are receiving is not the cause of your form not appearing. Normally, that error refers to an invalid path on your downloaded html file. To fix that please edit the HTML file and open it on a text editor.

    Then search this line:

    <script src="js/json2.js?v=3.1.1740" type="text/javascript"></script>

    Then replace it with this. You just change the path on the src=:

    <script src="//cdn.jotfor.ms/js/json2.js?v=3.1.1740" type="text/javascript"></script>

    This happens because the file json2.js is not downloaded along the source files and is missing. That should fix the error with the correct path. However, just like I mentioned earlier this is not the cause why your form is not appearing.

    The problem relies on the background image you have on your website. The <div> that contains the image has a z-index of 0 this makes it at the top most layer thus hiding anything and any element behind it. You can fix that by setting that to z-index:-1. Please see this video to show you the actual problem.

    Now, I am not sure if that particular style setting is generated automatically on your website or if this is a static HTML file in which you can edit the homepage, then please edit and search for this line:

    <div id="image3" style="position:absolute; overflow:hidden; left:0px; top:14px; width:1400px; height:706px; z-index:0"><img src="images/bg3.jpg" alt="" title="" border=0 width=1400 height=706></div>

    Then change its z-index:0 to z-index:-1 Watch out for the double quotes. Make sure that you do not accidentally delete it. After that save it and upload it again on your server.

    Please let us know if this issue persists. Thank you.

  • Profile Image
    JotForm Support

    Answered by EltonCris on December 27, 2013 at 06:26 PM

    @Eestivesi2

    We're trying to make this a little bit easier so we've come up with a widget for the product images that zooms in with lightbox effect. Check this out: http://widgets.jotform.com/widget/product_lightbox. Just add this widget to your form, and you're good to go.

    Demo: http://form.jotform.co/form/33604136500846?

    Let me know if this doesn't work for you. Thanks!

  • Profile Image

    Answered by Eestivesi2 on December 28, 2013 at 08:15 AM

    @EltonCris and @ardy0689,

    Wow, you werent kidding when you said you gonna make it easier.

    Thats amazing and works perfectly.

    This topic is now solved!! Thank you all for the help, the feedback here is awsome.

    Thank you very much.

  • Profile Image
    JotForm Support

    Answered by abajan on December 28, 2013 at 12:05 PM

    We're glad our team was able to help you achieve the desired functionality.

    If ever there's anything else JotForm related with which you need assistance, we'd be happy to guide you.


    Cheers and Happy New Year :)