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

    How to add image slider to my form like jCarousel?

    Asked by ahinch22 on July 08, 2013 at 11:06 AM

    Is it possible to add an image slider/carousel? (like the one we all know from itunes/os x cover flow)

    I'm trying to give users a way to preview images before selecting one without taking up a ton of real estate on my form. Using conditions to have images appear individually is my backup plan - but I'd like our users to be able to so scan all 24 images without clicking 24 times.

     

    a) Has anyone done this?

    b) Are a large % of people going to have difficulty viewing it? Or can it be done with fairly universal coding...

     

    Thanks,

    Andy

    image slider add an image preview thanks
  • Profile Image
    JotForm Support

    Answered by EltonCris on July 08, 2013 at 12:33 PM

    Hi Andy,

    It can be done with extra coding. There are plenty of image slideshows around, yes jCarousel is a good one. We will try to provide you example so you can construct on your own. This requires using your form source code: How to get your Form Source Code and inject the jCarousel script. This may take a while before we can get back to you. You can also refer to jCarousel documentation for a better instruction. http://sorgalla.com/projects/jcarousel/

    We will just update you here when it's ready. Thanks!

  • Profile Image

    Answered by ahinch22 on July 08, 2013 at 12:40 PM

    Thank You very much. If it's too much trouble don't worry about it— chances are it'd be above my coding skill level. I've constructed a solution in the meantime and my conditions are not working the way I'm intending...

    I'm trying to get it so that only one image shows at a time. In some cases it does, but not at first.

    If you visit this form:

    http://form.jotform.us/form/31826399228161

    You'll see that a bunch of images appear at once, however— if you select an option (v4 for example) - the desired effect takes place. What condition(s) do I have to set so that image v1 is the only image displayed at first?

     

    I've tried many combinations of conditions - as well as preselected options to hide the other 23 images - but I just cant get it to work.. any ideas?

     

    Thanks again,

    Andy

  • Profile Image
    JotForm Support

    Answered by EltonCris on July 08, 2013 at 02:31 PM

    Hi Andy,

    Your form condition works fine here: http://form.jotform.us/form/31826399228161

    It shows only 1 image everytime I load the form here. Here's my test: http://screencast.com/t/v5YlByWfYOu

    I would suggest to try clearing your browsers cache and cookies and recheck again your form. That might help.

    Thanks!

    P.S. We can work on the script sample. We'll use your form as example so you will have it ready for embedding. We'll update you later.

  • Profile Image

    Answered by ahinch22 on July 08, 2013 at 02:43 PM

    That'd be awesome! Thanks again

     

    -Andy

  • Profile Image
    JotForm Support

    Answered by EltonCris on July 09, 2013 at 09:56 AM

    Hi Andy,

    Ok, here's what you need to do.

    1. Clone this form: http://form.jotformpro.com/form/31893408704963?

    Guide: How to Clone a Form from a Web Page

    I have cloned your original form here and made some changes on the conditions so I can easily apply the jCarousel without affecting other field conditions.

    2. Download this jCarousel Form Files here: https://shots.jotform.com/elton/form_jcarousel/jcarousel%20form.zip. Everything here is ready, you can check that in form.html. What you just need to do is to replace the formID on the form.html source code. To do that, follow these steps:

    a. Open the form.html into notepad or any other html editing tools you have,

    b. Press Ctrl+H (shortcut for Replace) find 31893408704963 and replace it with your cloned formID.

    3. Save it and preview the form.html. You can also copy it's source code and embed it to your page. Make sure the js and skins folders are included/uploaded in your server.

    Demo: https://shots.jotform.com/elton/form_jcarousel/form.html

    Thanks!

  • Profile Image

    Answered by ahinch22 on July 11, 2013 at 09:36 AM

    Thanks again,

    I think I've followed most of the steps correctly— and I'm probably overlooking an obvious answer to this next one... but how do I upload the adjusted source code to my cloned jotform?

     

    Gratefully,

    Andy

  • Profile Image
    JotForm Support

    Answered by Welvin on July 11, 2013 at 11:50 AM

    Hi Andy,

    You don't have to upload back the modified source codes to Jotform Builder - that is not possible. You'll have to embed the modified source codes to your website. Used the modified form source codes and paste it to your website HTML Editor.

     

    Thanks