Changing the background color of the fields

  • brendonl
    Asked on September 27, 2016 at 7:33 AM

    Hi I'm trying to remove borders around the individual fields so that i can create a look of the form being split into sections.  I have tried a fee different option of CSS, b cant seem to get it.

    Thanks 

    Jotform Thread 942776 Screenshot
  • Jan
    Replied on September 27, 2016 at 11:02 AM

    Those lines are the background color of the form container. We can change the background color to light gray so that it'll look the same as the other fields. Please try inserting this custom CSS code:

    .supernova .form-all, .form-all {
    background-color: #cccccc !important;
    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes.

    Hope that helps. Thank you.

  • brendonl
    Replied on September 28, 2016 at 9:37 AM

    Hi Jan,

    Thanks for the response. Except this solution changes the entire form to one colour. What I'm trying to achieve is to have sections of the form shaded different colours. There by emphasizing a group of information to be filled out.

    Thanks

  • Jan
    Replied on September 28, 2016 at 11:04 AM

    The CSS code I provided above will remove all other colors in the form container. If you want to assign a different color on a field, then you can get the selector id of the field and apply CSS into it.

    In Google Chrome, you just need to right click the field and choose "Inspect". The developer tools will appear and you'll see the assigned id (id_15) to the "Job Title" field. You can now target this element using this code:

    #id_15 { background-color: green !important; }

    Changing the background color of the fields Image 1 Screenshot 30

    Here's the result:

    Changing the background color of the fields Image 2 Screenshot 41

    Here's a guide on How-to-Inject-Custom-CSS-Codes. We can help you in regards to CSS. You just need to provide the field that you want to change and your preferred color.

    Hope that helps. Thank you.

  • brendonl
    Replied on September 29, 2016 at 9:17 AM

    Hi Jan,

    That's not going to help either see the effect below. So say I want to group the 3 green fields together (Full name, Job title, Email) and the next 5 fields RED. I will still have what looks like borders. In this case either green with red borders or red with green borders.

     

    I'd like the form fields grouped in sections with the use of colour, but cant'd do that if I'm unable to remove/colour the space around an individual field

    Changing the background color of the fields Image 1 Screenshot 20

     

    Thanks

  • brendonl
    Replied on September 29, 2016 at 9:20 AM

    Hi Jan I figured it out thanks for all your help

  • Jan
    Replied on September 29, 2016 at 11:04 AM

    Glad to hear that you figured it out. If you need any help, don't hesitate to contact us. Thank you.