How can I expand the length of left adjusted labels?

I'm prefer the look of the left adjusted labels to questions. However, I don't like that if I have long question, it wraps into multiple (sometimes up to 5-6) lines. Is there a way to turn this:

Into something formatted like this?:

You can inject this CSS into your form. Guide: How to Inject Custom CSS Codes

.form-label-left{

    width: 245px !important;

}

Result:

If you only want to apply it on the 2 fields indicated in your screenshot, use this instead.

#label_46, #label_19{

width: 245px !important;

}

Thank you - on a similar note, if I want to shrink the space between certain fields without shrinking the space between fields on the whole form, how can I go about doing that?

I'm trying to do that on this form: https://form.jotform.com/91205361302241 for the first 7 fields before the input tables. Thanks in advance!

Please add the following CSS codes into your form.

#id_5,#id_6,#id_9,#id_7,#id_8 {

    padding-top : 0px;

    padding-bottom : 0px;

}

#id_3 {

    padding-bottom : 0px;

}

Example:

Let us know if this did not work.

Thanks, that did work. I'd love to know were to get those ID's from though as I'll need to do this on a couple forms. Do I have to inspect the page and pull it from the code? 

Yes, if you know how to use the browser's inspector tool you can use it as well on the form to identify the field ID#s.

But you can also do it easily within the Form Builder.

Please check on our user guide : How to Find Field IDs and Names

Thanks Jonathan, 

I'm not doing something right along the way here and was hoping you could help me. I'm following the guide on Field ID's and Names, and copy and pasting those corresponding ID's that I'm trying to shrink the padding on, but it's not capturing the right ones.

https://form.jotform.com/91204922011240

To use the ID# on the CSS editor, you may want to use the Advanced CSS editor instead.

If you meant to remove the padding on the Full Name, Date field and Phone number, you can use the following CSS

#id_12,#id_16,#id_13 {

    padding-top : 0px;

    padding-bottom : 0px;

}

Let us know if you need further assistance.

Hi there,

I'm still not able to compress the padding on the first text boxes in my form.

This is the code I have entered: 

#first_12, #last_12, #input_13_full, 

#input_14, #month_16, #day_16, 

#year_16, #lite_mode_16, #input_15, 

#input_10_0, #input_10_1, #input_10_2, 

#input_10_3, #input_59 {

   padding-top : 0px;

    padding-bottom : 0px;

}

And the lines are all their default vertical spacing. Any suggestions appreciated, thanks!

If you want to reduce the vertical space between the first 8 fields on this form: https://form.jotform.com/91204922011240

Please inject the following code instead:

#id_12,#id_13,#id_14,#id_16,#id_15,#id_10,#id_59,#id_60{

   padding-top : 0px !important;

   padding-bottom : 0px !important;

}

Result:

Let us know if you need more help.

I have a form where I've inserted the css to widen the text box labels, and it appears correct in the builder, but when open the form, it reverts to it's old width. What am I doing wrong?

Builder:

Form:

This is the URL I'm working on now: https://form.jotform.com/91496142161253 

Please replace the existing CSS code for the width with the code below:

#label_3, #label_17, #label_4, #label_5, #label_8, #label_18{

width: 245px !important;

}

Result: 

Hope this helps.

When I do this, I lose my vertical padding of 0. It spaces them back out again, whereas in the builder they are nice and compact.

There are two dots before the lines:

padding-top : 0px !important;

padding-bottom : 0px !important; 

Please remove them, and the correct padding will show in the preview as it does in the builder, clone version: https://form.jotform.com/193424800387965

Let us know if you need more help, we will be glad to assist you.

Thanks. I'm trying to replicate this on a number of forms - but some aren't working. I have removed the dots. I appreciate you providing the correct code, but to avoid having to do that each time, can you tell me where I'm going wrong? Thanks!

https://form.jotform.com/91705503530247

It seems to be caused by a . symbol in the CSS:

Please try the next CSS:

#id_159,
#id_255,
#id_103,
#id_104,
#id_10,
#id_258,
#id_12,
#id_13,
#id_240,
#id_243,
#id_241,
#id_242,
#id_257 {
padding-top : 0px !important;
padding-bottom : 0px !important;
}

Great! Thanks a million.