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 can I change the light yellow background of the Contact Form with Blue Envelope Theme?

    Asked by ninaonline on May 16, 2014 at 12:25 PM


    I want to change the light yellow background of the Contact Form with Blue Envelope Theme to white?  I am not talking about the background color behind the form (currently white), which can be changed in the JotForm editor in Form Style > Background.




    Page URL:

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on May 16, 2014 at 03:35 PM

    You cannot change the yellow color, as this is an image, sliced in 3 files:



    So you must download the images, and edit them with a photo editor (such as Photoshop or GIMP) in order to change the color.



    Once you are done, upload them, get the URL (you can use dropbox or gdrive), and replace the URL files in the Custom CSS code, make sure you keep the format (gif)

    padding-top: 0;
    font-family:"Verdana", sans-serif;
    /*--red border on error--*/
    .form-validation-error {
    border: 1px solid #FFB0B0 !important;
    /*---form textbox styles fixed---*/.form-textarea, .form-textbox  {
    border: 1px solid #b7bbbd;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    padding: 4px;
    background:transparent !important;
    -webkit-appearance: none;
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);
    box-shadow: inset 0 0 4px rgba(0,0,0,0.2), 0 1px 0 rgb(255,255,255);
    border: 1px solid #AEAEAE;
    color: #333;
    font-family:"Verdana", sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }ul.form-section li.form-line:first-child {
    background:url('https://shots.jotform.com/elton/images/bg_envelope_02.gif') no-repeat 0 2px;
    background:url('https://shots.jotform.com/elton/images/bg_envelope_wrapper.gif') repeat-y;
    }/*---remove error message---*/
    .form-error-message {
    display: none !important;
    .form-line-error {
    background: url('https://shots.jotform.com/elton/images/bg_envelope_wrapper.gif') repeat-y;
    }/*---submit button move--*/
    cursor: pointer;

    }.form-textarea:focus, .form-textbox:focus{
    outline:none !important;
    }/*--fix captcha--*/.form-captcha .form-textbox{
    width:130px !important;
    .form-line {
    padding: 6px 28px 6px 30px;
    width: auto;
    text-align:center !important;
    background: url('https://shots.jotform.com/elton/images/bg_envelope_11.gif') no-repeat 32px -10px;
    height: 315px;
    margin: -10px -100px -8px -100px;
    .form-button-error {
    position: absolute;
    top: 120px;
    left: 131px;
    width: 195px;

  • Profile Image

    Answered by safa  on July 17, 2015 at 07:07 PM

    hi tnx alot I have one question . where should I copy this code that you writed up ?