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

    Changing the background color of the fields

    Asked by brendonl on September 27, 2016 at 07: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 

    Page URL:
    https://form.myjotform.com/52992054796570

    Screenshot
    sections different create thanks
  • Profile Image
    JotForm Support

    Answered by Jan 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.

  • Profile Image

    Answered by brendonl on September 28, 2016 at 09: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

  • Profile Image
    JotForm Support

    Answered by Jan 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; }

    Here's the result:

    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.

  • Profile Image

    Answered by brendonl on September 29, 2016 at 09: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

     

    Thanks

  • Profile Image

    Answered by brendonl on September 29, 2016 at 09:20 AM

    Hi Jan I figured it out thanks for all your help

  • Profile Image
    JotForm Support

    Answered by Jan 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.