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 to change the required field color on a form?

    Asked by thomasbu on October 01, 2010 at 09:51 PM

    In my current form, when submit is pressed and req. fields are left empty, a light red box goes around it. is there a way to change the color that shows up when this happens as the pinkish color clashes with my site

    form validation form css inject custom css
  • Profile Image
    JotForm Founder

    Answered by aytekin on October 04, 2010 at 07:41 AM

    It is not possible to change it on the web site. However, if you use the full source code you can add CSS code to change the color.

    On the Form Builder:
    1. Open "Setup & Share" tab on toolbar,
    2. Click on "Share Form"3. Click on "Advanced Options"
    4. Click on "Full Source Code".

  • Profile Image

    Answered by thomasbu on October 04, 2010 at 01:31 PM

    What CSS would i edit? As I dont see anything about that in the CSS thats there, so how would i edit the source code?

  • Profile Image
    JotForm Founder

    Answered by aytekin on October 04, 2010 at 02:24 PM

    You can use Firefox's Firebug toolbar to find out the CSS class and then you can override it.

    OK, here is another idea. Use the "Download Source Code" option on the same Advanced Settings section. That will include the CSS and JavaScript files.

  • Profile Image

    Answered by thomasbu on October 04, 2010 at 07:55 PM

    Thanks! found it in the form.css file

  • Profile Image
    JotForm Founder

    Answered by aytekin on October 05, 2010 at 06:53 AM

    Yes, line 276 on css/styles/form.css:

    .form-required {
        margin-left: 5px;
        color: red;
    }

  • Profile Image

    Answered by thomasbu on October 05, 2010 at 06:02 PM

    nope, its a different line, thats for the border around the box i wanted to change the DIV that the text is wrapped in, either way i solved it and thanks!

  • Profile Image
    JotForm Founder

    Answered by aytekin on October 06, 2010 at 03:02 AM

    We have just added a new feature to JotForm to edit CSS right on the form builder. It is called "Inject Custom CSS". You can basically add CSS code from Preferences button on the form builder. Here is an example screenshot:

  • Profile Image

    Answered by lol.tuner on November 05, 2010 at 04:46 PM

    Hi guys. I ve got exactly the same problem. This pink stuff looks bad with my black website. As i m not big specialist could you please give me the exact code to put inside INJECT CUSTOM CSS. I just want all in black, no pink ;)

  • Profile Image
    JotForm Founder

    Answered by aytekin on November 08, 2010 at 10:23 AM

    You will need to provide more details on "pink". Exactly what is pink? Required fields are red and they can be changed as described in this forum thread. So, try using them.

  • Profile Image

    Answered by lol.tuner on November 10, 2010 at 08:08 AM

    Hi

    Here is a temporary link to my website. 

    http://marcobitch.free.fr/marcalmerasfrancais/Contact.html

    If you misspeled an email or leave blank name or surname, the big pinky red box background appears.

    This is what i m talking about.

    I just want to put this big backgroung pinky red in black but keep the warning message (

    Enter a valid e-mail address) and its background.

     

    Hope you can help me.

    I m not specialist o CSS and html.

    I use iweb.

     

    thanks

  • Profile Image
    JotForm Founder

    Answered by aytekin on November 10, 2010 at 11:03 AM

    After making the change above, please click on Preview and test the form. See, if it works as you would like. Once that is working update the form code on your web site.

  • Profile Image

    Answered by lol.tuner on November 11, 2010 at 11:09 AM

    The code you wrote on your 5 th october mail doesn t change anything to my problem, even when i change the red to black.

    Coud you please give me the CSS line to copy in the "Inject custom CSS" field to fix the big pinky red backgroung.

    Thanks by advance

  • Profile Image
    JotForm Founder

    Answered by aytekin on November 12, 2010 at 03:44 AM

    Here is the code that removes the red background on the required fields:

    .form-line-error {
       background:none repeat scroll 0 0;
    }

  • Profile Image

    Answered by lol.tuner on November 13, 2010 at 03:28 PM

    Super. Thanks a lot.

  • Profile Image

    Answered by glambo21 on December 05, 2010 at 05:28 PM

    hi. i also followed this option to remove the red background but can you please provide the code to remove the red background from ( Enter valid e-mail address) section that pops up?

    thanks

  • Profile Image
    JotForm Founder

    Answered by aytekin on December 06, 2010 at 12:02 PM

    To change the color of the hightlight effect, you can also use the Inject Custom CSS feature on the Preferences screen. Enter this code there:

    .form-line-active{
       background-color: #F5F5F5;
    }

  • Profile Image

    Answered by glambo21 on December 07, 2010 at 02:00 AM

    cheers mate.

  • Profile Image

    Answered by rainbow on April 14, 2011 at 08:17 PM

    .form-line-active{
       background-color: #F5F5F5;
    }

    I tried above code in css & it doesn't work. Still I see pink & red border line in my required fields.

  • Profile Image

    Answered by allanftd on April 15, 2011 at 04:54 AM

    Hi rainbow,

    May we ask for the URL where we can inspect your form? We'll await your response.

    JOTFORM SUPPORT

  • Profile Image
    JotForm Support

    Answered by abajan on April 15, 2011 at 06:15 AM

    I visited rainbow\'s form several hours ago but apparently it has now been deleted. However, I think what s/he wanted to do was change the colors indicated in the example below:

    This would be a good feature to have in our WYSIWYG editor without having to resort to injecting customized CSS because many people like to have as many form elements as possible blend into the color scheme of their site.

  • Profile Image

    Answered by rainbow on April 15, 2011 at 10:49 AM

    Yes abajan that is exactly what I am trying to do. I tried to change css for pink color but nothing seems to work.

    The form is not deleted its still there with different title.

    Also I have othere problem : I was trying to embed lightbox for from which is working fine but first it asks me to click on title link then only it opens the form in lightbox. Is there way in which I can open form directly in litebox when I click Apply button from my other HTML page. Right now when I click Apply button it take me to form page but first I have to click on title link which is Apply, then only it opens the form in lightbox. I just want to skip the step where I have to click on link.

     

     

  • Profile Image
    JotForm Support

    Answered by NeilVicente on April 16, 2011 at 03:37 AM

    @rainbow,

    To change the background color of the "This field is required" message, please use the codes below:

    div.form-input-wide div.form-error-message {
    background-color:lightgrey;
    }
    .form-error-arrow-inner {
    border-color: transparent transparent lightgrey;
    }

    Replace lightgrey with any color you want. Be sure to use the same color for both, unless you want a different color for the small arrow-like triangle.

    I hope you find this info useful. Thank you for using Jotform.

  • Profile Image
    JotForm Support

    Answered by abajan on May 27, 2011 at 11:00 PM

    Well, after pointing a user to this thread for additional information regarding customizing the unfilled required field warning, I've been racking my brain trying to figure out why the above code wasn't changing the background of the "This field is required." message, only to discover that simply adding !important keyword would do the trick:

    .form-error-message {
    background-color:lightgrey !important;
    }

    Actually, from what I can tell, there are at least six (6) elements associated with the unfilled required field warning that can be modified:

    * The background of the entire field
    * The background of the "This field is required." section
    * The exclamation mark image inside of the same section
    * The color of the arrow that points to the input
    * The border of the input
    * The background of the input

    Here is an example of injected CSS that changes all six:

    .form-line-error {
    background:none repeat scroll 0 0;
    }
    .form-error-message {
    background:#FFA !important;
    }
    .form-error-arrow-inner {
    border-color: transparent transparent #FFA;
    }
    .form-validation-error {
    background-color:#CFC;
    border:1px solid green;
    -moz-box-shadow:0 0 2px green;
    -webkit-box-shadow: 0 0 2px green;
    box-shadow: 0 0 2px green;
    }

    It's not the best color scheme in the world but that wasn't the purpose of the example.


    ~ Wayne

  • Profile Image

    Answered by unics on May 29, 2011 at 05:17 AM

    Hi, I have already injected a file in the "inject custom css file" and got what i want but  I want to change some other thing but i cant inject another custom css file. is there a limit in the custom css file injected?

  • Profile Image
    JotForm Support

    Answered by abajan on May 29, 2011 at 05:45 AM

    Hello unics

    Could you please provide the URL to your form so that we can clone it and have a look at the injected CSS you are using? To my knowledge, within reason, there's no limit to the amount of CSS that can be injected. However, it is possible that the extra CSS you are attempting to inject is not effecting the change you desire because one or more of the rules in the existing CSS take precedence over your code.

    Thanks.


    ~ Wayne

  • Profile Image
    JotForm Support

    Answered by NeilVicente on May 29, 2011 at 05:46 AM

    @unics

    As a matter of fact you can inject as much custom css code you want in the custom css field. There is no limit whatsoever to customizing how your form looks. Only your imagination is the limit.

    Watch this short video to learn how to add more css code into your form.

    Let me know if your having further problems with this. Thank you.


    Neil

    EDIT: omg abajan you beat me by a split second! lol

  • Profile Image
    JotForm Support

    Answered by abajan on May 29, 2011 at 05:49 AM

    Indeed I did Neil! :)

  • Profile Image

    Answered by unics on May 29, 2011 at 08:50 AM

    That's what exactly im thinking of doing because when I first inject the 1st batch of custom css, thats how I do it but when I decided to add another css I cant even click custom css field. sometimes i can click but there's no paste in the right click button even if I already have copied it in the memory.

  • Profile Image
    JotForm Support

    Answered by abajan on May 29, 2011 at 09:06 AM

    Unics, there's a possibility (remote though it may be) that the first CSS you injected may be causing the problems you are encountering. Only this morning I discovered that injected CSS can effect not only the form but also the form builder once the form is loaded. If possible, cut the first batch of CSS from the "Inject Custom CSS" field, paste it somewhere for safekeeping and save the form. Now try to insert the second set of CSS.


    ~ Wayne

  • Profile Image

    Answered by advancedperformersstudio on July 13, 2011 at 03:06 PM

    Just a little help incase needed... 

    here are the hacks for radio and checkbox widths

     

    #input_4_0 {

        width: 10px;

    }

    #input_4_1 {

        width: 10px;

    }

    #input_5_0 {

        width: 10px;

    }

    #input_5_1 {

        width: 10px;

    }

    #input_5_2 {

        width: 10px;

    }

    #input_5_3 {

        width: 10px;

    }

    #input_5_4 {

        width: 10px;

    }

    #input_2 {

        width: 190px;

    }

    #input_3 {

        width: 190px;}

    li#id_2.form-line {

        background: #fff;}

    li#id_3.form-line {

        background: #fff;}

  • Profile Image

    Answered by DelDel on December 11, 2012 at 09:04 AM

    Hello, I am working on a website.
    I have a problem with the appearance of source code form. This is a block of text without line breaks or spacing. I want to know what is the tag to add the CSS for not well organized and readable.
    thank you

  • Profile Image

    Answered by thomasbu on December 11, 2012 at 09:05 AM
    Thank You, jotformforum_6953@interlogy.com, for contacting Northeast Solar & Wind Power, LLC. An agent will respond to your request shortly.
    Your subject of interest has been recorded as: =?UTF-8?Q?Re=3a_How_to_change_the_required_field_color_on_a_form=3f?=
    For emergencies please dial (401)-884-0131 and leave a message if outside of normal business hours.
    If your question/comment pertains to our website or any technical issue, please contact our Webmaster at webmaster@neastsolar.com
    Thank You,
    Northeast Solar & Wind Power, LLC
    68 Dorrance Street #169
    Providence, RI 02903
    (401)-228-1900
    www.neastsolar.com
    Note: This is an automated response. Please do not reply to this message and wait until our agent has processed your request.
    You will not receive another automated response for any emails sent to this address for the next 8 hours, however we will still receive your emails.
  • Profile Image
    JotForm Support

    Answered by EltonCris on December 12, 2013 at 02:27 AM

    @DelDel

    Please post your question to a separate thread to avoid confusions from the other users on this thread, and so we can focus on providing a you solution regarding on the problem you've encountered.

    Thank you for your understanding.

  • Profile Image
    JotForm Support

    Answered by TitusN on May 02, 2014 at 03:16 PM

    Hello,

    Sorry - but we did not get the last response you sent to us.

    Please try again by clicking on this link.

    If you did not try to respond to this support thead - you may ignore this message.

    Thank you