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

    Mobile Widget Doesn't Work to Make My Form Responsive

    Asked by royallyfunparties on February 10, 2016 at 08:15 AM

    When i go to the form on my iphone, it isn't optimizing it for mobile use. It did at one time, but now it's not. Maybe I need to delete the widget and re-add it?

    Page URL:
    http://www.royallyfunparties.com/#!book-my-event/y0c36

  • Profile Image
    JotForm Support

    Answered by Kevin_G on February 10, 2016 at 10:55 AM

    I checked your website and the form is being properly displayed in mobile devices, however, you may also try injecting this CSS code:

    /*-----------RESPONSIVE LAYOUT-----------*/

     

    .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;

    }

    Hope this helps.

  • Profile Image

    Answered by royallyfunparties on February 11, 2016 at 08:46 AM
    New response receivedThat made it worse.
    I did go in and expand all my fields so that they’ll be one under the other, and not try to go side-by-side and that helped a little. But the problems I’m having are:
    The background color changes in Mobile to an ugly yellow.
    The font for the labels is too big
    The text doesn’t wrap to the screen size, so you have to scroll over to read the whole label
    Melissa
    817-729-7016
    www.royallyfunparties.com
    www.facebook.com/royallyfunparties
    ...
  • Profile Image
    JotForm Support

    Answered by mert on February 11, 2016 at 11:10 AM

    Hi Melissa,

    Actually, I didn't replicate the same issue with you on iPhone 5s. Please, see it from the below:

     

    However, I suggest you to use only one predefined option at the same time, so if you use the widget, please disable the "Responsive Form" option; because their CSS codes could be create conflict when tow of them or three of them are opened. However, my suggestion is enable "Responsive Form" option and delete the widget. Also, we can provide you a extra CSS code, if those options won't fix the problem.

    In addition, you can find the useful guide from the link below:

    http://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive

     

    Please, don't forget to let us know the results.

    Thanks.

  • Profile Image

    Answered by royallyfunparties on February 11, 2016 at 11:46 AM
    Oh! Ok. I don't really know what responsive form means so I didn't know to
    turn that off. I'll try it again.
    Thanks!
    ...
  • Profile Image
    JotForm Support

    Answered by mert on February 11, 2016 at 12:04 PM

    Hi again,

    Its description is explained on the link which I gave it on my previous post. However, you need to follow the steps from the below to turn it off:

     

    But I suggest you to enable this option and remove the widget.