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

    Why Is My Form Preview's Background Color Different?

    Asked by ronns 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 

    Screenshot
  • Profile Image

    Answered by pinoytech 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

    Answered by ronns 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
    JotForm Support

    Answered by idarktech 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
    JotForm Support

    Answered by idarktech 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

    Answered by ronns 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
    JotForm Support

    Answered by abajan 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
    JotForm Support

    Answered by abajan on July 23, 2012 at 09:14 PM

    By the way, here is the clone.

  • Profile Image

    Answered by ronns on July 23, 2012 at 09:45 PM

    Thank you idarktech and abajan! Great work.