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

    Change width of fields

    Asked by leisuretime on July 28, 2014 at 09:50 AM

    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.

    Page URL:
    http://tenniscoachblog.com

    style name sidebar thanks
  • Profile Image
    JotForm Support

    Answered by david on July 28, 2014 at 11:00 AM

    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!

  • Profile Image

    Answered by leisuretime on July 29, 2014 at 09:25 AM

    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

     

  • Profile Image
    JotForm Support

    Answered by KadeJM on July 29, 2014 at 10:19 AM

    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;

    }