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

    Customize font color and size in certain fields

    Asked by Arion444 on October 07, 2014 at 05:59 AM

    I need to know how to change HTML coding on some of the text in the form I've embedded on my Weebly site. Compare the embedded form to the form in my account, and you can see that with the coloured background some of the text is illegible.

    Thanks,
    Isaac

     

    Page URL:
    http://www.isaacgeorge.com/kr-class-cork-booking-form.html

    size font color font css alter CSS
  • Profile Image

    Answered by Ben on October 07, 2014 at 09:20 AM

    Hi Isaac

    I took a look at your website and I see what you mean, with some colors just barely being seen.

    Since you might want to change the color to some others I will list each CSS code for each section that it covers.

    To change the color of the heading element at the very top:

    .form-header-group h2
    {
        color: white;
    }

    That will change this text "Kundalini Reiki Class Cork Nov 23 2014" to white.

    To change the color of the options at the bottom of the jotform:

    span.form-radio-item > label
    {
        color: white;
    }

    That will change "Yes" and "No" to white.

    Now next code is to change all the labels if you want to:

    .form-line > label
    {
        color: white;
    }

    This will change the label such as "E-Mail", "Mobile Number", etc to white color.

    You can see how to add it to your jotform here Inject Custom CSS Codes.

    Do let us know if this works for you and if you have any further questions.

    Best Regards,
    Ben

  • Profile Image

    Answered by Arion444 on October 07, 2014 at 09:49 AM

    I found the line "form-line>label" and changed that color, but I can't seem to these two pieces in the code. I'm using Source code.

    form-header-group h2
    {
        color: white;
    }

    and

    span.form-radio-item > label
    {
        color: white;
    }

     

  • Profile Image

    Answered by Arion444 on October 07, 2014 at 09:53 AM

    Just uploaded the site with the one change made, and it appears to have fixed all three fields. Thanks!

  • Profile Image

    Answered by Ben on October 07, 2014 at 11:02 AM

    Hi Isaac,

    You are welcome.

    I am glad that it worked for you. Now in regards to the code, I see now that the link I added was not shown in the post above so I am adding it here again.

    You can inject that into your code following these steps: Inject Custom CSS Codes

    Once you add them, click to get your source code and all the changes will be included in the files.

    Do let us know if you have any further questions.

    Best Regards,
    Ben