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

    Change text panel colour

    Asked by ArchersPromo on June 15, 2011 at 08:54 AM

    Hi,

    How can I change the colour for the each questions' text panel? The boxes where customers fill in their details, how can I change the colour of thoise boxes? At the moment it's grey...

    Also how can I personalised the error/warning notices, again at the moment it's highlighted in pink, how can i change this?

    Thanks

  • Profile Image
    JotForm Support

    Answered by liyam on June 15, 2011 at 10:10 AM

    Hello ArchersPromo,

    You won't be able to change the color of the hover text, unfortunately.

    But, to be able to change the error warnings,

    1. Edit your form and go to Setup & Embed tab
    2. Click Preferences

    3. A pop up window will appear,go to Advanced Settings tab, and click the Edit Form Warnings button.

    4. Another pop-up will show up and there you can edit the form error warnings.

    5. After editing the form warnings, click the save button.

    If you have other questions or concerns, please let us know.

    Thanks,

    Liyam

  • Profile Image

    Answered by ArchersPromo on June 15, 2011 at 10:50 AM

    Thanks for the response, but the question are as follows:

    1. The grey edges on the boxes of the text fields - How can I change the grey?

    2. The PINK highlight on the error messages - How can this colour be changed from PINK?

    Thanks

  • Profile Image
    JotForm Support

    Answered by liyam on June 15, 2011 at 01:22 PM

    Hello ArchersPromo,

    I apologize I misunderstood some of your questions.  At first I thought you were just referring to the hover texts.

    Your question:

    How can I change the colour for the each questions' text panel? The boxes where customers fill in their details, how can I change the colour of thoise boxes? At the moment it's grey...

    Answer

    To edit the font color of your questions:

    1. Edit your form > Go to Form Style tab
    2.Click Font Color, a pop-up will appear where you can change the font color of your questions

     

    As for the others (editing the background color of the text boxes, and the font color inside it), there are no specific features in jotform where you can modify the colors of the text boxes, and the color of the font of the texts in the text boxes.  This can only be done using CSS injection.

    If this is the form that you're working on: https://www.jotform.com/11654715364, I have checked its source code and have tried out some CSS styles:

    .form-textbox {
    border: solid 1px green !important;
    background: none;
    background-color: orange; }
    textarea {
    border: solid 1px green !important;
    background: none !important;
    background-color: orange !important;
    }

    To make a CSS injection in your form:

    1.Edit your form and click Preferences

    2. A pop-up will show up, go to Form Styles tab, at the bottom is the Inject Custom CSS field

    3. Click the "Click to Edit" part beside the Inject Custom CSS and paste the CSS that I gave

     

    Your question:

    2. The PINK highlight on the error messages - How can this colour be changed from PINK?

    Answer:

    This can be done using CSS injection as well.  But you will not be able to use the pointing arrow anymore since it's colored pink and it's an image so you won't be able to change its color.

    I also have identified the classes that affects this errors and have randomly modified its settings, feel free to change the colors:

    .form-error-message {
    background-color: green !important;
    }
    .form-line-error {
    background-color: #cccccc !important;
    }
    .form-error-arrow-inner {
    display: none;
    }

    All in all, this is all the CSS codes involved that you should insert in your CSS injection:

    .form-textbox {
    border: solid 1px green !important;
    background: none;
    background-color: orange; }
    textarea {
    border: solid 1px green !important;
    background: none !important;
    background-color: orange !important;
    }
    .form-error-message {
    background-color: green !important;
    }
    .form-line-error {
    background-color: #cccccc !important;
    }
    .form-error-arrow-inner {
    display: none;
    }

    I hope you find the information shared here useful.

    If you have other questions or concerns, please let us know.

    Thanks,

    Liyam

  • Profile Image
    JotForm Support

    Answered by liyam on June 15, 2011 at 02:48 PM

    Correction on question number 2 regarding the pointing arrow:

    I was informed by one of my colleagues that the pointing arrow's color can also be changed.

    .form-error-arrow-inner {
    border-color: transparent transparent green;
    }

    So all in all, the CSS codes to inject are:

    .form-textbox {
    border: solid 1px green !important;
    background: none;
    background-color: orange; }
    textarea {
    border: solid 1px green !important;
    background: none !important;
    background-color: orange !important;
    }
    .form-error-message {
    background-color: green !important;
    }
    .form-line-error {
    background-color: #cccccc !important;
    }
    .form-error-arrow-inner
    {
    border-color: transparent transparent green;
    }

    Feel free to change the color in the code that I have provided.  If you have a specific preference and you need further assistance in regarding this matter, please let us know and we'll be here to assist.

    Thanks,

    Liyam