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 to format Form Tabs widget with different colors and shape?

    Asked by russbanner on June 25, 2015 at 08:54 AM

    My form tabs widget is cutting across the frame edge into the background colour.. cant find out how to move it so it doesnt do this


    Please advise




    Page URL:

  • Profile Image

    Answered by russbanner on June 25, 2015 at 09:35 AM

    I found a code to change the tab shape, which has resolved my issue but need advice on how to change the background colour of the tabs, how can i do this and where?

     ps how do i change the font within the tab also.



  • Profile Image

    Answered by Ben on June 25, 2015 at 11:07 AM

    I am glad to hear that you were able to resolve the first issue with form tab shape and I have several other threads that might be of use to you:

    Make Form Tab Widgets rounded corner and change font color

    Form Tabs: How to re-style their appearance?

    Changing the look of the tabs on the form widget

    Now the first one talks about the shape and color and the second one you will see quite a lot of images and different shapes so that is a good one to check out as well, while the third one holds a bit of extra info.

    To answer your questions directly as well, this following code will change the background color of each tab:

    /* change background color of all tabs */
    .tabs-list li {
        background-color: blue;

    /* change background color of the selected tab */
    .tabs-list li.current {
        background-color: navy;

    Of course if you have any questions, do let us know and we would be happy to assist with them.

  • Profile Image

    Answered by russbanner on June 25, 2015 at 01:31 PM

    Hi Ben

    What are the colour codes for the tabs. you mentioned navy, blue, green, these aren't css colour codes, so please advise on the colour schemes. Where do I locate this code you mentioned?

    sorry bit of a novice here





  • Profile Image
    JotForm Support

    Answered by Charlie on June 25, 2015 at 02:42 PM

    If you want to pick a color anywhere on the website page, you can use the extension or plugin of Google Chrome here. The ColorPick Eyedropper will let you get the Hex code for the color, you can use that then in your CSS. 

    In CSS, you can declare colors, I believe, using 3 methods.

    1. Use the name of the color (ex. red, blue, green, and so on.).

    2. Using RGB format.

    3. Using Hex code.

    To learn more about this, you can check this guide.


    I hope that helps.

    Thank you.