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

    Image checkbox widget - limit number of selections

    Asked by art_crate on June 21, 2015 at 03:00 AM

    How can I limit the amount of selections for my image checkbox widget. ie 6 images, only allowing 3 to be selected.

     

    Thanks!

    Page URL:
    http://form.jotformpro.com/form/51708168374966

    checkbox image checkbox checkbox widget selected 3
  • Profile Image
    JotForm Support

    Answered by Boris on June 21, 2015 at 04:56 PM

    I believe that this option is not available for Image Checkboxes widget. We currently have this feature only on regular checkboxes:

    You can use the ordinary checkbox, which has this option, and set images onto it with a little bit of custom CSS. I have made a demo of this feature applied onto regular checkboxes, here:

    http://form.jotformpro.com/form/51716669616970

    What I have done is, I have created a regular checkbox field.

    In this checkbox field, I have looked at its Properties and noted its field number (112), and set the maximum allowed selections to 3.

    Then, I've used the number (112) to create my own custom CSS, and I have injected CSS into the form:

    #cid_112 .form-checkbox-item label {
      width: 195px !important;
      height: 195px !important;
    }

    #cid_112 .form-checkbox-item {
      clear: none !important;
      width: 225px;
    }

    #cid_112 .form-checkbox-item:nth-of-type(1) label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-01_zpsbd814ac8.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(2) label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-02_zpsdf65eca5.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(3) label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-03_zps65280e76.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(4) label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-04_zpsc4d78940.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(5) label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-05_zps0d03a602.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(6) label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-06_zpsa107f7e5.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(7) label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-07_zps94418628.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(8) label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-None_zpsb6cd0094.jpg") no-repeat center !important;
    }

    Please let us know if this workaround would satisfy your needs. Thank you.

  • Profile Image

    Answered by art_crate on June 21, 2015 at 05:31 PM

    Hi Boris,

     

    Thank you for the workaround. This will work :). I have some additional questions and stylings for this workaround. Is it possible to hide the numbers and selector circles (see attached image). And use a roll over (additional uploaded image - like I am using in my image radio widgets) to show a checked image?

    And is it possible to center the whole widget?

     

    Thanks!

  • Profile Image
    JotForm Support

    Answered by Boris on June 21, 2015 at 07:04 PM

    Yes, we can do all of that.

    To remove the label, you would use (note that 112 is the same number we have found out before; it may be different in your own form):

    #label_112 { display: none }

    To remove the 1, 2, 3 numbers, we would add font-size:0; to the label styling from before:

    #cid_112 .form-checkbox-item label {
      width: 195px !important;
      height: 195px !important;
      font-size:0;
    }

    To remove the small circles with check-marks, we would add the following:

    #cid_112 label:before, #cid_112 label:after {
      content: none !important;
    }

    And to add a special image when the box is checked, we would use input:checked + label in the selectors:

    #cid_112 .form-checkbox-item:nth-of-type(1) input:checked + label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-01-Selected_zpse33eb1ac.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(2) input:checked + label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-02-Selected_zps4a571f18.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(3) input:checked + label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-03-Selected_zps4c2740c2.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(4) input:checked + label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-04-Selected_zpse112c30a.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(5) input:checked + label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-06-Selected_zpsec233883.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(6) input:checked + label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-06-Selected_zps039a175a.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(7) input:checked + label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-07-Selected_zps879a92cf.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(8) input:checked + label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-None-Selected_zpsa56f6222.jpg") no-repeat center !important;
    }

    Here is a demo form, which I think you will like: http://form.jotformpro.com/form/51716742319962 (you can also clone it to take a closer look)

    Here is the full custom CSS used in this form, note that 112 may have to be replaced to match your own element:

    #cid_112 .form-checkbox-item label {
      width: 195px !important;
      height: 195px !important;
      font-size:0;
    }

    #cid_112 .form-checkbox-item {
      clear: none !important;
      width: 225px;
    }

    #cid_112 .form-checkbox-item:nth-of-type(1) label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-01_zpsbd814ac8.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(2) label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-02_zpsdf65eca5.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(3) label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-03_zps65280e76.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(4) label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-04_zpsc4d78940.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(5) label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-05_zps0d03a602.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(6) label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-06_zpsa107f7e5.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(7) label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-07_zps94418628.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(8) label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-None_zpsb6cd0094.jpg") no-repeat center !important;
    }

    #label_112 { display: none }

    #cid_112 label:before, #cid_112 label:after {
      content: none !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(1) input:checked + label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-01-Selected_zpse33eb1ac.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(2) input:checked + label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-02-Selected_zps4a571f18.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(3) input:checked + label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-03-Selected_zps4c2740c2.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(4) input:checked + label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-04-Selected_zpse112c30a.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(5) input:checked + label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-06-Selected_zpsec233883.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(6) input:checked + label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-06-Selected_zps039a175a.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(7) input:checked + label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-07-Selected_zps879a92cf.jpg") no-repeat center !important;
    }

    #cid_112 .form-checkbox-item:nth-of-type(8) input:checked + label {
      background: url("//i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/Chair-None-Selected_zpsa56f6222.jpg") no-repeat center !important;
    }

  • Profile Image

    Answered by art_crate on June 22, 2015 at 04:23 AM

    Boris,

    You rock! This is working perfectly for me. One last question, can you help me with the .css needed to center everything (screenshot below)?

  • Profile Image
    JotForm Support

    Answered by Boris on June 22, 2015 at 05:46 AM

    Thank you for your kind words. As all my colleagues, I simply try to do my best to help out our users.

    When it comes to centering these images, this can be done as well by using that number in our selector:

    #cid_112 { margin: 0 auto; }

    Before image:

    After image:

    I can see that the checkbox images are still a tiny bit to the left of the center, while their container (#cid_112) is centered. This is because the container is a few pixels wider than the three images, and the images have a float:left on them - which means that they try to go to the left within their container.

    If you would like to move these labels to the right a little bit, so that they appear visually in the center, you may want to try using this as well:

    #cid_112 label { float: right !important; }

    By the way, I think that this is a very beautiful form that you have created. :)

    Please let us know if you need further assistance, or kindly open a new thread for any other issues you may have with your forms. As always, we are happy to help.

  • Profile Image

    Answered by art_crate on June 24, 2015 at 03:05 AM

    Thanks for the help Boris, works great!