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

    how do I put radio buttons under multiple images

    Asked by lilylouboutique on May 04, 2013 at 08:55 PM

    Hi

    Ideally I was going to do a form with colapsable sections, i need to have 2 sections, one that list 20 hair styles, and one that lists 6 colour.

    I have 20 styles and have 20 thumbnails - I would like radio buttons under each thumbnail, ultimately the user needs to pick one hairstyle. I thought that I could populate 5 rows of 4. A row of images and then a row of button, a second row of images and then a row of buttons ect.... but it seems as tho the radio buttons can only commit to a choice if they are altogether. 

    Is there a way to do this please?

    radio buttons sections colour
  • Profile Image

    Answered by jeanettebmz on May 04, 2013 at 11:57 PM

    You can try separate radio buttons or separate checboxes

    You might also would like to try SHOW/HIDE conditional logics

    Let us know if you still need further assistance

  • Profile Image

    Answered by pinoytech on May 05, 2013 at 03:23 AM

    Hi,

    Can you please take a look at this cloned form of yours if I did it correctly or not?

    http://www.jotformpro.com/form/31241675863962

    Thank you!

  • Profile Image

    Answered by lilylouboutique on May 05, 2013 at 04:27 PM

    Hi Pinoytech

    OMG OMG - perfect - this is exactly what I was looking for. When the the other 16 or so styles are added will all the radio buttons understand they are in a group?

    Is this a piece of script  that I need to add somewhere? (Sorry I am a traditional print designer) I am not overly familar with code ;)

    I will need to have more collapsable subsections than I first thought - will further sections cause a problem?

    Of you could pop me the instruction/the clone I will continue... i am soo giddy I have spent soo much time trying to find this solution.

    While I wait your response I will continue to cut up all my hair styles and outfits.....

    THANKYOU

  • Profile Image
    JotForm Support

    Answered by jonathan on May 05, 2013 at 05:15 PM

    Hi,

    Since our colleague Pinoytech is not online at the moment, let me provide you assistance. Pinoytech can always come back later on to provide corrections/updates if necessary.

    ---

    What he did was add the images source along with the options in the radio button.

     

    So, instead of the options being like this

    long wavy

    long curly

    long flick

     

    it was setup like this

    long wavy (image URL)

    long curly (image URL)

    long flick (image URL)

    The images are resized to fit in the radio button field and at the same time CSS codes were injected to properly space out the radio buttons.

     

    I will need to have more collapsable subsections than I first thought - will further sections cause a problem?

    It should not be a problem. I tested adding another section and the same radio buttons.

    http://www.jotformpro.com/form/31246886984975

     

    You can clone forms using this guide How-to-clone-an-existing-form-from-a-URL

    To easily understand, this is the radio options value that was used by Pinoytech on the demo form.

     

    <img alt="" src="https://www.jotform.com/uploads/lilylouboutique/form_files/Lilylou-order-formtest-cut_21.jpg" style="width: 54px; height:46px; " align="absmiddle"> long wavy

    <img alt="" src="https://www.jotform.com/uploads/lilylouboutique/form_files/Lilylou-order-formtest-cut_23.jpg" style="width: 54px; height:46px; " align="absmiddle"> long curly

    <img alt="" src="https://www.jotform.com/uploads/lilylouboutique/form_files/Lilylou-order-formtest-cut_27.jpg" style="width: 54px; height:46px; " align="absmiddle"> long flick

    <img alt="" src="https://www.jotform.com/uploads/lilylouboutique/form_files/Lilylou-order-formtest-cut_19.jpg" style="width: 54px; height:46px; " align="absmiddle"> long spiral curl

     

    Inform us if you need further assistance.

    Thanks.

  • Profile Image

    Answered by lilylouboutique on May 05, 2013 at 11:11 PM

    Super, Thanks Jonathan, I have been working my way through my collapasabe sections and putting the image code with the radio buttons. Time for me to go to bed now 4am in UK but I still have a few questions please ;)

    In my collapsable  'Step 2. choose your hairstyles' some of my descriptions have fallen away from the images (as they are too long) is there away of doing a soft return so the text does two lines of description next to the thumbnail image?

    also

    In my final collapsable section 5. I have some items which I list as section 6, (and everything else under this, postage and submit button) that I would like to appear out side of the collapsable section 5, but I dont know how to move it out???

    also ;)

    for the spacing issue  between the radio button that pinotech had done where I need to add more script is this under preferences>form styles?  Where the code mentions input field IDs, well now I have lots of them due to having so many in each collapsable form - do I list all of them under the RADIO BUTTON type script?

    Thanks so much for helping ;)

    ops - sorry one other thing how do I get the contact number and paypal email fields to left aline  under each other?

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 06, 2013 at 07:21 AM

    @lilylouboutique

    1. Add this to your CSS codes. This should fixed the labels into single line.

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

    white-space: nowrap;

    }

    2. Add a form collapse above section 6 and set it's visibility to open and status to hidden.

    3. Yes, it's under Form Styles then Inject Custom CSS. Here's a guide: How to Inject Custom CSS Codes to your Form

    4. I've made adjustments on your form. See this example: http://form.jotformpro.com/form/31252329511950?

    Feel free to clone this form to view the injected CSS codes. How to Clone a Form from a Web Page

    Thanks!

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 06, 2013 at 07:24 AM

    @lilylouboutique

    Ok, I just checked the CSS code provided on number 1 and it seems not good for radio buttons with labels close to each other. It gets cut off. I would suggest not to add that. Thanks!