how do I change the background color in a field?

  • Profile Image
    cpk
    Asked on June 29, 2011 at 02:58 PM
  • Profile Image
    abajan
    Answered on June 29, 2011 at 10:50 PM

    Hi cpk

    Thanks for asking. To give a definitive answer, I would need to know the form and field(s) in that form whose background(s) you would like to change. So, please supply the URL (to find that info, click the Preview button while on the Setup & Embed tab) of the form and tell us specifically the field or fields to which you are referring.

    Thanks.


    ~ Wayne

  • Profile Image
    cpk
    Answered on June 30, 2011 at 06:51 AM

    Hello 

    Thanks for the very prompt response. The url is http://www.jotform.com/form/11791042605 and it can be seen in use on http://www.candelabraforhire.com/contact.htm I would like to tone down the white background in the fields with some light tone to match the site colour scheme. If you can point me in the direction of the relevant .css that would be helpful

    Thanks

    Charles

  • Profile Image
    abajan
    Answered on June 30, 2011 at 07:15 AM

    Hi cpk

    This can be easily accomplished with unthemed forms by just injecting the following CSS:

    input, textarea {
    background-color: khaki;
    }

    (khaki is one of the HTML named colors)

    However, changing the backgrounds of those same elements is going to be a bit trickier with your form but it can still be done. Text boxes and text areas in forms styled with the JotForm theme, contain a grayscale image measuring 1 pixel wide by 14 pixels high named style1_txt_bg.gif and in your case, to properly blend with both the background color that will be applied to the inputs and the page in which the form is embedded, the color of that image will need to be changed. I am currently working on a solution for you which shouldn't take too long, provided I don't need to deal with more pressing matters which may intervene in the interim.

    ~ Wayne

    UPDATE: One solution (there may be others) is to select and copy the following CSS to your clipboard [Ctrl + C], load the form into the form builder and while on the Setup & Embed tab, click Preferences > Form Styles and paste [Ctrl + V] what was copied to the right of the area labelled Inject Custom CSS (where it states "Click to edit") :

    .form-textbox,
    .form-textarea,
    .form-upload,
    .form-dropdown,
    .form-matrix-column-headers,
    .form-matrix-row-headers,
    .form-matrix-values {
    background:url(https://cms.jotform.com/uploads/image_upload/image_upload/global/2011_style1_txt_bg_khaki.png)
    #F4EEAE top repeat-x;
    }

    In reality, for your particular form, only the .form-textbox and .form-textarea classes need to be targetted but in case you need to add other types of inputs down the road, the injected CSS would have already taken care of their styling too.

    (Make sure ALL of the code is selected before copying it. As you can see, the image's URL is quite long and overflows the boundary of this cell.)

    If a differently shaded background is required, you will need to update both the color in the above code (#F4EEAE) and the image to which I earlier referred. Two tools assisted me in modelling the new image (style1_txt_bg_khaki.png) based on style1_txt_bg.gif. They were Color Cop and W3Schools' Color Picker.

    Please let us know if the solution provided above works to your satisfaction and/or if you require clarification on anything. Our team will be happy to assist you.


    ~ Wayne

  • Profile Image
    cpk
    Answered on July 01, 2011 at 05:51 AM

    That's brilliant - many thanks for your impressive response.

    Cheers

    Charles

  • Profile Image
    abajan
    Answered on July 01, 2011 at 06:21 AM

    Always happy to help our help our users, Charles :)

    ~ Wayne