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

    Quantity Gift Registry: Change font color of items in the list

    Asked by clarkschool on April 15, 2016 at 11:36 AM

    Hello,

    I've tried to inject CSS to change the font of the items in the Quantity Gift Registry widget ("Please place your order (cash/check)"), but I guess I'm not using the correct code to make it match all the other font on the form. Can you please help?

    Thank you!

    Page URL:
    https://form.jotform.com/61054623665152

    font color quantity font change font color
  • Profile Image
    JotForm Support

    Answered by david on April 15, 2016 at 01:46 PM

    I checked your form and it looks like several changes have been made to the quantity gift registry widget.  If you wouldn't mind letting us know what else specifically needs to be changed, we will be happy to help.

  • Profile Image

    Answered by clarkschool on April 15, 2016 at 02:24 PM

    Hi there, there's an arrow pointing to the font that I'm having trouble with. I want it to be the same color as the font on the rest of the form, and I need the correct CSS because it is a widget. Can you please provide me the correct CSS? Though it was called "checklist label", but should I call it something else? Thank you!

  • Profile Image
    JotForm Support

    Answered by david on April 15, 2016 at 03:55 PM

    Adding this code to your form will change the font color for the inventory widgets labels:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    .form-product-name{
    color : blue;
    }

    Add the code to the form itself, not to the widgets CSS section.  Change the color and add whatever other styling those labels require.

  • Profile Image

    Answered by clarkschool on April 19, 2016 at 09:51 AM

    Thank you.

    I added

    .form-product-name{
    color : black;
    }

    to my form (not the widget), but it didn't seem to do anything. I even tried using a hex color code instead, but that didn't do anything either. Would you please take another look and let me know what you think?

  • Profile Image

    Answered by Carina on April 19, 2016 at 10:17 AM

    Please try adding the following css code to the widget's custom css:

    .checklist label {

       color: #ffffff !important;

    }

    You can test and clone the demo form:  

    https://form.jotform.com/61094305183956 

    Let us know if we can assist you further.   

  • Profile Image

    Answered by clarkschool on April 19, 2016 at 10:40 AM

    Using #ffffff changes the font to white, so I used #000000 to make it black, but it still looks gray-blue on the designer preview. I even removed the code that I added to the form itself (that David provided above), thinking that the two things were conflicting, to no avail.

    I'm going to have to go live with this form today, and this isn't a deal-breaker, but it would be nice if the font was uniform. If you can think of anything else, please let me know.

    Thanks--I really appreciate your help!

  • Profile Image

    Answered by Carina on April 19, 2016 at 10:50 AM

    Please try cloning the demo form:

    https://form.jotform.com/61094305183956 

    I have changed the color to black and added font-weight bold, which you can remove if you think it's too much:

    Let us know if it is different than the desired result.

  • Profile Image

    Answered by clarkschool on April 19, 2016 at 11:34 AM

    YES! That's it! Thank you!!! Very helpful!