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

    Adjust width of textbox and make form mobile responsive

    Asked by veshman on October 12, 2015 at 09:39 PM

    I'm really struggling with formatting and appearance of my form. I feel like I've *almost* got what I want, but it's not quite there....

    I even hired a couple of "CSS Designers" but still didn't get what I'm looking for (maybe the lack of familiarity with JotForm?)

     

    Here's what I want to do:

     

    I want the width of the text boxes to expand based on the browser to use more of the screen on the field I want it to, like Name, or Street.

    I do not want it to expand on fields like Area Code, or Zip, or Month. It looks a little goofy with huge wide boxes for those fields.

    And if I can have more field on one line when appropriate, it should do that (I've been doing that with shrink, new line, merge line, etc). This way, it should move to the next line in responsive small width device, but use up the whole line on a wide computer screen,  correct?

    I can get the text box sizes smaller, but I can't get them to expand to use up the width.

     

    Would love some help here. I'm sure someone has done this before?

     

    Thanks!

     

    Bhavesh

    appearance and JotForm name shrink css desig mobile responsive
  • Profile Image
    JotForm Support

    Answered by Chriistian on October 12, 2015 at 11:12 PM

    Hi Bhavesh,

     

    Are you referring to this form - http://www.jotformpro.com/form/52837933181966? You can adjust the width of the specific text box by adding a custom CSS code in your form. You can try to use this custom CSS code:

    input#input_104_postal {

        width: 50%;

    }

    #cid_9 span {

        width: 10%;

    }

     

    To inject custom CSS code in your form, just follow the instruction provided in this article: How to Inject Custom CSS Codes

     

    Regarding the mobile responsiveness of your form, I noticed that the Responsive Form setting of the form is set to No. Can you try to set the Responsive Form setting of your form to Yes?

     

    Do let us know if you need further assistance.
    Regards.

  • Profile Image

    Answered by veshman on October 12, 2015 at 11:58 PM

    So I think I just don't know what to adjust.

    For example, in the screenshot below ( http://www.jotform.com/?formID=52849240195965 ), I've played around with min-width for first name and last name, hoping that it would expand bigger automatically based on the screen size. But unfortunately, it just stays the same fixed size.

     

    In the second example, it would be nice to have City, State, Zip  and country on the same line (since zip and state shouldn't take up too much room).

     

    On small devices, the fields may have to wrap but on a computer it should be more compact.

     

    Conceptually, I think it should be

     

    [shrunk field one at 150px or bigger] [shrunk field two at 200px or bigger] [shrunk field 3 at 200px or bigger]

    new line

    [shrunk field 4 at 120 px or bigger] [shrunk field five at 50px] [shrunk field six at 50 pix]

     

    Is that the right concept?

     

     

     

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on October 13, 2015 at 01:41 AM

    Hi,

     

    I am currently checking your form. Please give me more time to further check this. I am currently creating a sample form based on your requirement. I will get back to you as soon as I finish creating the sample form.

     

    Regards.

  • Profile Image
    JotForm Support

    Answered by Chriistian on October 13, 2015 at 02:07 AM

    Hi,

     

    I have adjusted the form based on your requirement. You can check this sample form that I have created - https://form.jotform.com/52850558802964? and see if this is what you are looking for. You can clone the form to have a closer look on the setup. I have added this custom CSS code in the form.

    .form-col-1{

        width: 50%;

    }

    .form-col-2{

        width: 50%;

    }

    li#id_97 {

        width: 40%;

    }

    li#id_133 {

        width: 30%;

    }

    @media screen and (min-width: 1024px){

    .form-address-table tr:nth-child(3) td:nth-child(1) span:nth-child(1) {

        width: 150px;

    }

    .form-address-table tr:nth-child(3) td:nth-child(2) span:nth-child(1) {

        width: 150px;

        position: absolute;

        top: 153px;

        left: 160px;

    }

    .form-address-table tr:nth-child(4) td:nth-child(1) span:nth-child(1) {

        width: 150px;

        position: absolute;

        top: 153px;

        left: 360px;

    }

    .form-address-table tr:nth-child(4) td:nth-child(2) span:nth-child(1) {

        width: 200px;

        position: absolute;

        top: 153px;

        left: 490px;

    }

    .form-address-country {

        height: 35px;

    }

    }

     

    Do let us know if you need further assistance.
    Regards.

  • Profile Image

    Answered by veshman on October 14, 2015 at 01:19 AM

    Hi, thank you for the response. I'll play with the CSS and see if I can get it to do what I want. I *think* it would be better to do this in 1 column so it is more responsive on small screens, correct?

    The challenge I was having was using the full width in 1 column. Anyway, I'll play with it now.

  • Profile Image

    Answered by veshman on October 14, 2015 at 01:47 AM

    Unfortunately, I still couldn't figure out how to achieve my goal. Here is where I am at now:

     

    http://www.jotform.com//?formID=52860722107956

     

    I converted it to 1 column (I think) by deleting 

     

    .form-col-2{

        width: 50%;

    }

    and making .form-col-1 width: 100%

     

    I would still like first name, last name, and preferred name span the width of the single column.

     

    On the second page, I would like Zip, State and Country to be fixed in width, with City taking up the extra space. It just seems weird to have a box that takes up have the screen for two letters. It ends up taking up two lines for something that could be done in one.

     

    My attempts at customizing the CSS have not resulted in the desired results for me so far, but hopefully I'll figure this out.

  • Profile Image
    JotForm Support

    Answered by Chriistian on October 14, 2015 at 03:51 AM

    Hi,

     

    Can you re-insert the CSS code below but change the width to 100%?

    .form-col-2{

        width: 50%;

    }

     

     

    make it:

    .form-col-2{

        width: 100%;

    }

     

    Please let us know if you need further assistance.

    Regards.

     

     

  • Profile Image

    Answered by Rehan  on May 07, 2016 at 07:44 AM

    Hi guys. I am trying to do a similar job at my website http://todayramdantimetable.com

    I want the width of input text box to be 100 percent on mobile but 250px on desktop.

    for which I am using media query but no result so far.

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 07, 2016 at 08:17 AM

    Hi,

    I have moved your concern to a separate thread so we can assist you better. Please see it here.