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

    Can we choose between two images but hide the radio button where just the images show?

    Asked by surf_town on October 09, 2013 at 11:57 AM

    So there is image A and B on the first page of a multipage form. The images are side by side (two colums) but I want to hide the radio button where just the image highlights when selected, then the user can choose next and continue the form with conditional logic applied. So I guess the question is can we set the visibility to "hidden" on the actual radio-button but still be able to select between two images?

    kind regards,

    JS

    Page URL:
    notonaformyet,justaquestion

    hidden next selected select
  • Profile Image
    JotForm Support

    Answered by ashwin_d on October 09, 2013 at 12:35 PM

    Hello JS,

    If I understand your requirement correctly, you want to display the image with checkboxes and apply the conditional logic based on the checkbox selection. You also want these checkboxes to be hidden. Is that correct?

    Unfortunately, there is no in built feature to achieve your requirement. You can use custom css to hide the checkboxes but in that case your condition logic will not work because you will not be able to change the checkbox selection.

    Workaround: I believe you can achieve your requirement by adding custom javascript in your form's source code. Please be informed that if you use your form's source code to embed your form, any changes made to your form in JotForm editor will not reflect in your form. You will have to download your form's source code again and merge the custom javascript code.

    Do get back to us if the workaround is acceptable to you and I will be happy to give you a workaround. You will have to complete your form before I can provide custom workaround to you.

    Thank you!

  • Profile Image

    Answered by surf_town on October 09, 2013 at 01:25 PM

    Correct. I went ahead and made the form that I want with two radio button images. On most browsers and smartphones, simply touching the image is the same as selecting/deselecting the radio-button. So I should be able to hide the actual radio-button and still be able to make a selection and apply conditional logic, no?

    As far as formatting is concerned, what size/settings/css should I use to make the images sit side-byside (2 columns) on a desktop or tablet, but sit over-under (1 column) on a smartphone.

    Here is the form: http://form.jotformz.com/form/32814166401649

  • Profile Image
    JotForm Support

    Answered by ashwin_d on October 09, 2013 at 01:58 PM

    Hello JS,

    I am going to work on your requirement now. 

    I will get back to you with the workaround in a while. 

    Thank you!

  • Profile Image

    Answered by pinoytech on October 09, 2013 at 02:13 PM

    Hi,

    I've clone your form and made some workaround on it for you to check if this is something you want to achieve. http://www.jotformpro.com/form/32815028539962

    Feel free to contact us again!

    Thanks,

  • Profile Image

    Answered by surf_town on October 09, 2013 at 02:38 PM

    Hey there, that's exactly what I am looking for. Going to have a look at your code now and see how you did it. Thanks a lot!

  • Profile Image

    Answered by surf_town on October 09, 2013 at 02:40 PM

    Oops, I thought you made a clone on my forms page. So what is the trick to making one similar to your example?

  • Profile Image

    Answered by pinoytech on October 09, 2013 at 02:51 PM

    Hi,

    Here's what I did on the clone form.

    1. Spread the columns of radio button two to 2.

    2. I've injected this custom css into the form: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    input[type="radio"]+label img {

    padding: 1px;

    width: 150px !important;

    height: 100px !important;

    }

    .form-multiple-column .form-radio-item {

    width: 180px;

    }

    #input_30_0.form-radio, #input_30_1.form-radio {

    display: none;

    }

    @media only screen

    and (min-device-width : 320px)

    and (max-device-width : 480px) {

    .form-all {

    padding-top: 0px !important;

    }

    input[type="radio"]+label img {

    padding-top: 20px;

    }

    }

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image

    Answered by surf_town on October 09, 2013 at 04:51 PM

    Thanks a lot, that's exactly what I was looking for.

  • Profile Image

    Answered by pinoytech on October 09, 2013 at 04:57 PM

    It's my pleasure! If you need our assistance again, please feel free to contact us at anytime.

    Have a nice day!