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

    Text color not changing for the sliders with calculated result widget

    Asked by nhamwey on July 28, 2017 at 11:05 AM

    I am using the Sliders With Calculated Result widget and want to change up the design.

    When using the custom CSS area, I am able to design the slider's text and have it appear correctly while in the "Build" section of the form creator.

    But when I publish the form, the changes are not present and the html I add in is now gone.

     

    Using td.label_row {color: red;} works when published, but I need to individually make the text on each slider a different color, so this does not work for me.

    I think it is a matter of just adding in the sliderID but I am having trouble getting that to work.

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by Kiran on July 28, 2017 at 01:29 PM

    I have cloned your JotForm to my account and see that the widget is displaying the text normally on both edit and preview modes. As I check the custom CSS section of the widget, I see that there is no code added to change the color. Could you provide us with the CSS code that you are trying to add to the widget so that we can check it further?

     

  • Profile Image

    Answered by nhamwey on July 28, 2017 at 04:14 PM

    Yeah there is no code in there as I have been changing and trying different things.

     

    It works using td.label_row, I just need to know what to put if I want to specify the individual rows instead of all of them.

    There is a sliderid="0" in the code, which is what I think I need, but dont know how to format the beginning of the code.

    ie. td.label_row sliderid.0 {code}

  • Profile Image
    JotForm Support

    Answered by BDAVID on July 28, 2017 at 05:43 PM

    Try with this code to target each label:

    .sliderTable tr:nth-of-type(1) td.label_row   {

    color: red;

    }

    .sliderTable tr:nth-of-type(2) td.label_row   {

    color: blue;

    }

    .sliderTable tr:nth-of-type(3) td.label_row   {

    color: green;

    }

    .sliderTable tr:nth-of-type(4) td.label_row   {

    color: darkblue;

    }

    .sliderTable tr:nth-of-type(5) td.label_row   {

    color: yellow;

    font-weight: bold;

    }

    Result: https://form.jotformpro.com/72086437179970 

    Let us know if you need anything else, we will be glad to assist you.

  • Profile Image

    Answered by nhamwey on July 28, 2017 at 05:51 PM

    It works. Thank you very much

  • Profile Image

    Answered by nhamwey on July 28, 2017 at 06:07 PM

    Any way to just get those circle letters in the colors while the rest of the text stays black?

    Tried a <span> in the "General" settings, and again it works in the Builder but not when published.

    Thanks

  • Profile Image
    JotForm Support

    Answered by BDAVID on July 28, 2017 at 07:28 PM

    Remove the circle letters, and put them through this custom CSS code:

    .sliderTable tr:nth-of-type(1) td:nth-of-type(1):before{

    content: "Ⓤ " !important;

    color: red;

    }

    .sliderTable tr:nth-of-type(2) td:nth-of-type(1):before{

    content: "Ⓢ " !important;

    color: blue;

    }

    .sliderTable tr:nth-of-type(3) td:nth-of-type(1):before{

    content: "Ⓢ " !important;

    color: green;

    }

    .sliderTable tr:nth-of-type(4) td:nth-of-type(1):before{

    content: "Ⓦ " !important;

    color: darkblue;

    }

    .sliderTable tr:nth-of-type(5) td:nth-of-type(1):before{

    content: "Ⓘ " !important;

    color: yellow;

    }

    Result: https://form.jotformpro.com/72086437179970