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

    Problem with form on Safari on IPAD

    Asked by NRCsupport on February 25, 2014 at 03:32 PM

    I have a problem with my form on an IPAD running Safari. I don't know the IOS and Safari versions, as it is someone else who tried to run the form on their IPAD.

    My form has a coloured bar which sits at the bottom of the screen (and does not move when you scroll). The back, next and submit buttons sit within this bar. The message "there are errors..." appears in a red box just above the coloured bar. This is all controlled by injected CSS and works as intended on my PC using Firefox or IE8.

    On my friend's IPAD the submit button and the error message do not appear. The coloured bar and the back and next buttons do appear as expected.

    Does anyone know of any incompatibilities with CSS on Safari. Areas that I suspect could be wrong are position:fixed or z-index (maybe only with values greater than 999).

    Thanks in advance for any ideas.

    Page URL:
    http://form.jotformpro.com/form/40503979576971

    problem ipad message pc
  • Profile Image
    JotForm Support

    Answered by Mike_T on February 25, 2014 at 07:15 PM

    I think that you have a z-index conflict between 'form-pagebreak' and 'form-buttons-wrapper' classes. I have removed z-index values to illustrate this, here is a sample css:

    http://pastebin.com/01Bt2iTS

    Thank you.

  • Profile Image

    Answered by NRCsupport on February 25, 2014 at 08:47 PM

    Many thanks. After a minor change, that works fine on my PC. I'll ask my friend to try it on the IPAD tomorrow.

    The one minor change I had to make was to alter position:absolute to position:fixed on form-pagebreak and form-buttons-wrapper. With your version the line with the buttons went back to floating at the end of the page - whereas I want it fixed at the bottom of the screen. Anyhow that's ok now, so let's hope that the IPAD is happy too.

  • Profile Image

    Answered by Cesar on February 25, 2014 at 11:04 PM

    On behalf of my colleague, Thank you for your input. Do let us know if the issue persists once you have tried the form on the iPad. Thank you again.

  • Profile Image

    Answered by NRCsupport on March 02, 2014 at 12:43 PM

    Unfortunately that did not work on the Ipad. BUT I have now found a method seemsto work. Below is my injected CSS, with a load of added comments trying to explain what is going on. I hope this is useful and that it is of somehelp to others who want to keep the buttons fixed on the screen.

    It is not much use on a tiny screen, such as a mobile phone but I don't think that my form or my website would be much use on such a screen.

    body {
    line-height:1.1;
    overflow-y:scroll;
    }
    p {
    margin-top:0;
    margin-bottom:.5em;
    }
    .form-all {
    padding-top:0!important;
    padding-bottom:0!important;
    margin-top:0;
    margin-bottom:.5em;
    line-height:1.1;
    }
    .form-header-group,.form-subHeader {
    text-align:center!important;
    margin-top:0;
    margin-bottom:.5em;
    padding:0!important;
    }
    label[for=input_30_0] {
    visibility:hidden!important;
    }
    #id_4 {
    margin-right:20px;
    margin-left:20px;
    }
    #cid_100 {
    margin-left:-25px;
    }
    #cid_101 {
    margin-left:-50px;
    }/* Down to here is just to do with altering line spacing or individal fieds*/
    /* Below here is to but back, next and submit buttons in a fixed band at the bottom of the screen */
    /* and the page and form error messages into a red box just above the band. These items do not */
    /* regardless of scrolling or length of the actual page */
    /* Seems not to work in an Iframe. I suspect that fixed positioning becomes relative to the Iframe instead of the viewport */
    .form-button-error > p {
    margin:0!important;
    }
    .form-button-error {
    position:fixed!important;/* fixed so thatcan be at a fixed place relative to the screen */
    bottom:39px!important;/* place just above the button bar */
    z-index:1050!important;/* high value to ensure it is over anything else (i.e. hides the bit of the page that it covers */
    margin-left:130px!important;/* places it roughly centrally in the line. My form width is 760px. */
    /* might not always be central, depending on form width, screen width, and window size */
    /* could be improved using calculation in the css (something like 50% - 65px */
    /* but calculation is not available in IE8 I believe */
    border:2px solid red!important;
    background-color:#FFF!important;
    color:red!important;
    padding:6px!important;
    }
    .form-pagebreak {
    /* This creates the bar across the bottom of the screen. Has to be position : fixed */
    position : fixed !important;
    width:760px !important ; /* The width of my form. Others might want a different value here */
    bottom:0 !important ;
    z-index : 1000 ; /* Allow to be covered by the other wrappers */
    }
    .form-buttons-wrapper {
    /* background for submit button. Starts half way across the form-pagebreak bar */
    /* causes funny happening if the window is reduced a lot below the form width */
    position : fixed !important; /* also has to be fixed. It would be so much easier if this wrapper */
    /* were located within the form-pagebreak container. At present it is necessary to prevent */
    /* form-buttons-wrapper lying over the back and next buttons, and to prevent form-pagebreak */
    /* from lying over the submit button. On Safari it appears that if A overlays B, then it also overlays */
    /* anything within B, even if it has larger z-index than A. */
    left:50% !important;
    }
    .form-pagebreak-next-container, /* these contain the back and next buttons, and are contained */
    .form-pagebreak-back-container{ /* form-pagebreak, so there position is absolute which positions */
    position:absolute !important;   /* them relative to form-pagebreak
    }
    .form-pagebreak-next-container, /* All three button wrappers are basically identical */
    .form-pagebreak-back-container,
    .form-buttons-wrapper {
    width:190px !important ; /* This is one quarter of the form width, and will need changing for different width or for more buttons */
    bottom:0 !important ;
    z-index : 1010 ; /* z-index ensure they overlay form-pagebreak */
    }
    .form-pagebreak, /* set all the containers to 39px high and the same colour */
    .form-pagebreak-next-container,
    .form-pagebreak-back-container,
    .form-buttons-wrapper {
    height:39px!important;
    overflow:hidden; !important ;
    background-color:#A07FB3 !important; /* change this if you want a different colour for the bar */
    border-style:none!important;
    margin:0 !important;
    padding:0 ;
    }
    .form-pagebreak-back-container {
    left:0px!important ;
    }
    .form-pagebreak-next-container {
    left:190px!important ; /* Once again this is one quarter of the form width */
    }
    .form-pagebreak-back, /* the buttons themselves, obviously can be changed */
    .form-pagebreak-next,
    .form-submit-button {
    position:absolute!important;
    z-index: 1050 !important; /* puts them on top of everything else */
    bottom:3px!important;
    width:125px!important;
    height:33px!important;
    padding-left:1px!important;
    padding-right:1px!important;
    font-size:14px!important;
    color:#000!important;
    font-weight:700!important;
    margin:0!important;
    left:65px!important; /* provides spacing between buttons. left + width must not be more than container width 190px at present */
    } /* below here is general layout stuff. not to do with button bar */
    .form-html,.form-line {
    margin-top:0;
    margin-bottom:.5em;
    padding:0!important;
    }
    NOTE : only allows for the three buttons needed on my form. Could obviously be modified for more buttons.
    Things woud be a bit easier if one could use css calculation (not available in IE8), or if all the bottons were contained in a single overall container.
    It is also necessary to provide some space at the bottom of each page, so that it can be fully scrolled up from behind the
    button bar and error line. JotForm suggested putting a padding at the bottom of each page-section. Unfortunately a form collapse also ends a form-section,
    so extra gaps were appearing. I have replaced this by putting a text block at the end of each page, saying ---- end of page ---- or ---- end of form ----.
    In each case the block also contains 4 new lines.

  • Profile Image

    Answered by Cesar on March 02, 2014 at 01:57 PM

    @NRCsupport

    Thank you for the input. This is definitely worth looking into. In any case, if you do need any further assistance or comments. Do let us know. Thank you again.

  • Profile Image

    Answered by born on March 02, 2014 at 03:03 PM

    I too, have an Ipad issue with my form http://www.bornshorts.com/entry

    It briefly shows up when using Chrome but then dissapears but doesn't show at all in Safari.

    Other forms seems to work fine, just mention above that it relates to the 'Form Pagebreak, howcome or more importantly how do I fix it?

  • Profile Image

    Answered by NRCsupport on March 02, 2014 at 04:04 PM

    Hopefully someone from JotForm will look at your problem.You might need to start a new thread.

    As a matter of interest, does it work on other browsers? I've no idea how pagebreaks are coded in Jotform, but if they do something like altering z-levels to make one page overwite another, then it might be falling foul of the same thing that caused my problem on Safari.

    Basically if an item has a z-level value defined, then it will be overlaid on top of anything with a lower z-level. But as I understand it, on Safari (and possibly Chrome), if item A overlays item B, then it will also overlay any nested items enclosed in item B, even when their z-level is higher than that of item A.

    I believe that in IE and FireFox, items with higher z-level always overlay those of lower z-level, regardless of how the items are nested. I don't know if one of the approaches is wrong, or if the behaviour is undefined and therfore up to the implementor of the browser.

  • Profile Image

    Answered by born on March 02, 2014 at 04:14 PM

    Yeah I will start a one. Doesn't work in Chrome either. Don't know what z-level is but thanks.

  • Profile Image

    Answered by NRCsupport on March 02, 2014 at 04:29 PM

    I think I read that Chrome uses similar technology to Safari. z-level is something in css that is used to specify what should appear on top of what else when they occupy the same part of the screen.