Next and Back buttons not showing on mobile browsers

  • Profile Image
    hlaclair
    Asked 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.

  • Profile Image
    Jeanette
    Answered 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
    hlaclair
    Answered 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
    jonathan
    Answered 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
    jonathan
    Answered 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.