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 to align pictures with checkboxes

    Asked by jstanzel on February 20, 2015 at 08:49 AM

    Dear Support team,

     

    I am struggeling right now to align my checkboxes with the pictures they belong to. Example:

     

    How can I get those aligned properly? Is there a way to manually (freely) place the pictures/checkboxes?

     

    Thanks a lot!

    checkboxes JotForm uploads jpg
  • Profile Image

    Answered by Carina on February 20, 2015 at 10:46 AM

    Please try adding this css code :

    .form-line.form-line-column {
        display: inline-block;
        width: 160px;
    }
     
    Let us know if we can assist you further.
  • Profile Image

    Answered by Carina on February 20, 2015 at 10:47 AM

    You can test it here:

    http://form.jotformpro.com/form/50504792096963? 

    Also you can try the Image Checkbox widget:

    http://widgets.jotform.com/widget/image_checkboxes 

    Thanks

  • Profile Image

    Answered by jstanzel on February 27, 2015 at 07:39 AM

    Hi,


    The code you suggested is valid for the whole document as far as I can see. My Problem is, that I have (in one form) rows with 3 Pictures as well as 2 or 4...which means with the code you offered I will mess up my "other than 3" pictures per row.

    Is it possible to move the pictures independently? The checkbox widget doesn't work because my pictures don't fit into squares or the become too small.

     

    Thanks for your help!

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on February 27, 2015 at 10:24 AM

    @jstanzel 

    Is this the form you're referring to? http://www.jotformeu.com/form/50574046385357

    I can see that you are using images as check box options which appears to be working fine.

    How do you want the image to align with the check box? Is it on the same line or underneath? I'm not sure if I got your screenshot correctly but I assumed you want it to align left underneath just like on my colleague's sample form? If yes, you can include a style attribute on the image codes to bring them on the new line. 

    Example:

    <img src="https://www.jotform.com/uploads/jstanzel/form_files/M-4601.png" alt="" style="display: block;">

     

    However if you want them on the same line. Use these CSS codes.

    .form-checkbox + label {

    display: inline-block;

    vertical-align: middle;

    }

    .form-checkbox {

    vertical-align: middle;

    }

    Result:

    Thanks!

  • Profile Image

    Answered by jstanzel on February 27, 2015 at 10:36 AM

    To use pictures in checkbox was actually a new aproach from my side. It is nice to know how to change the position, thanks a lot!

    With the pictures in the checkbox, a new problem appeared (my forum post seems to have vanished):

     

    I tried to implement pictures in my checkboxes instead of plain text.

    This works quite nicely with:

    <img src="picture_url"width="YYY" height="XXX" img> 

    becomes:

    But when I go back into the line to edit the width/height of the picture, the whole code vanishes:

    Is there a way to keep that code from vanishing or do I need to keep repasting and editing the whole thing everytime I click into the checkbox field?

    Thanks for you help!

  • Profile Image
    JotForm Support

    Answered by david on February 27, 2015 at 12:55 PM

    Unfortunately, each time you edit the HTML in the checkbox option, it is stripped.  I did a bit more testing to confirm this and it is the case even in the options menu for the field.  After the HTML is entered, it no longer even shows the code in the options for the field:

     

  • Profile Image

    Answered by jstanzel on April 10, 2015 at 06:34 AM

    Hello again :)

    I am OK with the pictures now, but when I get an reply to the form, I don't see what plates have been selected in the excel form I can export...I guess the thml code is not being exported to the excel file...is there a way to change this? I already tried to add an alt="text", but that doesn't show up either...


    Thanks a lot,

     

    Jan

  • Profile Image

    Answered by Carina on April 10, 2015 at 10:26 AM

    Hi Jan

    Unfortunately with this workaround you can see the image but nothing gets sent to the Excel file:

    A workaround might be adding some text before or after the image tag like:

    option 1 <img src="https://www.jotform.com/uploads/Carina/42534339774967/304089441561845219/E_identity.png">

     

    An alternative might be adding calculation values and then adding a form calculation  widget, so that it displays the choice made:

    That calculation field can be hidden:

     

     

    You can test and clone the demo form:

    http://form.jotformpro.com/form/50993689515976? 

    Let us know if we can assist you further.   

  • Profile Image

    Answered by jstanzel on April 13, 2015 at 04:42 AM

    I tried the option with adding extra text in the line, but that also didn't show up in the excel file. One more thing which I just noticed is, that I get weird entries in some of the fields (M-4884, M-4649 and M-4303), those entries are not visible in the online entrey preview, but in the excel export. I wasn't able to figure out why that is...can you help me with that? 

     

    Thanks,

     

    Jan

     

    edit: I just saw that the answers all seem to be mixed up...is there something wrong with the excel export function right now?

  • Profile Image

    Answered by Carina on April 13, 2015 at 11:02 AM

    Hi Jan

    Is it the form 50572970856364?

    I inspected the form and the images are added independently from the checkbox fields, only latter being aligned:

    I was not able to find the entry M-4649 in the form. Maybe it's not correctly labeled or was deleted.

    Entry M-4303 and M-4884 are only visible according to condition:

    I cloned the form and made a test submission and the selected entries were visible:

    If it is another form please let us know the url so we can make further tests.

    Let us know if we can assist you further.