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 can I align check boxes to their content?

    Asked by Hector on September 26, 2011 at 04:56 PM

    Hey JotForm! :)

    Firstly, want to thank you so much sharing such a great resource!

    I am building a form so my clients can submit a friendly query about an order. I am not familiar with CSS, but I have managed to browse through other people's posts so I can understand a bit more.

    Unfortunately I am having an issue with aligning the check box or ratio box to the content. I am using image thumbnails with html code instead of text content for each option, but the check boxes are automatically aligend to the top of each thumbnail and I need them to be aligned right in the middle of each thumbnail. I just uploaded a screenshot of what I got so far. I want my checkbox list items to look like this:

    <p><img src="//dsc.sun.com/docs/jscreator/help/2update1/images/bh_checkbox_icon.gif" alt="W3Schools.com" align="middle" /><img src="//farm3.static.flickr.com/2512/4063441338_4b7cb4200b_o.jpg" alt="W3Schools.com" width="100" height="100" align="middle" /></p>

    Can you PLEASE, PLEASE come up with a code that helps me align thrhough the CSS injection?

    Thanks in advance,

  • Profile Image

    Answered by fxr on September 26, 2011 at 06:13 PM

    Hi Hector,


    If you could post the direct link to your form; i will clone it, then work on a solution to your problem.



  • Profile Image

    Answered by Hecalinas on September 26, 2011 at 07:37 PM

    Hey fxr,

    this is a direct link to my form, as you may see I have a mess with the last two options :( I need my option columns for the radio/checkboxes to be able to show the complete thumbnails I am using since they are being cut and one's over the another... any help will be apprecieated, thanks!


  • Profile Image

    Answered by fxr on September 26, 2011 at 09:18 PM

    hey Hector.

    I had a good look at your issue, the most straightforward hack in my opinion is just to put the radio boxes & images into a table.

    Is this any closer to the effect you are looking for?


    to achieve this you would need to embed the html for the table directly with the 'free text [html]' tool in the 'Power Tools' menu.

    The code you would need to paste in is here: http://pastebin.com/Sni5Ru7a


    is this making sense? let me know if you have any questions.