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

    Next and Back buttons not showing on mobile browsers

    Asked by hlaclair on June 18, 2014 at 11:28 AM

    I've injected CSS into the form to get the look I want, but I'm noticing that my page break CSS must be messing up when trying to display on mobile platforms. Can you help? I can't see the buttons at all on iPhone and only see a portion of it on Android.

    Page URL:
    http://www.jotformpro.com/form/41053533085953

    Screenshot
    Mobile next and Android Injected CSS all
  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on June 18, 2014 at 01:55 PM

    Our forms are mobile friendly. We do recommend to use the iFrame version of the form

     

    We also do recommend to add this code in your HTML page, before the </head> tag.

    <style>
    iframe, iframe#JotFormIFrame { height:500px !important; }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    But if you are using the direct link then add this code in your form styles (use this guide)

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen

    and (max-device-width: 320px)

    and (max-device-width : 100%) {

    iframe, .form-all {

    width: 100%!important;

    height:500px !important; } }

     

    In general, this code should fix the problem, but you can adjust the height accordingly until you get the desired effect.

  • Profile Image

    Answered by hlaclair on June 18, 2014 at 03:25 PM

    I tried using the code that you indicated for the direct link and nothing changed. I don't have access to the </head> tag so I can't use that. Any other suggestions?

  • Profile Image
    JotForm Support

    Answered by jonathan on June 18, 2014 at 05:14 PM

    @ hlaclair

    Hi,

    Are you still referring to this form http://www.jotformpro.com/form/41053533085953 ?

    I checked the form's injected CSS code, but I could not see the suggested code by Jeanette in your form. This was the only CSS code I see on the form http://pastie.org/9303411

    Please make the adjustment and add the suggested CSS code. Then check again if it makes the difference.

    Please inform us if you need more assistance.

    Thanks!

  • Profile Image
    JotForm Support

    Answered by jonathan on June 18, 2014 at 05:26 PM

    @ hlaclair

    You migh also want to use the Mobile Responsive widget on your form. As it makes it easier to make the form responsive when viewed in mobile browsers.

    Thanks.