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

    Can you change the width of a single field without changing the widths of other fields?

    Asked by OrionEngineeredCarbons on September 27, 2016 at 08:39 AM

    For example.  If I want to change the width on a radio button question it is changing others.  How do I just make a change to one field without changing others? 

    Screenshot
    Without a change the width can
  • Profile Image
    JotForm Support

    Answered by david on September 27, 2016 at 11:23 AM

    This depends on where you are in the form Designer and to what you are applying the CSS code.

    To explain this a bit further, I will take it as if you are not familiar with CSS and start from some basics.

    If you click on the element and see that the text string for it starts with a dot (.) for example: .className it means that you are changing the class.

    The class is the way to change a lot of fields in the same time (all of those with the same class).

    The most common class on a form is .form-textbox which is in the TextBox, Email, Phone and few other fields.

    The second most common class is .form-textarea which allows you to style all of the textarea elements.

    Now in designer we get to select these classes by clicking on some field (only once) and is the default way to style within both tabs on the right.

    Now, the other thing to know is that there are also IDs. They start with the # sign, so if you see #someID you can be sure that this is style for a single field only.

    To use this, you should go to CSS tab in your Form Designer and double click on the field that you want to style, and you will immediately see it showing that # at the start.

    So to summarize, when changing the style of a single element, we want to use ID (starts with #), but if we want to apply the style to all elements with the same class, we use the class instead (starts with .).

    I would also like to suggest taking a look at the following video guides here: Video Course: Form Designer Basics to show you how this all works as well.

    And example from your form would be on of your radio button labels is not on a single line.  The following code would allow for the field and the label to stretch a bit wider:

    #cid_100 span.form-radio-item {
        width : 150px;
    }

    #cid_100 div.form-multiple-column {
        width : 750px;
    }

    Here is how the changes would look in your form: