How to customize my form with custom CSS code?

Hi,

Our form width is 820px.

I hope our each fields a little longer.  Also the button is next to our fields.

All fields and button in one row.

1) How to adjust the fields size.

2) Our button more close to second field.  Not a blank between it.

I tried to adjust it.  It get small result.

What option or CSS that I can change?

Thanks!

1) You can adjust the drop down size with the code injected on the widget: 

.select2-container {

    width: 48%!important;

margin-right: 2% !important;

}

You can just change the width value to see how the fields change as well.

2) Please inject the following CSS code to your form: 

.form-col-1 {

    width: 85%;

}

.form-col-2{

    width: auto;

    padding-left: 0px;

}

#id_4 div, iframe#customFieldFrame_4 {

    width: 100% !important;

}

#id_4{

    padding-right: 0px;

}

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

Result: https://form.jotform.com/81044468434962 

I hope this helps. 

Hi,

Wonderful!

One more issue:

The button will jump to next row when submit it.

Hope to keep it in same row.

Thanks!

To make the button stay in the same row, please make the following changes in the CSS of your form. The changes need to be done in line 11 and line 29.

button#input_5 {
  height : 50px !important;
  margin : 2px 0px !important;
  font-size : 16px;
  width: 128px;
}

.form-col-1 {
    width: 80%;
}

Result: https://form.jotform.com/81045676109963

It's great now!