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

    Form is too big and not aligned properly when viewed using Android/IOS devices

    Asked by mariama on September 16, 2014 at 09:25 AM

    Hi,

     

    I'm having trouble with my form for iphone/android. I have the form exactly the way I want it for computer users

    but when I try the mobile version it is not working. It is too big and is not aligned properly

     

    can you help? Thanks.

     

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

     

     

    Page URL:
    www.mariamajannehinteriordesign.com

    form on iphone form on android form alignment mobile view
  • Profile Image
    JotForm Support

    Answered by Welvin on September 16, 2014 at 11:03 AM

    Hi,

    Please try adding the mobile responsive widget to your form: http://widgets.jotform.com/widget/mobile_responsive. This widget should work and make your form responsive to any kind of mobile devices.

    Add the widget to your form by following this guidehttp://www.jotform.com/help/252-How-to-Add-a-Widget-to-your-Form.

    Thank you!

  • Profile Image

    Answered by mariama on September 16, 2014 at 11:14 AM

    I already have it on my site. It still doesnt work. nothing is aligned the form is too big for the phone.

  • Profile Image
    JotForm Support

    Answered by david on September 16, 2014 at 12:42 PM

    Hi,

    It appears as though the form is trying to stretch to fit the frame.  You can try forcing the mobile CSS rather than using the widget to see if that helps.

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    @media only screen

    and (min-device-width : 320px)

    and (max-device-width : 480px) {

    .form-all {

    width: 320px !important;

    }

    .form-line {

    padding-top: 0px !important;

    padding-bottom: 0px !important;

    padding-left: 3px !important;

    }

    img.form-image {

    max-width: 100% !important;

    height: auto !important;

    }

    #id_1.form-line {

    padding-left: 36px !important;

    padding-right: 36px !important;

    }

    }

    You can then adjust the settings in your form until they suit the look of your mobile site.  Specifically 

    width: 320px !important;

    Changing the the 320px in this line will change the forced mobile width.

    Let us know if this still does not produce the results you are looking for and we will be happy to see what else we can do.

     

  • Profile Image

    Answered by mariama on September 16, 2014 at 04:42 PM

    Hi,

    sorry getting a little confused. I have tried what you said, still not working. Its not lining up. When you go to the page the writing is half on the page and half off, you have to move it which is annoying as it swings all over the place.

    I can't seem to do it properly.

  • Profile Image
    JotForm Support

    Answered by jonathan on September 16, 2014 at 04:55 PM

    Hi,

    From what I can see in your jotform http://www.jotformeu.com/form/23045796416357

    it seems you have not injected yet the suggested CSS code.

    Follow this user guide http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    and use the CSS code suggested by David. This one...

    @media only screen

    and (min-device-width : 320px)

    and (max-device-width : 480px) {

    .form-all {

    width: 320px !important;

    }

    .form-line {

    padding-top: 0px !important;

    padding-bottom: 0px !important;

    padding-left: 3px !important;

    }

    img.form-image {

    max-width: 100% !important;

    height: auto !important;

    }

    #id_1.form-line {

    padding-left: 36px !important;

    padding-right: 36px !important;

    }

    }

     

    You need to remove the Mobile Responsive widget on your form and manually use the injected CSS code method.

    Hope this is clear. Please inform us if you you are still having issue.

    Thanks.

     

     

  • Profile Image

    Answered by mariama on September 19, 2014 at 10:42 AM

    Hi,

     

    still not working. When you go to the page, it wobbles about all over the place.

    The "terms and conditions" is off the page and the writing at the top. I cannot get it to keep still.

     

    When I preview my my mobile site it is fine but when I visit on my iphone it doesnt line up.

     

    Thanks in advance.

  • Profile Image
    JotForm Designer

    Answered by omer on September 19, 2014 at 11:07 AM

    Hi marlama,

    Can you change the inject CSS code with the code below?

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

    .form-all {

    width: 320px !important;

    }

    .form-header-group {

    margin: 10px 0;

    }

    .form-line {

    padding-top: 0px !important;

    padding-bottom: 0px !important;

    padding-left: 3px !important

    }

    img.form-image {

    max-width: 100% !important;

    height: auto !important;

    }

    }

  • Profile Image

    Answered by mariama on September 19, 2014 at 11:58 AM

    Hi,

     

    Made it worse.

  • Profile Image
    JotForm Support

    Answered by david on September 19, 2014 at 01:29 PM

    Is there any way you can adjust the width of your sites mobile layout?  I do not think the form is going to fit the width that is set for your mobile layout unless you make the form really skinny.  

    I tried looking through the code on your page to see where this could be adjusted, but the code Wix generates is pretty unreadable.  If you can adjust the width of the mobile layout, make it a bit wider and see if that helps.  

    Let us know if it does not and we will be happy to see what else we can find.

  • Profile Image

    Answered by mariama on September 23, 2014 at 07:07 PM

    Hi still doesn't work. At a loss.

  • Profile Image
    JotForm Support

    Answered by Welvin on September 23, 2014 at 07:25 PM