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

    How to change background page of multi-page forms

    Asked by john.roscoe on March 22, 2014 at 05:25 PM

    I know how to change the background page (behind the form), but multi-page forms are different lengths and the lower area retains the form colour over the whole width.

    In the example screenshot I uploaded the background is dark grey on each side, but I want the bottom area to be grey as well.

     

    Screenshot
    different colour and
  • Profile Image
    JotForm Support

    Answered by jonathan on March 22, 2014 at 10:35 PM

    Hi,

    I think it has to do with the CSS code

    body{

    background-color: #909090;

    }

    I removed that code and modified the .form-all class CSS code to this instead

    .form-all {

    border: thin solid;

    background-color: #909090 !important;

    }

    and the form is now like this https://www.jotform.com/form/40808412702952
    Here is the full CSS code I used if you want to copy
    .form-all {
    border: thin solid;
    background-color: #909090 !important;
    }
    .form-pagebreak {
    background:#F5F5F5;
    }
    .form-pagebreak-next-container {
    padding-left: 265px;
    }
    .form-collapse-table {
    height: 40px !important;
    }
    .form-collapse-mid {
    font-size: 14px !important;
    }
    em {color:transparent}
    Hope this help. Inform us if you need further assistance.
    Thanks.
  • Profile Image

    Answered by john.roscoe on March 25, 2014 at 12:11 AM

    OK Thanks - but thats not what I wanted - you have only changed the form colour to dark grey and I want it to stay as #FFF6DE.

    However you gave me the clue I wanted. 

    This is what I tried and it seems to work: Change the form background to dark grey in Preferences, and body background-color to dark grey in CSS. Then override form.all background-color back to pale yellow in CSS.

    .form-all {

    border: thin solid;
    background-color:#FFF6DE !important;
    }
    .form-pagebreak {
    background:#F5F5F5;
    }
    .form-pagebreak-next-container {
    padding-left: 265px;
    }
    .form-collapse-table {
    height: 40px !important;
    }
    .form-collapse-mid {
    font-size: 14px !important;
    }
    body {
    background-color: #909090 !important;
    }
    em {color:transparent}

  • Profile Image

    Answered by Cesar on March 25, 2014 at 01:29 AM

    Thank you for input. great to see you have it working.

    Do let us know if you need further assistance. Thank you.