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

    JotForm is responsive right?

    Asked by Turnupgear on April 12, 2014 at 05:59 PM

    Hi,

    JotForm is responsive right,but it's working as a responsive in my site,check this page from mobile or mobile emulator http://turnupgear.com/pages/calling-all-djs ,you will see the form gets cut off,why is that happening,from what I know jotforms are responsive by default.

    Please help,

    Thanks

    Page URL:
    http://turnupgear.com/pages/calling-all-djs

    Screenshot
    JotForm Mobile check site
  • Profile Image
    JotForm Support

    Answered by ashwin_d on April 13, 2014 at 03:25 AM

    Hello Turnupgear,

    Our forms are mobile optimized and they appear good on mobile devices. But, it really depends on the webpage layout and field sizes and you can inject mobile specific custom css code in your form to adjust the look of your form in mobile devices. 

    There are few steps required for your form to optimize for mobile:

    1. Change your form field label to align top.

    2. Embed your form with its iFrame embed code.

    2. Please inject the following custom css code and see if this helps you:

    @media only screen

    and (min-device-width : 320px)

    and (max-device-width : 480px) 

    {.form-label-top {width: 220px !important; font-size: 12px !important;}

    .form-header {width: 220px !important;}

    }

    Please check this cloned form and see if this appears as expected on mobile devices:  http://form.jotformpro.com/form/41021313501937? Feel free to clone this form for a closer look. The following guide shoudl help you in form cloning:  http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Thank you!

  • Profile Image

    Answered by Turnupgear on April 13, 2014 at 04:53 AM

    hi,

    I added those css you provided,and I also tried to add css on my own,it doesn't seem to affect the forms styling.I have checked using Firebug there are some inline css are getting loaded. How to fix this issue,or should i use the actual source code and add css on that?

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on April 13, 2014 at 09:17 AM

    You have to inject the custom CSS codes to your form by following this guide: How-to-Inject-Custom-CSS-Codes

     

    I did checked it using my Android Device and using emulator but all looks the same with responsive formatting:

    iPhone: https://shots.jotform.com/welvin/ss/1xu9juhqkhqjtqg6f26j.png

    Android: https://shots.jotform.com/welvin/ss/8hh6x22cu5ntks82biba.png

     

    Did you check it using your actual mobile device?

    Thanks

  • Profile Image

    Answered by Turnupgear on April 18, 2014 at 07:37 AM

    Yes I recieve the same problem on my mobile device

  • Profile Image
    JotForm Support

    Answered by jonathan on April 18, 2014 at 11:25 AM

    Hi,

    Can you please clarify if this was the form involve http://www.jotformpro.com/form/33487323050954

    I did checked the form, but I found no injected CSS codes on it to make it mobile responsive.

    Please clarify if this is the wrong form I was checking.

    Thanks!