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

    I need help with field alignment

    Asked by transtrumbp on August 07, 2012 at 06:23 PM

    I'm trying to format fields in the second half of this form (go to the bottom and click next) where the html fields are to the right of the check box & drop down fields only when I try and shrink them, they will still not let anything sit to the left. Is this possible?

    Here's the form...


    Go to the second page for the big questions. I've only been working with the top 2 fields, the html and check box, to see if I can make it work. If not, I'm just putting the text in as the description to the check box/drop down fields.

  • Profile Image
    JotForm Support

    Answered by liyam on August 07, 2012 at 10:01 PM

    Hello.  Yes, it's possible to move the labels to the right and the field items to the left.  You will have to do CSS injection on your form identifying the IDs of the labels, and the divs that enclose the fields.  Here's the user guide on how to inject CSS on your form

    Next:  Here are the CSS codes for your dropdowns and its labels:

    #label_14, #label_15, #label_16, #label_17, #label_19, #label_20, #label_22, #label_23, #label_25, #label_26, #label_28, #label_29, #label_31, #label_32, #label_34, #label_35, #label_36 { margin-left: 100px; padding-bottom: 16px;}
    #cid_14, #cid_15 { margin-top: -35px; position: absolute;}
    #cid_16, #cid_17, #cid_19, #cid_20 { margin-top: -75px; position: absolute; }
    #cid_31 { margin-top: -80px; position: absolute; }
    #cid_22, #cid_23, #cid_28, #cid_32, #cid_34, #cid_35, #cid_36 { margin-top: -90px; position: absolute; }
    #cid_25, #cid_26, #cid_29 { margin-top: -105px; position: absolute; }

    And if you want to do the same alignment on the checkbox, here's my code for you:

    #label_18 { margin-left: 100px; }
    #cid_18 { margin-top: -25px; }

    If you have further questions, please do let us know.