-
kennysmoovAsked 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
Page URL: https://form.jotform.com/60393497145967 -
BJoannaReplied 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.
-
kennysmoovReplied 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 :-)
-
BenReplied 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:
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.
-
BenReplied 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.