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 can I change widget's CSS?

    Asked by rduong on November 25, 2016 at 02:40 PM

    Hi,

    I'm using this widget : https://widgets.jotform.com/widget/gift_registry

    but i want change label color...in white or an other color...can you help me and give me a CSS code please ?

    Page URL:
    https://form.jotformeu.com/62862971667370

    JotForm uploads label jpg
  • Profile Image
    JotForm Support

    Answered by olivia on November 25, 2016 at 03:42 PM

    Hi,

    You can change widget`s custom CSS according to your needs.

    I have cloned your form to my side and make some changes on it according to your request. Please follow the steps below and apply them to your form on your side.

    #1- You need to learn "class name" of fields in your widget. Please preview your form on your browser and inspect your form.

    As you can see in the following .checklist label is the class name that you need to use when you write your own CSS in your widget's Custom CSS section.

    #2- Inject sustom CSS code below into your widget.

    .checklist label{  color:white;

                            font-weight:bold;

                           }

    Please have a look at the following image if you need more details about how to inject css into widgets:

    After you select your widget, click Wizard icon.

     

    Click Custom CSS and write your CSS (paste) in the textbox. Finally, click Update Widget button.

     

    The result will be like this:

    If you need any further details please feel free to let us know.

    Thank you.