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

    Is it possible to change the color of progress bar?

    Asked by nkasic on January 03, 2014 at 05:17 AM

    At the moment it's blue and it really doesn't fit in my web site color scheme.

    I found the way to translate text, but not how to change color.

    progress bar web site site and
  • Profile Image
    JotForm Support

    Answered by ardy0689 on January 03, 2014 at 10:21 AM

    Thank you for contacting us. At the moment there is no direct way to change the Progress bar color. However, it is possible to do when you embed your form using the full source code in which you have the ability to modify the CSS class of the progress bar and save it then host it on your server.

    All you need to do is find this section of your form and change the word blue to almost any color word you like such as "red", "yellow", "cyan", "black" and etc.. then save it and host it on your server.

     

    Just like in this example, I have downloaded the full source code and change the CSS class manually using notepad.

     

    Please let us know if this is something that you would not like to do. Thank you

  • Profile Image

    Answered by nkasic on January 05, 2014 at 07:56 AM

    Thanks, but I cannot use that solution. My company has strict rules about colours and I need to be able to precisely define colour by RGB or CMYK or #value, like on this site: http://www.telekom.com/home, or on this www.hrvatskitelekom.hr it has to be exactly the same hue of magenta.

  • Profile Image

    Answered by EliezerN on January 05, 2014 at 11:28 AM

    @nkasic

    An alternative solution would be to simply insert this CSS code to your form:

    .item-bar

    {

    background: #e5e5e5 !important;

    }

    .progressbar-control

    {

    background:#FFFFFF !important;

    }

    Using that code the colors of the bar will be like this one:

    Here is how to inject CSS codes: How inject custom CSS Codes

    I hope this helps. Pleas inform us if you need further assistance with this inquiry.

    Thanks

  • Profile Image

    Answered by nkasic on January 05, 2014 at 04:10 PM

    That's excellent!
    That way I can pick any colour if I know RGB values. Instructions how to convert RGB values into HEX codes are here: http://www.w3schools.com/html/html_colors.asp

    Thanks.

  • Profile Image
    JotForm Support

    Answered by jonathan on January 05, 2014 at 07:39 PM

    Hi,

    We are glad to know that our colleague's  EliezerN solution finally works for you.

    Contact us again anytime if further assistance is needed.

    Thanks!