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

  • Profile Image
    kennysmoov
    Asked 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

  • Profile Image
    BJoanna
    Answered 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
    kennysmoov
    Answered 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
    grade4pagasa
    Answered 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
    Ben
    Answered 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
    Ben
    Answered 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.