Why Is My Form Preview's Background Color Different?

  • Profile Image
    ronns
    Asked on July 23, 2012 at 06:43 PM

    I changed the color of a form template from black to blue, but when I view
    the preview, the background is still mostly black. Here is a screenshot:
    http://www.localdominion.com/jf_screeenshot.jpg 

    Please advise. 


    Thank you 

  • Profile Image
    pinoytech
    Answered on July 23, 2012 at 06:58 PM

    Hi,

    Is this the kind of form you want to achieved? If yes, let me know so I can fixed the background issue of your form or cloned it. Here's the guideline on how to clone form: http://www.jotform.com/help/28-How-to-Clone-a-Form-from-a-Web-Page

    Thank you!

  • Profile Image
    ronns
    Answered on July 23, 2012 at 08:18 PM

    Yes, thank you -- on the left is how I want the form, with a blue background. Is there a way I can do it myself?

  • Profile Image
    idarktech
    Answered on July 23, 2012 at 08:43 PM

    @ronns,

    Inject the following codes to your form:

    .form-section {

    border-top: none !important;

    background: #105F97 !important;

    }

    Follow this guide: How to Inject Custom CSS Codes

    This should fix it. Let us know if you need anything else. Thanks!

  • Profile Image
    idarktech
    Answered on July 23, 2012 at 08:51 PM

    You will also need this to fix the button text alignment:

    .form-submit-button-simple_red {

    padding: 3px 18px !important;

    }

    .form-submit-button {

    height: 35px !important;

    }

    Thanks!

  • Profile Image
    ronns
    Answered on July 23, 2012 at 08:55 PM

    It worked! Thank you. 
    But why didn't it work correctly in the first place, without having to inject code?
    I ask, because I once made a different form for someone else (on their account) and ran into the same problem then.

  • Profile Image
    abajan
    Answered on July 23, 2012 at 09:11 PM

    @ronns

    I too was trying to figure out what was causing both the black background and the submit button's text offsetting from the center. There seems to be a lot of unnecessary injected code in that form but experimentation on a clone of the form revealed that removing the following rules fixed the issues:

    .form-section{
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    padding-left: 4px;
    margin:0;
    border:1px;
    border-top:3px solid #000;
    background:#000 url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6142_form_top.gif) repeat-x;
    }

    .form-submit-button{
    padding:0 20px;
    height:32px;
    line-height:32px;
    border:1px solid #70ad2e;
    background:#5aae00 url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6141_form_button.gif) repeat-x;
    color:#fff;
    cursor:pointer;
    text-align:center;
    }

    (The first rule causes the black background and the second, the button's text issue)

  • Profile Image
    abajan
    Answered on July 23, 2012 at 09:14 PM

    By the way, here is the clone.

  • Profile Image
    ronns
    Answered on July 23, 2012 at 09:45 PM

    Thank you idarktech and abajan! Great work.