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 the Usability of My Form on Mobile?

    Asked by stageit on December 08, 2015 at 09:09 AM

    Hello,

     

    How can I make everything in the form bigger in length? Because when I view it on my tablet it is hard to press it with one finger but I want it bigger so I can click on it with ease. Maybe someone can help me with CSS, or maybe there is an button that does this.

     

    Thanks in advance,

     

    Owen

    size length font size configurable list
  • Profile Image
    JotForm Support

    Answered by mert on December 08, 2015 at 09:28 AM

    Hi Owen,

    You can increase the font size, weight or etc. by injecting some custom CSS to your form. Below, you will see the CSS that makes the font of your form bigger and bold.

     

    .form-all{

    font-weight:bolder;

    font-size:24px !important;

    }

     

    If the changes are not meet your needs, we can do something more to increase your form's usability.

    Thanks.

  • Profile Image

    Answered by stageit on December 09, 2015 at 02:26 AM

    Hi Mert,

     

    This was exactly what I was looking for! Except there is one problem. Everything becomes bigger except for the configurable list widget. Is there a way to make that bigger vertically too?

     

    Thanks in advance,

     

    Owen

  • Profile Image
    JotForm Support

    Answered by beril on December 09, 2015 at 03:57 AM

    On behalf of my colleague @Mert, you are kindly welcome. We are very glad to hear that the issue has been resolved for you.

    Can you add the CSS code to your configurable list widget?

    I hope it helps.

    If this does not resolve the issue, please let us know and we will be glad to take another look.

  • Profile Image

    Answered by stageit on December 09, 2015 at 04:11 AM

    Hello,

     

    Well I tried it and it did not do anything.

    Can you please try again?

     

    Thanks in advance,

     

    Owen

     

     

  • Profile Image
    JotForm Support

    Answered by mert on December 09, 2015 at 05:14 AM

    Hi again,

    Owen, I have been working on this issue to find a solution. When I find the correct solution, I will post the answer.

     

    Thank you for your patience.

  • Profile Image

    Answered by stageit on December 10, 2015 at 02:44 AM

    Hello Mert,

     

    Thank you for taking your time and looking it up.

     

    -Owen

  • Profile Image
    JotForm Support

    Answered by jonathan on December 10, 2015 at 03:52 AM

    Please use this CSS code on the Configurable List widget

    th{

    font-weight:bolder;

    font-size:24px !important;

    }

     

    so it should make the font size bigger

     

     

    Here is my test form https://form.jotform.com/53431613019952?

    Let us know how it goes.

    Thanks.

     

  • Profile Image
    JotForm Support

    Answered by mert on December 10, 2015 at 03:57 AM

    Hi again,

    Unfortunately, there is an issue about custom CSS part on "Configurable List" widget, so the changes don't applied to the widget on preview. Now, I'm going to open a bug report about this one. With that, our widget team will be found a fix for that problem as soon as possible.

     

    Thank you for your understanding.

  • Profile Image

    Answered by stageit on December 10, 2015 at 04:06 AM

    Hi Mert,

     

    No problem, thank you for looking it up. I hope you guys have a great day!

     

    Owen

  • Profile Image
    JotForm Support

    Answered by mert on December 10, 2015 at 04:15 AM

    You are most welcome. Please, accept my apologies about this one; but you can be sure that it will be fixed soon. When the fix is released, you will be informed on this thread.

     

    Have a great day.

  • Profile Image
    JotForm Support

    Answered by TitusN on December 17, 2015 at 11:51 PM

    Hello Owen, 

    The Custom CSS tab has been fixed - Your Custom CSS will apply the desired changes to your Configurable list widget.

    Kindly add the suggested CSS and see if that fixes your layout requirements. 

    If you need further assistance - please let us know. 

  • Profile Image

    Answered by stageit on December 18, 2015 at 02:33 AM

    Hi Titus, 

    I tried the CSS Beril gave me, but it still did not work. I think it's not working because the CSS was for the wrong configurable list widget. Can someone help me with a new CSS code to make this configurable list widget larger vertically?

    Thanks!

     

    Owen

     

     

  • Profile Image
    JotForm Support

    Answered by mert on December 18, 2015 at 03:43 AM

    Hi again,

    Owen, if you apply the following CSS code it makes the "Configurable List" larger vertically.

     

    td{

    padding-bottom: 250px; /* This one makes it larger vertically*/

    padding-right:25px; /* This one gives space between dropdowns (you can erase this one, if you dont want this feature)*/

    }

     

    Please, try this one and let us know the results. Also, I suggest you to clear your browser caches before doing this steps.

     

    Thanks.

  • Profile Image

    Answered by stageit on December 18, 2015 at 03:56 AM

    Hi Mert,

    The CSS code that you gave me made it larger horizontally but not vertically.

    Maybe it is only on my end, can you confirm?

     

    Thanks,

     

    Owen

     

  • Profile Image
    JotForm Support

    Answered by TitusN on December 18, 2015 at 04:03 AM

    Hello Owen,

    It appears smaller on my end too, 

    Please add the following CSS to all your Configurable List Widgets  using the Custom CSS tab: 

     

    /*The CSS below increases the Vertical Heights of the Input , Select and Button Elements*/

    select {

        height: 31px;

    }

    input[type="text"] {

        height: 25px;

    }

    button {

        height: 31px;

    }

    .stepper-wrap {

        height: 31px;

    }

    /*Height CSS End*/

     

    Don't delete the CSS you have in there, add the code above right below it. 

    Looks better? You can sample the changes here: https://form.jotform.com/53511865015956?

     

  • Profile Image
    JotForm Support

    Answered by mert on December 18, 2015 at 04:45 AM

    Owen, I monitored the customized form on Chrome and it looks like larger vertically and horizantally (Now, I added the Titus's CSS, the input boxes and the selectors are larger currently). Please, see it what I see on my side:

     

  • Profile Image

    Answered by stageit on December 18, 2015 at 05:40 AM

    Thanks guys! 

    It looks exactly how I pictured it.

     

    Owen

  • Profile Image
    JotForm Support

    Answered by mert on December 18, 2015 at 07:03 AM

    On behalf of my colleagues, you are kindly welcome. It took a long time to come this point, sorry for this; but finally, I'm glad to see that it works for you. For your other questions, please don't hesitate to contact us.

     

    Have a great day.