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

  • kennysmoov
    Asked on February 9, 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

  • BJoanna
    Replied on February 9, 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. 

  • kennysmoov
    Replied on February 9, 2016 at 2: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 :-)

     

  • Ben
    Replied on February 9, 2016 at 5: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:

    I only want users to be able to pick one picture for a Cute Couple Contest Image 1 Screenshot 20

    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.

  • Ben
    Replied on February 9, 2016 at 5: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.