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 Line Up Images With My Form

    Asked by TrioMFG on January 11, 2012 at 09:02 AM

    First let me say I love JotForm.

    I have a form being used in the Ordering Information tab of this page: http://www.trulok.com/test

    I want to line up images directly to the right of each form element section, but can't find how to do this in the JotForm tool. Sooo, I've divided up using a <table> as a hack solution. However, the images don't line up perfectly in both Firefox and IE.

    Any idea on how I can line up images directly to the right of each element using my JotForm?

    Any help is appreciated. Thanks in advance :-)

    Page URL:
    http://www.trulok.com/test/

    Screenshot
  • Profile Image
    JotForm Support

    Answered by abajan on January 11, 2012 at 11:29 AM

    It might be a bit of a longshot but instead of combining margin and padding values to position the images, try using just padding, with just a single class to define that padding for each image.

    Of course, the problem with this method is that you wouldn't be able to have the 1px thick gray border around each image. However, making the border actually part of the image instead of having it rendered via CSS would fix that. (Although, that's not the preferable solution.)

    Some "googling" I did on browser inconsistencies re margins seems to suggest that there's a better solution involving floating content (as discussed here) but I'll need to research it some more before I can provide a definite solution.

    Hopefully, in the meantime my colleagues can provide a solution or two.

  • Profile Image

    Answered by fxr on January 11, 2012 at 12:07 PM

    Yes, I would suggest avoid using tables to format elements on your webpage. 

    With how your form is configured, I dont be believe there is anyway to get your images aligned as you want on JotForm itself, so some kind of hack seems called for.

    I put together a quick and rough bit of CSS & HTML with floating divs which should give you much more control over how those individual images are aligned on your webpage. 

    code -> http://pastie.org/3167212

    result -> http://pamppi.info/jotform-testing/triomfg.html

     

    Now this code needs a little bit more tweaking to get absolutely right, but I feel its the route you should probably be taking. 

  • Profile Image

    Answered by TrioMFG on January 12, 2012 at 09:43 PM

    Ahhh ...  I see. Thanks for the sample code. I'll give that a shot.