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

    Custom theme CSS codes

    Asked by wtwg on June 13, 2017 at 02:29 AM

    Hi there,

    I'm using a themed template for my form and when I add certain widgets the format is very different and I would love to customise them. I just don't know what codes to use. I want to change the text box style, colour and text colour to suit the rest of my form. Can you help please?

    Many thanks,

    You guys are always so helpful.

    Page URL:
    https://form.jotform.co/71591680123858

  • Profile Image
    JotForm Support

    Answered by Chriistian on June 13, 2017 at 03:06 AM

    I understand that you would like to style your widgets so that it will look like the rest of the fields on your form. To achieve this, please see the instructions below:

    1. For the Email Correctness Check widget, please inject the CSS codes:

    input#user_email {

        background-color: rgba(255, 255, 255, 0.31);

        height: 25px;

        border-radius: 6px;

        border-color: gray;

    }

    2. For the Configurable list widget, here's the CSS code:

    tr {

        color: white;

    }

    input[type="text"], select, span.dateDrowdowns {

       background-color: rgba(255, 255, 255, 0.31);

    border-color: gray;

    }

    3. For the Inventory widget, here's the CSS code:

    ul#checklist {

        background-color: rgba(255, 255, 255, 0.31);

        border-color: gray; 

        border-radius: 6px;

    }

     

    Thanks.

  • Profile Image

    Answered by newbie06 on June 13, 2017 at 03:09 AM

    hello sir, if you want to change the input text colour ,the following css code that you need to inject in order to get it working will more likely to help you out on this case.

     

    .form-textbox, .form-textarea, .form-radio-other-input, .form-captcha input, select {

    font-size:15px; color:red !important;

    }

    .form-textarea {

    color: #000 !important;

    }

    in case you dont know how to inject customized css code, https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes link will provide you the abilitity to do so.

     

    and for the textbox style, i dont quite understand what you meant by this. Would you care to elaborate a little .

    have a nice day sir