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

    I only want users to be able to pick one picture for a "Cute Couple Contest"

    Asked by kennysmoov on February 09, 2016 at 10:56 AM

    How do I make it so that once they pick one winner, they no longer have the option to pick someone else?

     

    https://form.jotform.com/60393497145967

     

    HELP as soon as possible.

     

    Thanks

    Page URL:
    https://form.jotform.com/60393497145967

    picture JotForm
  • Profile Image
    JotForm Support

    Answered by BJoanna on February 09, 2016 at 12:31 PM

    I would suggest you to use Image Radio Buttons widget. Inside of this guide you can find out how to add widget to your form: http://www.jotform.com/help/252-How-to-Add-a-Widget-to-your-Form 

    This way your users will be able to select only one option. 

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image

    Answered by kennysmoov on February 09, 2016 at 02:27 PM

    I got the part on adding the Widget and the Pics to the Widget.

    But now how does a person pic a picture to vote for their favorite contestant.

    That part I can't figure out.

    Please Help :-)

     

  • Profile Image

    Answered by grade4pagasa on February 09, 2016 at 02:58 PM

    Hi kennysmoov

    Here's an alternative solution. You could try the Image Picker widget. Here's a sample form I did. 

    Here, voters can only choose 1 photo for their favorite contestant simply by clicking on the photo they like. Also, the Submit button will only be enabled if a photo is selected. 

    One drawback for both my alternative solutions is you have to right click > open image in new tab to see the actual size of the photos. It would be nice if there's a lightbox widget that can be used here.

    Feature Request to the Dev Team: please create a lightbox widget for photos. Currently only the Product lightbox is available.

    The Image Radio button widget suggested by BJoanna is the easiest to configure. Here's a sample form for that.

    Hope this helps. 

    - Randy

     

  • Profile Image

    Answered by Ben on February 09, 2016 at 05:33 PM

    Than you Randy for additional suggestion and nice samples of both. :)

    I believe that the Image Picker widget sample could be enriched with a sort of lightbox feature by adding a CSS like this one:

    .imageContainer.blocks:hover .divimg {
        display: block;
        height: auto !important;
        min-width: 400px;
        position: relative;
    }
    .imageContainer.blocks:nth-child(4):hover .divimg, .imageContainer.blocks:nth-child(5):hover .divimg, .imageContainer.blocks:nth-child(9):hover .divimg, .imageContainer.blocks:nth-child(10):hover .divimg {
        left: -200px;
    }
    .imageContainer.blocks:nth-child(6):hover .divimg, .imageContainer.blocks:nth-child(7):hover .divimg, .imageContainer.blocks:nth-child(8):hover .divimg, .imageContainer.blocks:nth-child(9):hover .divimg, .imageContainer.blocks:nth-child(10):hover .divimg {
        top: -400px;
    }

    This is the clone of your form with the CSS added: https://form.jotform.com/60396741735967

    Similar could be applied to the Image Radio button widget as well with slight alterations.

    I personally think that both are good, but that image radio button widget offers a clearer confirmation of what was selected.

    Now in regards to your question @kennysmoov:

    But now how does a person pic a picture to vote for their favorite contestant.

    I believe that you got it all set up, but would like to show the URL to people.

    To do that, you can simply click on the Preview button in the toolbar:

    As you do, you will see the preview screen shown to you and the button to open the form in a new tab.

    Clicking on that button will give you the link that you can share with others.

    Alternatively, you can follow these simple steps to send an email with the link in it: How to Share Form using Email Link

    @Randy, I have moved your request for a lightbox widget to a new thread here: http://www.jotform.com/answers/768468 where I will reply again shortly and raise it up for consideration.

  • Profile Image

    Answered by Ben on February 09, 2016 at 05:35 PM

    Small update first. The CSS above copied 400 for some reason, it is 200px for top.

    This is the correct version - the one in the form:

    .imageContainer.blocks:hover .divimg {
        display: block;
        height: auto !important;
        min-width: 400px;
        position: relative;
    }
    .imageContainer.blocks:nth-child(4):hover .divimg, .imageContainer.blocks:nth-child(5):hover .divimg, .imageContainer.blocks:nth-child(9):hover .divimg, .imageContainer.blocks:nth-child(10):hover .divimg {
        left: -200px;
    }
    .imageContainer.blocks:nth-child(6):hover .divimg, .imageContainer.blocks:nth-child(7):hover .divimg, .imageContainer.blocks:nth-child(8):hover .divimg, .imageContainer.blocks:nth-child(9):hover .divimg, .imageContainer.blocks:nth-child(10):hover .divimg {
        top: -200px;
    }

    - This goes into widget CSS.