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

    Form not responsive: Adjusting the input width using CSS

    Asked by boxerrebellion on September 22, 2016 at 09:19 AM

    I'm really struggling to set the width of the form inputs. It seems like something is over-riding the individual width settings, but I can't find it.

     

    I need some widths to be just 4 spaces wide, but then need others (like "Comments") to be wider.

     

    When I go to the preferences on the specific question, I set the input to the width I want but see no difference when previewed.

     

    Thanks for any help!

     

    Page URL:
    http://boxreb.com/flichia/order-online.html

    settings Comments find wide
  • Profile Image
    JotForm Support

    Answered by Jan on September 22, 2016 at 12:02 PM

    We can help you adjust the width of the fields using CSS.

    /* customer number field */
    #input_506 {
       width: 200px !important;
       max-width: none !important;
    }

    /* email fied */
    #input_27 {
       width: 200px !important;
       max-width: none !important;
    }

    /* comments field */
    #input_508 {
       width: 400px !important;
       max-width: none !important;
    }

    /* all other fields */
    .form-textbox {
       max-width: 100px !important;
    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes. As you can see on the CSS code above, you can adjust the width you preferred. The text highlighted in light green corresponds to the field you want to change.

    Here's the result:

    If you have any questions, let us know. Thank you.

  • Profile Image

    Answered by boxerrebellion on September 22, 2016 at 12:04 PM

    Thanks! I'll give it a shot.

  • Profile Image
    JotForm Support

    Answered by Jan on September 22, 2016 at 01:22 PM

    Sure! If there are any issues, let us know so that we can further assist you. Cheers!

  • Profile Image

    Answered by boxerrebellion on September 22, 2016 at 02:02 PM

    Thanks - I actually do have another question on this.

     

    The CSS worked fine for desktop, but the width of the form-textbox is not changing on mobile platforms - iPhone and iPad tested.

     

    Any idea why?

  • Profile Image
    JotForm Support

    Answered by Jan on September 22, 2016 at 03:14 PM

    I don't have an iPhone or iPad to test the issue with. However, when I checked the form in my Android phone, it showing properly. Also, the form is set to responsive which is why when you open the form in a phone, it 'll look like this:

    Would you like the text box and the label in 1 row only? Please give me more time to work on this issue. I'll contact you once I have a solution. Thank you for understanding.

  • Profile Image

    Answered by boxerrebellion on September 22, 2016 at 03:18 PM

    Hi! No worries.

     

    Yes, I'm hoping that the label and text box to be on one row - there's so many, it would make scrolling easier.

     

    I've tried responsive selected and not selected and haven't seen much difference (though the embedded page has widths set for various displays, so there may not be much for the form to do different)

  • Profile Image
    JotForm Support

    Answered by Jan on September 22, 2016 at 04:46 PM

    Thank you for patiently waiting. Please try these solutions:

    1. Add the Mobile Responsive widget to your form.

    2. After that, please insert this custom CSS code:

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

        .form-label {
           width: 150px !important;
           font-size: 0.77em !important;
       }

        input[type=text], input[type=email], input[type=tel], textarea {
           width: 50px !important;
       }

        .form-input {
           width: 50px !important;
           float: right !important;
           margin-right: 20px !important;
       }

        #input_508 {
           width: 300px !important;
       }

    }

    @media only screen and (min-width : 375px) and (max-width : 667px) {

        .form-label {
           width: 150px !important;
           font-size: 0.9em !important;
       }

        input[type=text], input[type=email], input[type=tel], textarea {
           width: 50px !important;
       }

       .form-input {
           width: 50px !important;
           float: right !important;
           margin-right: 20px !important;  
       }

       #input_508 {
           width: 300px !important;
       }     

    }

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

        .form-label {
           width: 300px !important;
           font-size: 0.9em !important;
       }

        input[type=text], input[type=email], input[type=tel], textarea {
           width: 100px  !important;
       }

        .form-input {
           width: 200px !important;
           float: right !important;
           margin-right: 20px !important;
       }

        #input_508 {
           width: 300px  !important;
       }

    }

    Here's the result:

    Hope that helps. Let us know if you need further assistance. Thank you.

  • Profile Image

    Answered by boxerrebellion on September 22, 2016 at 07:38 PM

    Eureka! Jan, you're the best. Thank you so much for your help!!! It works perfectly!

  • Profile Image
    JotForm Support

    Answered by Kevin_G on September 22, 2016 at 08:57 PM

    On behalf of my colleague Jan, you're most welcome. 

    If you need further assistance, please feel free to contact us, we will be glad to help you.