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 Make Field's Width Smaller and Align Them Next to Each Other?

    Asked by alltronicsbeveiliging on September 29, 2015 at 03:25 AM

    Hi Jotform,

    How do i hide the message "This field is hidden and will never be seen on the form"

    Is there an CSS code for this i can use?

    Beacause of this message i cannot put many (hidden) fields next to eachother. The message makes the field very wide.

    Michiel

    hidden and JotForm message css code
  • Profile Image
    JotForm Support

    Answered by mert on September 29, 2015 at 04:44 AM

    Hi Michiel,

    Unfortunately, there is no way to hide that message. It is designed to warn the users which field is hidden in their forms.

    On the other hand, if you want to make the fields smaller and align them next to each other, you can use the following method:

     

    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 ID of that field, you change it with desired field's ID and red marked area shows the width value you can change the value of it. You need to define this feature for every field. You can use comma for this. To illustrate: #id_160, #id_130

     

    #id_130 {

    width : 222px;

    }

     

    B) Also, you can align those fields next to each other by using custom CSS. Use the following CSS; but remember, if you define all of your fields for one row, it is not going to fit. You need to define max. 2 or 3 field in a row. So, you need to repeat following CSS code for every 2 or 3 field. 

     

    #id_130, #id_160 {

    display:inline-block !important;

    }

     

    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.