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 set field label width different than the field width?

    Asked by mlberry1 on December 01, 2016 at 10:04 PM
  • Profile Image

    Answered by Jed_C on December 01, 2016 at 11:58 PM

    Hi there,

    Just wanted to help out!

    Depending on which field you choose, some fields like email has an option to assign a width value like in my sample screen shot here https://s11.postimg.org/3p8r5n6qr/width.png and other times you will need to inject CSS code to adjust the label width.

    In my sample form here https://form.jotform.me/63358688563472, field label values for First Name and Last Name are sublabel_first and sublabel_last.

    To adjust it by CSS, the code will be something like this:

    #sublabel_first {

    width: 100px !important;

    }

    #sublabel_last {

    width: 100px !important;

    }

    Just replace the px value to your preferred value. You can inject the code above by clicking on Design > Inject CSS > then Save Changes once done.

     

    Best,

    Jed

  • Profile Image
    JotForm Support

    Answered by emily on December 02, 2016 at 03:29 AM

    Hi Jed,

    Thank you for your feedback.

    You can inject custom CSS codes to change your labels width. I would recommend using Advance Designer. By using it you will be able to make better inspections on the changes you make your form by injecting custom CSS. 

    For further information please have a look at the screenshots below.

    1. Click on Design button.

    2. Click on Advance Designer button on the bottom of the segment.

    3. In CSS segment, you can add your custom CSS. When you click on your labels once,  all of the labels will be selected and you can adjust their widths as shown in the screenshot.

    4. If you want to make changes in only one label, double click on it. You can alter that label by entering the width.

    Please have a look the video below for a better understanding.

    Kindly check the user guides below.

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    https://www.jotform.com/help/75-Customize-Your-Form-Using-Custom-CSS-Codes 

    If you have any questions, please let us know.