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 can I make my forms fit on mobile devices?

    Asked by milehighwinetours on February 09, 2017 at 05:04 PM

    Hello -

     

    There are a few forms I created that currently don't fit on mobile devices (phones) hence, people can't input anything if they're using a phone. Any advice on how to size it for mobile devices while keeping a good quality size for desktops?


    Thank you,

    Felipe

    Page URL:
    milehighwinetours.com/thankyou/

  • Profile Image
    JotForm Support

    Answered by Kevin_G on February 09, 2017 at 07:15 PM

    You may try adding the mobile responsive widget to your form: https://widgets.jotform.com/widget/mobile_responsive 

    How-to-Add-a-Widget-to-your-Form

    If the form still does not fit on mobile devices, then you could try injecting this CSS code to your form as well: 

     

    .form-line.form-line-column {

    width: 100% !important;

    margin-left:0;

    }

     

    .form-line{

    width: 100%;    

    }

     

    .form-textarea,

    .form-textbox,

    .form-dropdown{

    width: 100% !important;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

     

    .form-label-left, .form-label-right{

    width: auto !important;

    }

     

    .form-buttons-wrapper{

    margin-left:0 !important;

    }

     

    .form-input {

    width: 100% !important;

    }

     

    .form-all{

    width: 75% !important;

    }

     

    .form-sub-label-container {

    width: 100% !important;

    display: block  !important;

    }

    How-to-Inject-Custom-CSS-Codes

    Hope this helps. 

  • Profile Image

    Answered by milehighwinetours on February 10, 2017 at 09:40 PM

    Hello, 

    I inserted the code to the css area and clicked on the "get now" button for the widget. It hasn't affected the view on my mobile device but maybe it takes some time. Please help.

    Thanks!!

  • Profile Image
    JotForm Support

    Answered by Charlie on February 11, 2017 at 08:02 AM

    Hi,

    This is because you have this CSS code in your form that states that the form should have a width of 980px, which is why in mobile devices it exceeds the screen size:

     

    You can delete that specific code.

    I also suggest that you look for this specific code:

    .form-all {

    width: 75% !important;

    }

     

    And change the width to 100%. See if that works for you. 

    Let us know if that helps. 

  • Profile Image

    Answered by milehighwinetours on February 11, 2017 at 03:14 PM

    Ok. I think it kinda worked. Thank you.