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

    How to increase fields size and keep the display inline property?

    Asked by rugbynorcal on May 24, 2017 at 04:59 PM

    When changing some spacing and sizing of fields, some of the fields on my form entered to the next line. Example: Contact Name used to be First and Last name fields on the same line, now they are on top/bottom of each other. And the label on some of the text fields is now on two lines. How can I change this?

    Page URL:
    https://form.jotform.us/rugbynorcal/summer7s

  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 24, 2017 at 06:22 PM

    Do note that you cannot display the full name sub fields with their width as 100% since they will be displayed one below the other, this since both fields are displayed inline, you will need to set up width value without exceeding the max value the fields can have. 

    I can see your fields are not currently displaying on the entire form, I would suggest you to inject the following code: 

    [data-type="control_textbox"] .form-input, [data-type="control_textarea"] .form-input, [data-type="control_fullname"] .form-input, [data-type="control_phone"] .form-input, [data-type="control_datetime"] .form-input, [data-type="control_address"] .form-input, [data-type="control_email"] .form-input, [data-type="control_passwordbox"] .form-input, [data-type="control_autocomp"] .form-input, [data-type="control_textbox"] .form-input-wide, [data-type="control_textarea"] .form-input-wide, [data-type="control_fullname"] .form-input-wide, [data-type="control_phone"] .form-input-wide, [data-type="control_datetime"] .form-input-wide, [data-type="control_address"] .form-input-wide, [data-type="control_email"] .form-input-wide, [data-type="control_passwordbox"] .form-input-wide, [data-type="control_autocomp"] .form-input-wide{

      max-width: initial;

    }

    .form-textbox, .form-textarea{

      max-width: initial;

    }

    .form-input, .form-address-table, .form-matrix-table{

      max-width: initial;

    }

    This guide will help you injecting the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    You could also see the result on this cloned form of yours: https://form.jotformpro.com/71437322641956 

    Hope this helps.