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

    There is some problem with Mobile Responsive widget

    Asked by WinOnIMG on October 05, 2016 at 07:35 PM

    Hello,

    I was trying to use my form on my site on mobile but, I still have to scroll Horizontal to view the from.

     

    Test Device :- Apple iPhone 6 Plus

    OS :- 10.0.2

    Page URL:
    http://www.winonphoto.com/upload

    problem Mobile mobile responsive responsive widget
  • Profile Image
    JotForm Support

    Answered by Kevin_G on October 06, 2016 at 12:06 AM

    Unfortunately I have not an iPhone device to test your form, but I have tested in a device emulator and I can see what you're referring to. 

    Reviewing the source code I can see you have embedded the JotForm iFrame code within another iFrame code: 

    Could be possible to embed the form's iFrame code directly in the webpage? 

    You may also try adding this CSS code to  your form: 

    /*-----------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;

    }

    This guide will help to inject the code to your form: How-to-Inject-Custom-CSS-Codes

    Please do let us know how it goes. 

  • Profile Image

    Answered by WinOnIMG on October 06, 2016 at 04:45 AM
    I don't think so, as we use Wix platform to build our site.
    --
    Siddharth Doshi
    ...
  • Profile Image

    Answered by WinOnIMG on October 06, 2016 at 05:52 AM

    I have tried adding the CSS code but it don't work.

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 06, 2016 at 08:59 AM

    @WinOnIMG 

    The form appears to be working properly on iPhone emulators but I was able to reproduce the issue when I check it on iPhone 6+ physical device.

    I don't see any horizontal scrollbar below the form, it's just the form that is draggable horizontally. When I check the iframe URL where the form is embedded, it is looking good on mobile http://www.winonphoto.com.usrfiles.com/html/80d2a4_9b5709b2338eaf342bb05ce75e2d85ee.html

    I suggest you try embedding your form using its iframe embed code. See if this makes a difference.

    If not, let us know so we can assist you further.

  • Profile Image

    Answered by WinOnIMG on October 06, 2016 at 02:32 PM

    No it is not working 

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 06, 2016 at 03:59 PM

    I fixed it for you by injecting this CSS codes into your form.

    @media screen and (max-width:480px){

    li#id_14{

    max-width:320px;

    overflow:hidden;

    }

    }

    Would you mind checking it again this time? 

    I think it is the sms confirmation widget that is forcing the fields to expand beyond the form width, the above CSS codes should limit its width and hopefully, that would fix the problem.

    Please let us know.

  • Profile Image

    Answered by WinOnIMG on October 06, 2016 at 06:02 PM

    Yep, it do work.

     

    Thank You for your help.