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 the Fields Next to Each Other?

    Asked by dcepticon on September 30, 2015 at 04:11 AM

    Is there a way i can line up 4 fields next to each other?

    next next to each other a line
  • Profile Image
    JotForm Support

    Answered by mert on September 30, 2015 at 04:49 AM

    Hi,

    Yes, it is possible by injecting custom CSS to your form

     

    First, you need to learn your field's ID number:

    A) While related field selected with your mouse, click to gear shaped icon, then click to "Show Properties".

     

    B) On the upcoming popup window, find the "ID". It will show the specific ID for that field.

     

    Later, our second step is injecting custom CSS codes with the ID numbers:

    A) CSS code to change field's width is on the below. Blue marked area shows the IDs of those fields, you change it with desired field's ID and red marked area shows the width value you can adjust the value of it. You need to define this feature for every field. You can use comma for this. To illustrate: #id_1, #id_3, #id_4, #id_5 

     

    #id_1, #id_3, #id_4, #id_5 {

    width : 150px;

    }

     

    B) Finally, you can align those fields next to each other by using custom CSS. Use the following CSS.

     

    #id_1, #id_3, #id_4, #id_5{

    display:inline-block !important;

    }

     

    Also, I prepared a demo. You can see the four fields are aligned next to each other on it.

    http://form.jotformpro.com/form/52722231770954

     

    I hope this steps will help you. If you stuck somewhere in the process or need more information, please don't hesitate to contact us.

    Thanks.