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 look of the Form Tabs widget on the jotform

    Asked by guineapigme on February 22, 2015 at 11:15 AM

    I am trying to change the look and feel of the tabs on my forms widget which I am excited to use.

     

    http://www.jotform.com//?formID=43637462243152

     

    In particular, I would like the tabs to be rounded with no triangles, perhaps a different color and to be able to stand out from the rest of the form.  Right now, they don't show up.

     

    I have tried injecting some custom CSS from one of your other examples to change the look and color of my tabs widget.

    Firstly, I have tried to use the example from this support dialogue and inject the code.  I see no changes.

     

    http://www.jotform.com/answers/422893-Make-Form-Tab-Widgets-rounded-corner-and-change-font-color

     

    I have used the toolbar CSS location to try to inject the code.

     

    Thanks for any help here.   

    form tabs custom CSS CSS
  • Profile Image
    JotForm Support

    Answered by EltonCris on February 22, 2015 at 12:23 PM

    Hi,

    Try it with these CSS codes. Change the color values to get the desired result.

    div.liBefore, div.liAfter {

    display: none !important;

    }

    .tabs-list li {

    border-radius: 10px !important;

    color: #FFF !important;

    background: #DFDFDF !important;

    }

    .current {

    background: #FFC1C1 !important;

    color: #FFF !important;

    }

    The CSS above should output like the following image.

    Make sure to inject this CSS codes in the Designer - CSS tab.

    If you need further assistance, let us know.

    Regards!

  • Profile Image

    Answered by guineapigme on February 22, 2015 at 01:03 PM

    Thanks!  My tabs shapes are different.  However, I do not see a color change when I mouseover or click on a tab.  They all appear the same.  I don't see the red change you implemented.  

    What did I do wrong?

  • Profile Image

    Answered by Ben on February 22, 2015 at 02:50 PM

    I do apologize for the confusion, I see that my colleague had mentioned that you should add the CSS code to the Form Styles, but they should go into the widget custom CSS field instead as only then will it use it.

    To do so, please click on tabs widget wizard button - a wand like icon in the quick action bar

    Once you do, you should scroll down until you get to the custom CSS field and you should add the code you have there and click on Finish button.

    Please do let us know how it goes.

  • Profile Image

    Answered by guineapigme on February 22, 2015 at 02:56 PM

    Actually, I had tried this didn't have luck this way either. ??

     

    COuld you take a look at that part of my form and see if it got inserted correctly?


    Also, should I have the duplicate CSS code in the overall CSS portion in the designer area?

    Will this overwrite other things?

     

     

  • Profile Image

    Answered by Ben on February 22, 2015 at 03:46 PM

    OK, I see what is going on. There are actually other entries with different values, resulting in this behavior. It also seems that our team had updated tabs widget, so that both styles from within custom CSS field and from the form styles are both being used (so both my colleague and myself were correct with where you should add the code).

    I do however suggest leaving the code related to the widget in the widgets custom CSS field as that would allow you to make the changes to it easily (without the need to go through all the other CSS code).

    Please try adding this code to the widget and it should work for you:

    div.liBefore, div.liAfter {
      display: none !important;
    }
    .tabs-list li {
      border-radius: 10px !important;
      color: #FFF !important;
      background: #DFDFDF !important;
    }
    .tabs-list li.current {
      background: #ffc1c1 !important;
      color: #FFF !important;
    }

    As you can see I have made a change from from .current to add more info on which field we want to style which leads it to be more important than other rules in there.

    As mentioned, please add this code to the code for the widget itself.

    Do let us know how it goes.

  • Profile Image

    Answered by guineapigme on February 22, 2015 at 04:23 PM

    Thank you,

     

    I now see the highlighted tab show up as a soft red.

     

    Which parameter affects the background color of the tab?

     

    I have tried altering the DFDFDF quantity and the regular background color of the tabs  remains gray.

     

    I am trying to be able to choose a brighter color for the tabs and a whiter color for the font to make them stand out

    Is this under my control?


    Thanks very much,


    Deborah

  • Profile Image

    Answered by guineapigme on February 22, 2015 at 05:47 PM

    I cannot affect the colors through my custom widget CSS section at all.

     

  • Profile Image
    JotForm Support

    Answered by BDAVID on February 22, 2015 at 05:49 PM

    The parameters that affect the background color of the tabs are these:

    The parameters that affects the the fonts are these:

    Example:

    Here is my cloned form: http://form.jotformpro.com/form/50527281580959?

    You may clone it in your account if you want to:

    http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Let us know if you need more help, we will be glad to assist you.

     

  • Profile Image

    Answered by FENJdid on October 15, 2015 at 09:09 AM

    How to change FONT and carracter and size of texte ????

    How to make it ???

  • Profile Image
    JotForm Support

    Answered by beril on October 15, 2015 at 10:30 AM

    Hi,

    I've created a separate thread for you, so anyone in the support staff will be able to assist you with your specific requirement. Please follow up there:

    http://www.jotform.com/answers/682122/?entrymessage=10732640770

    Thank you

  • Profile Image

    Answered by browningreagle on May 16, 2016 at 03:37 PM

    I'd like to re-open this as I'm experiencing the same issue as the OP.

    I've copied Ben's code and no matter what I do, I cannot get the current tab color to change from white.  I even changed the background color for the current tab to #000000 (BLACK).  I can change the color of the font, but the background color insists on being white.

    Here's the link to my form: https://form.jotform.com/50756010705144

  • Profile Image

    Answered by browningreagle on May 16, 2016 at 03:42 PM

    Out of curiosity, I checked out the link to the cloned form in BDAVID's post, and the current tab is displayed white as well (though I have no idea if he changed it to white after posting the link).  I thought perhaps it might be a browser issue, so I cleared my cache & whatnot which didn't work.  I'm currently using Chrome, and checked Internet Explorer as well, which yielded the same results.

  • Profile Image
    JotForm Support

    Answered by Mike on May 16, 2016 at 05:11 PM

    @Browningreagle,

    It seems that you have already fixed the issue by using a '.tabs-list.default li.current' selector in your CSS:

    .tabs-list.default li {
    color:#5d5c58 !important;
    background: #dfdfdf !important;
    }

    .tabs-list.default li.current {
    color:#ffffff !important;
    background: #305096 !important;
    border-top: none !important;
    border-left: 1px solid #305096 !important;
    border-right: 1px solid #305096 !important;
    }

    .tabs-list.default .liAfter, .tabs-list.default .liBefore {
    border-bottom-color: #dfdfdf !important;
    }

    .tabs-list.default li.current .liAfter, .tabs-list.default li.current .liBefore {
    border-bottom-color: #305096 !important;
    }

    The form looks good.

  • Profile Image

    Answered by browningreagle on May 17, 2016 at 10:05 AM

    @Mike,

    Yeah, I stumbled across another post which contained a working code, and another post from that one.  Two variations, both of which worked, but I still needed to tweak it a little bit to get the look I wanted.

    Thanks!

    https://www.jotform.com/answers/715014-Changing-the-Form-Tabs-color

    http://www.jotform.com/answers/718038-Problems-with-Form-Tab-Widget-Custom-CSS/

  • Profile Image
    JotForm Support

    Answered by Charlie on May 17, 2016 at 12:24 PM

    @browningreagle

    We're glad to hear that you have found some working codes on other threads. If you need further tweaking on it. Please do not hesitate to open a new thread here in the forum.

    Thank you.