Change width of fields

Hi - I made my signup form more narrow to fit in the sidebar of my website, but I cant work out how to make the fields more narrow. The box for name and email now goes off the side of the form. Also, I tried to change the button style, but no changes are happening. Thanks.

Hi,

Here is our guide on how to change the width of your form:

http://www.jotform.com/answers/205101-Change-form-fields-width

Or you can add this code to your CSS injection:

.form-textbox{

width: 150px;

}

And adjust to whatever width you would like.

Also, here is our guide on how to style the submit button:

http://www.jotform.com/help/118-Submit-Button-CSS-CSS3

Please let us know if you have any other questions and we will be happy to help.

Thank you for using jotform!

Hi thanks for your reply, but the link doesn't answer my question - it shows how to adjust the width of the form, but not specific components of the form. My problem is that the answer boxes are too wide and go off the edge of the form. So does the submit button. But I need to keep the for narrow so that it fits in the sidebar of my website. See picture:

How do I adjust the size of those?

"Or you can add this code to your CSS injection:" - what is this and where can I find it?

Thanks,

Karl

 

I found your problem. You have some css code that is overriding the width of your textboxes and your submit button which was the reason why you were unable to adjust them. If you look at your existing code you'll notice that I only changed the width of the field which I've highlighted in yellow.

Here's the Live Result on a cloned test form of your form after making the changes below.

- http://form.jotform.us/form/42093735366156

 

(A) You need to change this:

.form-textbox {

border-radius: 5px;

height: 32px;

width: 245px;

}

 

(B) And change this:

.form-submit-button {

border: 1px solid #d5ab3e !important;

border-radius: 3px!important;

font-weight: bold!important;

height: 45px !important;

width: 180px !important;

background: #d5ab3e !important;

font-size: 16px;

text-shadow: none;

box-shadow: none;

color: #fff;

}

 

(A) To This:

.form-textbox {

border-radius: 5px;

height: 32px;

width: 140px;

}

 

(B) And This:

.form-submit-button {

border: 1px solid #d5ab3e !important;

border-radius: 3px!important;

font-weight: bold!important;

height: 45px !important;

width: 130px !important;

background: #d5ab3e !important;

font-size: 16px;

text-shadow: none;

box-shadow: none;

color: #fff;

}